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.20",
   "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.20",
   "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/anchor-menu/anchor-menu.component.html

@@ -0,0 +1,6 @@
+<div class="container">
+  <p><b>Dans cette page :</b></p>
+  @for (anchor of anchors(); track anchor) {
+    <a routerLink="./" [fragment]="anchor.htmlElementId">{{ anchor.text }}</a>
+  }
+</div>

packages/sdg/src/lib/anchor-menu/anchor-menu.component.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../core/theme/colors';
+
+.container {
+  display: flex;
+  flex-flow: column;
+  row-gap: 16px;
+  max-width: 825px;
+  margin: 24px 0px;
+  border-top: 1px solid colors.$grey-light;
+  border-bottom: 1px solid colors.$grey-light;
+  padding: 32px;
+  background-color: #f7f7f7;
+}
+
+p {
+  margin: 0px;
+}
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

packages/sdg/src/lib/anchor-menu/anchor-menu.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TEST_CONFIG } from '../../test-config';
+import { AnchorMenuComponent } from './anchor-menu.component';
+
+describe('AnchorMenuComponent', () => {
+  let component: AnchorMenuComponent;
+  let fixture: ComponentFixture<AnchorMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AnchorMenuComponent],
+      providers: [...TEST_CONFIG.providers!]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AnchorMenuComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('anchors', [
+      {
+        id: 'Section 1',
+        htmlElementId: 'section1'
+      },
+      {
+        id: 'Section 2',
+        htmlElementId: 'section2'
+      }
+    ]);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/sdg/src/lib/anchor-menu/anchor-menu.component.ts

@@ -0,0 +1,41 @@
+import { NgFor, NgIf } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnInit,
+  input
+} from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+
+import { Anchor } from './anchor-menu.interface';
+
+@Component({
+  selector: 'sdg-anchor-menu',
+  standalone: true,
+  imports: [NgIf, NgFor, RouterLink],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './anchor-menu.component.html',
+  styleUrls: ['./anchor-menu.component.scss']
+})
+export class AnchorMenuComponent implements OnInit {
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
+
+  anchors = input.required<Anchor[]>();
+
+  ngOnInit() {
+    this.activatedRoute.fragment.subscribe((fragment) => {
+      if (fragment) {
+        this.jumpToSection(fragment);
+      }
+    });
+  }
+
+  private jumpToSection(id: string) {
+    this.document.getElementById(id)?.scrollIntoView();
+  }
+}

packages/sdg/src/lib/anchor-menu/anchor-menu.interface.ts

@@ -0,0 +1,15 @@
+export interface Anchor {
+  text: string;
+  htmlElementId: string;
+}
+
+export function findTitleAnchors(containerElement: HTMLElement): Anchor[] {
+  const elements = containerElement.getElementsByTagName('h2');
+
+  const anchors = Array.from(elements).map((element) => ({
+    text: element.innerText,
+    htmlElementId: element.id
+  }));
+
+  return anchors;
+}

packages/sdg/src/lib/anchor-menu/index.ts

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

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';