chore: merged next

angular.json

@@ -5,6 +5,11 @@
   "projects": {
     "sdg": {
       "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "packages/sdg",
       "sourceRoot": "packages/sdg",
       "prefix": "sdg",
@@ -28,10 +33,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "tsConfig": "packages/sdg/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "codeCoverage": true,
             "progress": true
           }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdg",
-  "version": "1.0.0-next.18",
+  "version": "1.0.0-next.19",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/infra-geo-ouverte/sdg.git"

packages/sdg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igo2/sdg",
-  "version": "1.0.0-next.18",
+  "version": "1.0.0-next.19",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/infra-geo-ouverte/sdg.git"

packages/sdg/src/_index.scss

@@ -2,3 +2,4 @@
 
 @forward './lib/breadcrumb/breadcrumb-theme' as breadcrumb-*;
 @forward './lib/navigation/navigation-theme' as navigation-*;
+@forward './lib/paginator/paginator-theme' as paginator-*;

packages/sdg/src/lib/button/button.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TEST_CONFIG } from '../../test-config';
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+      providers: [...TEST_CONFIG.providers!]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/sdg/src/lib/button/button.component.ts

@@ -0,0 +1,107 @@
+import { Component, Directive, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+type ButtonColor = 'primary' | 'accent' | 'warn';
+
+@Directive()
+class ButtonBase {
+  color = input<ButtonColor>();
+  disableRipple = input<boolean>();
+
+  click = output();
+
+  handleClick(event: Event) {
+    event.stopImmediatePropagation();
+    this.click.emit();
+  }
+}
+
+@Component({
+  selector: 'sdg-button-icon',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-icon-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class IconButtonComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button-raised',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-raised-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonRaisedComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button-flat',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-flat-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonFlatComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button-stroked',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-stroked-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonStrokedComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonComponent extends ButtonBase {}

packages/sdg/src/lib/button/button.scss

@@ -0,0 +1,7 @@
+:host {
+  pointer-events: none;
+}
+
+button {
+  pointer-events: all;
+}

packages/sdg/src/lib/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component';

packages/sdg/src/lib/core/theme/_all-theme.scss

@@ -1,24 +1,28 @@
 @use '../style/overrides';
 @use '../../breadcrumb/breadcrumb-theme' as breadcrumb;
 @use '../../navigation/navigation-theme' as navigation;
+@use '../../paginator/paginator-theme' as paginator;
 
 @mixin all-component-themes($theme) {
   @include breadcrumb.theme($theme);
   @include navigation.theme($theme);
+  @include paginator.theme($theme);
   @include overrides.override-igo2-lib-themes($theme);
   @include overrides.override-material-themes($theme);
 }
 
 @mixin all-component-colors($theme) {
   @include breadcrumb.color($theme);
   @include navigation.color($theme);
+  @include paginator.color($theme);
   @include overrides.override-igo2-lib-colors($theme);
   @include overrides.override-material-colors($theme);
 }
 
 @mixin all-component-densities($theme) {
   @include breadcrumb.density($theme);
   @include navigation.density($theme);
+  @include paginator.density($theme);
   @include overrides.override-igo2-lib-densities($theme);
   @include overrides.override-material-densities($theme);
 }

packages/sdg/src/lib/paginator/_paginator-theme.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include color($theme);
+  @include density($theme);
+}
+
+@mixin color($theme) {
+}
+
+@mixin density($theme) {
+  $theme: map.merge(
+    $theme,
+    (
+      density: -2
+    )
+  );
+
+  sdg-paginator {
+    @include mat.icon-button-density($theme);
+  }
+}

packages/sdg/src/lib/paginator/index.ts

@@ -0,0 +1 @@
+export * from './paginator.component';

packages/sdg/src/lib/paginator/paginator.component.html

@@ -0,0 +1,62 @@
+@if (currentPageIndex !== 0) {
+  <button class="button" (click)="goToPreviousPage()">
+    <mat-icon class="chevron" color="primary">chevron_left</mat-icon>
+  </button>
+}
+@for (firstPageIndex of firstPagesIndexes; track firstPageIndex) {
+  <button
+    class="page"
+    [class.active]="firstPageIndex === currentPageIndex"
+    (click)="goToPage(firstPageIndex)"
+    [tabindex]="firstPageIndex !== currentPageIndex ? '0' : '-1'"
+  >
+    {{ firstPageIndex + 1 }}
+  </button>
+}
+@if (
+  (!middlePagesIndexes.length && lastPagesIndexes.length === 1) ||
+  middlePagesIndexes.length
+) {
+  <p class="ellipsis">...</p>
+}
+@for (middlePageIndex of middlePagesIndexes; track middlePageIndex) {
+  <button
+    class="page"
+    [class.active]="middlePageIndex === currentPageIndex"
+    (click)="goToPage(middlePageIndex)"
+    [tabindex]="middlePageIndex !== currentPageIndex ? '0' : '-1'"
+  >
+    {{ middlePageIndex + 1 }}
+  </button>
+}
+@if (
+  (!middlePagesIndexes.length && firstPagesIndexes.length === 1) ||
+  middlePagesIndexes.length
+) {
+  <p class="ellipsis">...</p>
+}
+@for (lastPageIndex of lastPagesIndexes; track lastPageIndex) {
+  <button
+    class="page"
+    [class.active]="lastPageIndex === currentPageIndex"
+    (click)="goToPage(lastPageIndex)"
+    [tabindex]="lastPageIndex !== currentPageIndex ? '0' : '-1'"
+  >
+    {{ lastPageIndex + 1 }}
+  </button>
+}
+@for (pageIndex of pagesIndexes; track pageIndex) {
+  <button
+    class="page"
+    [class.active]="pageIndex === currentPageIndex"
+    (click)="goToPage(pageIndex)"
+    [tabindex]="pageIndex !== currentPageIndex ? '0' : '-1'"
+  >
+    {{ pageIndex + 1 }}
+  </button>
+}
+@if (currentPageIndex !== nbOfPages - 1) {
+  <button class="button" (click)="goToNextPage()">
+    <mat-icon class="chevron" color="primary">chevron_right</mat-icon>
+  </button>
+}

packages/sdg/src/lib/paginator/paginator.component.scss

@@ -0,0 +1,59 @@
+@use '../core/theme/colors';
+
+.button,
+.page,
+.ellipsis {
+  margin: 0;
+  line-height: 40px;
+  min-width: 40px;
+  height: 40px;
+  text-align: center;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:focus {
+    outline: 2px solid colors.$blue-light;
+  }
+
+  &:hover {
+    outline: none;
+    background-color: colors.$grey-pale;
+  }
+
+  &:active {
+    outline: none;
+    background-color: colors.$blue-pale;
+  }
+
+  &.active {
+    outline: none;
+    color: colors.$blue-dark;
+    font-weight: bold;
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.chevron {
+  vertical-align: middle;
+  font-variation-settings: 'wght' 400;
+}
+
+.page {
+  font-size: 16px;
+  font-family: 'Open Sans', sans-serif;
+  color: colors.$blue-piv;
+}
+
+.ellipsis {
+  color: colors.$blue-dark;
+  cursor: default;
+
+  &:hover {
+    background-color: transparent;
+  }
+}