Material 3

.github/copilot-instructions.md

@@ -0,0 +1,55 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+    - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+- Do not write arrow functions in templates (they are not supported).
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

.github/workflows/main.yml

@@ -10,6 +10,7 @@ jobs:
                   fetch-depth: 0 # Need all tags to get a version number in-between tags
             - uses: actions/setup-node@v4
               with:
+                  node-version: '24'
                   cache: 'yarn'
             - run: yarn --frozen-lockfile
             - run: yarn build-demo
@@ -25,6 +26,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
+                  node-version: '24'
                   cache: 'yarn'
             - run: yarn --frozen-lockfile
             - run: ./node_modules/.bin/ng test natural --progress false --watch=false --browsers ChromeHeadlessCustom
@@ -38,6 +40,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
+                  node-version: '24'
                   cache: 'yarn'
             - run: yarn --frozen-lockfile
             - run: yarn lint
@@ -48,6 +51,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
+                  node-version: '24'
                   cache: 'yarn'
             - run: yarn --frozen-lockfile
             - run: ./node_modules/.bin/prettier --experimental-cli --check .
@@ -75,9 +79,7 @@ jobs:
             id-token: write
             packages: write
         if: github.event_name == 'push' && contains(github.ref, 'refs/tags/')
-        needs:
-            - build
-            - test
+        needs: [build, test, lint, prettier]
         steps:
             - uses: actions/checkout@v4
               with:
@@ -91,24 +93,11 @@ jobs:
             # Publish to npm
             - uses: actions/setup-node@v4
               with:
+                  node-version: '24'
                   registry-url: 'https://registry.npmjs.org'
-            - run: npm publish --provenance --access public dist/natural/
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-            - run: npm publish --provenance --access public dist/natural-editor/
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-            # Publish to GitHub Packages
-            - uses: actions/setup-node@v4
-              with:
-                  registry-url: 'https://npm.pkg.github.com'
-            - run: npm publish --provenance --access public dist/natural/
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-            - run: npm publish --provenance --access public dist/natural-editor/
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            - run: npm publish dist/natural/
+            - run: npm publish dist/natural-editor/
 
             # Create release
             - name: Get release info

README.md

@@ -4,7 +4,6 @@
 [![Total Downloads](https://img.shields.io/npm/dt/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
 [![Latest Stable Version](https://img.shields.io/npm/v/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
 [![License](https://img.shields.io/npm/l/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
-[![Join the chat at https://gitter.im/Ecodev/natural](https://badges.gitter.im/Ecodev/natural.svg)](https://gitter.im/Ecodev/natural)
 
 This project is a collection of Angular Material components and various utilities classes for Angular projects.
 

angular.json

@@ -26,7 +26,21 @@
                         "polyfills": ["zone.js", "@angular/localize/init"],
                         "tsConfig": "tsconfig.app.json",
                         "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss", "node_modules/@ecodev/natural-layout/natural-layout.css"],
+                        "styles": [
+                            "src/styles.scss",
+                            "src/styles/natural.scss",
+                            "src/styles/epicerio.scss",
+                            "src/styles/chez-emmy.scss",
+                            "src/styles/epicentre.scss",
+                            "src/styles/epicoop.scss",
+                            "src/styles/jardinvivant.scss",
+                            "src/styles/lacanopee.scss",
+                            "src/styles/lavracrie.scss",
+                            "src/styles/lelocalhauterive.scss",
+                            "src/styles/levorace.scss",
+                            "src/styles/rucher.scss",
+                            "node_modules/@ecodev/natural-layout/natural-layout.css"
+                        ],
                         "scripts": [],
                         "allowedCommonJsDependencies": ["graphql-tag", "zen-observable"],
                         "extractLicenses": false,

eslint.config.mjs

@@ -20,6 +20,7 @@ const basicAllowedAttributes = [
     'id',
     'lang',
     'list',
+    'matButton',
     'name',
     'ngClass',
     'ngProjectAs',
@@ -30,6 +31,7 @@ const basicAllowedAttributes = [
     'stroke',
     'stroke-width',
     'style',
+    'subscriptSizing',
     'svgIcon',
     'tabindex',
     'target',

package.json

@@ -1,6 +1,6 @@
 {
     "name": "demo",
-    "version": "0.0.0",
+    "version": "66.0.13",
     "license": "MIT",
     "scripts": {
         "ng": "ng",
@@ -53,7 +53,7 @@
         "prosemirror-view": "^1.41.0",
         "rxjs": "^7.8.2",
         "tslib": "^2.8.1",
-        "type-fest": "^4.41.0",
+        "type-fest": "^5.3.1",
         "zone.js": "~0.15.1"
     },
     "devDependencies": {

projects/natural-editor/package.json

@@ -2,7 +2,10 @@
     "name": "@ecodev/natural-editor",
     "version": "0.0.1",
     "license": "MIT",
-    "repository": "github:Ecodev/natural",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Ecodev/natural.git"
+    },
     "sideEffects": false,
     "exports": {
         ".": {

projects/natural-editor/src/lib/editor/editor.component.html

@@ -3,7 +3,7 @@
     <div class="menu-container">
         <div class="menu">
             @if (save$.observed) {
-                <button mat-icon-button i18n-matTooltip matTooltip="Enregistrer" (click)="save$.next()">
+                <button matIconButton i18n-matTooltip matTooltip="Enregistrer" (click)="save$.next()">
                     <mat-icon fontIcon="save" />
                 </button>
             }
@@ -268,7 +268,7 @@
             </mat-menu>
             @if (imageUploader()) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     naturalFileDrop
                     i18n-matTooltip
                     matTooltip="Insérer une image"
@@ -330,7 +330,7 @@
             }
             @if (menu.undo) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Annuler"
                     [disabled]="menu.undo.disabled"
@@ -341,7 +341,7 @@
             }
             @if (menu.redo) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Refaire"
                     [disabled]="menu.redo.disabled"
@@ -352,7 +352,7 @@
             }
             @if (menu.wrapBulletList && menu.wrapBulletList.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Liste à puce"
                     [disabled]="menu.wrapBulletList.disabled"
@@ -363,7 +363,7 @@
             }
             @if (menu.wrapOrderedList && menu.wrapOrderedList.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Liste à numéro"
                     [disabled]="menu.wrapOrderedList.disabled"
@@ -374,7 +374,7 @@
             }
             @if (menu.wrapBlockQuote && menu.wrapBlockQuote.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Citation"
                     [disabled]="menu.wrapBlockQuote.disabled"
@@ -385,7 +385,7 @@
             }
             @if (menu.joinUp && menu.joinUp.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Fusionner avec l'élément du haut"
                     [disabled]="menu.joinUp.disabled"
@@ -396,7 +396,7 @@
             }
             @if (menu.lift && menu.lift.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Désindenter"
                     [disabled]="menu.lift.disabled"
@@ -407,7 +407,7 @@
             }
             @if (menu.selectParentNode && menu.selectParentNode.show) {
                 <button
-                    mat-icon-button
+                    matIconButton
                     i18n-matTooltip
                     matTooltip="Sélectionner l'élément parent"
                     [disabled]="menu.selectParentNode.disabled"