@ecodev/natural 67.0.0 → 68.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecodev/natural",
-  "version": "67.0.0",
+  "version": "68.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/lib/_natural.scss

@@ -5,6 +5,7 @@
 @use './styles/material-scrolling-fixes.scss';
 @use './styles/table.scss';
 @use './styles/typography.scss';
+@use './styles/material-overrides.scss';
 @use './modules/panels/panels.scss';
 @use './modules/sidenav/sidenav.scss';
 @use './modules/alert/alert.scss';
@@ -36,21 +37,25 @@
     white-space: nowrap;
 }
 
-body {
-    // Fix a bug where hover on errored form fields show on-error color (white) label on grey background
-    @include mat.form-field-overrides(
-        (
-            filled-error-hover-label-text-color: var(--mat-sys-error),
-            filled-error-hover-active-indicator-color: var(--mat-sys-error),
-        )
-    );
+html,
+body,
+app-root {
+    margin: 0;
+    height: 100%;
+    min-height: 100%;
+}
 
-    @include mat.dialog-overrides(
-        (
-            container-color: var(--mat-sys-surface-bright),
-            container-elevation-shadow: var(--mat-sys-level5),
-        )
-    );
+app-root {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+body {
+    background-color: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
+    font: var(--mat-sys-body-medium);
 
     --nat-elevation: inset 0 1px rgba(255, 255, 255, 0.3), var(--mat-sys-level1);
     --nat-gradient-primary: var(--mat-sys-primary-container);
@@ -61,11 +66,16 @@ body {
     --nat-on-good: white;
     --nat-gradient-good: var(--nat-good);
     --nat-gradient-inverse-surface: var(--mat-sys-inverse-surface);
+    --nat-dark-fixed: #343434;
+    --nat-on-dark-fixed: #f8f8f8;
     --nat-bad: rgb(200, 11, 11);
     --nat-on-bad: white;
     --nat-gradient-bad: var(--nat-bad);
+    --nat-link-color: var(--mat-sys-on-surface);
 
     @supports (color: color-mix(in srgb, red, blue)) {
+        --nat-link-color: color-mix(in srgb, var(--mat-sys-primary-container) 80%, var(--mat-sys-on-surface));
+
         --nat-gradient-primary: linear-gradient(
             175deg,
             color-mix(in srgb, var(--mat-sys-primary-container) 95%, white),
@@ -107,6 +117,12 @@ body {
             color-mix(in srgb, var(--nat-bad) 60%, white),
             color-mix(in srgb, var(--nat-bad) 90%, black)
         );
+
+        --nat-gradient-dark-fixed: linear-gradient(
+            175deg,
+            color-mix(in srgb, var(--nat-dark-fixed) 90%, white),
+            color-mix(in srgb, var(--nat-dark-fixed) 90%, black)
+        );
     }
 }
 
@@ -122,33 +138,38 @@ body {
     }
 
     &-neutral1 {
-        background-color: var(--mat-sys-neutral10);
-        color: var(--mat-sys-on-surface);
+        background-color: var(--mat-sys-neutral10) !important;
+        color: var(--mat-sys-on-surface) !important;
     }
 
     &-neutral2 {
-        background-color: var(--mat-sys-neutral-variant20);
-        color: var(--mat-sys-on-surface);
+        background-color: var(--mat-sys-neutral-variant20) !important;
+        color: var(--mat-sys-on-surface) !important;
     }
 
     &-primary {
-        background-color: var(--mat-sys-primary-container);
-        color: var(--mat-sys-on-primary-container);
+        background-color: var(--mat-sys-primary-container) !important;
+        color: var(--mat-sys-on-primary-container) !important;
     }
 
     &-secondary {
-        background-color: var(--mat-sys-secondary-container);
-        color: var(--mat-sys-on-secondary-container);
+        background-color: var(--mat-sys-secondary-container) !important;
+        color: var(--mat-sys-on-secondary-container) !important;
     }
 
     &-tertiary {
-        background-color: var(--mat-sys-tertiary-container);
-        color: var(--mat-sys-on-tertiary-container);
+        background-color: var(--mat-sys-tertiary-container) !important;
+        color: var(--mat-sys-on-tertiary-container) !important;
     }
 
     &-error {
-        background-color: var(--mat-sys-error);
-        color: var(--mat-sys-on-error);
+        background-color: var(--mat-sys-error) !important;
+        color: var(--mat-sys-on-error) !important;
+    }
+
+    &-dark-fixed {
+        background-color: var(--nat-dark-fixed) !important;
+        color: var(--nat-on-dark-fixed) !important;
     }
 }
 
@@ -201,6 +222,24 @@ body {
         background: var(--nat-gradient-inverse-surface) !important;
         color: var(--mat-sys-inverse-on-surface) !important;
     }
+
+    &-dark-fixed {
+        background: var(--nat-gradient-dark-fixed) !important;
+        color: var(--nat-on-dark-fixed) !important;
+    }
+}
+
+// Most of our sidenav menus (mainly in admin) use simple nat-gradient-* that applies a contrasted text color
+// that is overridden on child element
+// This instruction activate text color inheritance to simplify html and css for active routes.
+.mat-mdc-list-item {
+    &[routerlinkactive*='nat-frame-'],
+    &[routerlinkactive*='nat-gradient-'] {
+        .mdc-list-item__start,
+        .mdc-list-item__primary-text {
+            color: inherit !important;
+        }
+    }
 }
 
 .nat-bold {
@@ -247,3 +286,21 @@ eco-fab-speed-dial .mdc-fab {
         );
     }
 }
+
+app-support a,
+.rich-text a,
+a.app-link {
+    cursor: pointer;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-color: var(--mat-sys-primary-container);
+    color: var(--nat-link-color);
+    text-decoration: none;
+
+    &:hover {
+        @supports (color: color-mix(in srgb, red, blue)) {
+            border-color: color-mix(in srgb, var(--mat-sys-primary-container) 85%, black);
+            color: color-mix(in srgb, var(--mat-sys-primary-container) 85%, black);
+        }
+    }
+}

package/src/lib/styles/color.scss

@@ -1,6 +1,5 @@
 @use '@angular/material' as mat;
 
-// TODO angular 21 : replace tonal by m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
 .mdc-button {
     @include mat.button-overrides(
         (

package/src/lib/styles/material-overrides.scss

@@ -0,0 +1,114 @@
+@use '@angular/material' as mat;
+
+body {
+    --nat-components-primary: var(--mat-sys-primary-container);
+
+    @include mat.dialog-overrides(
+        (
+            container-color: var(--mat-sys-surface-bright),
+            container-elevation-shadow: var(--mat-sys-level5),
+        )
+    );
+
+    @include mat.button-overrides(
+        (
+            outlined-label-text-color: var(--nat-link-color),
+            text-label-text-color: var(--nat-link-color),
+            filled-container-color: var(--nat-components-primary),
+            filled-label-text-color: var(--mat-sys-on-primary-container),
+        )
+    );
+
+    @include mat.slide-toggle-overrides(
+        (
+            selected-track-color: var(--nat-components-primary),
+            selected-pressed-track-color: var(--nat-components-primary),
+            selected-hover-track-color: var(--nat-components-primary),
+            selected-focus-track-color: var(--nat-components-primary),
+            selected-handle-color: var(--mat-sys-surface-container-lowest),
+            selected-focus-handle-color: var(--mat-sys-surface-container-lowest),
+            selected-icon-color: var(--nat-components-primary),
+            selected-hover-handle-color: var(--mat-sys-surface-container-lowest),
+            selected-pressed-handle-color: var(--mat-sys-surface-container-lowest),
+        )
+    );
+
+    @include mat.checkbox-overrides(
+        (
+            selected-icon-color: var(--nat-components-primary),
+            selected-focus-icon-color: var(--nat-components-primary),
+            selected-hover-icon-color: var(--nat-components-primary),
+            selected-pressed-icon-color: var(--nat-components-primary),
+        )
+    );
+
+    @include mat.radio-overrides(
+        (
+            selected-icon-color: var(--nat-components-primary),
+            selected-hover-icon-color: var(--nat-components-primary),
+            selected-focus-icon-color: var(--nat-components-primary),
+            selected-pressed-icon-color: var(--nat-components-primary),
+        )
+    );
+
+    @include mat.table-overrides(
+        (
+            row-item-outline-color: var(--mat-sys-outline-variant),
+        )
+    );
+
+    @include mat.tabs-overrides(
+        (
+            active-indicator-color: var(--nat-components-primary),
+            active-focus-indicator-color: var(--nat-components-primary),
+            active-hover-indicator-color: var(--nat-components-primary),
+        )
+    );
+
+    @include mat.form-field-overrides(
+        (
+            filled-focus-active-indicator-color: var(--nat-components-primary),
+            filled-focus-label-text-color: var(--mat-sys-on-surface),
+            // Fix a bug where hover on errored form fields show on-error color (white) label on grey background
+            filled-error-hover-label-text-color: var(--mat-sys-error),
+            filled-error-hover-active-indicator-color: var(--mat-sys-error),
+        )
+    );
+
+    @include mat.select-overrides(
+        (
+            focused-arrow-color: var(--mat-sys-on-surface),
+        )
+    );
+
+    @include mat.progress-spinner-overrides(
+        (
+            active-indicator-color: var(--nat-components-primary),
+        )
+    );
+
+    @include mat.slider-overrides(
+        (
+            handle-color: var(--nat-components-primary),
+            focus-handle-color: var(--nat-components-primary),
+            active-track-color: var(--nat-components-primary),
+            inactive-track-color: var(--mat-sys-on-surface),
+            label-container-color: var(--mat-sys-on-surface),
+            label-label-text-color: var(--mat-sys-surface-container-lowest),
+        )
+    );
+
+    @include mat.sidenav-overrides(
+        (
+            container-background-color: var(--mat-sys-surface-container),
+            content-background-color: var(--mat-sys-surface-container),
+        )
+    );
+
+    @include mat.fab-overrides(
+        (
+            container-color: var(--mat-sys-tertiary-container),
+            foreground-color: var(--mat-sys-on-tertiary-container),
+        )
+    );
+}

package/src/lib/styles/table.scss

@@ -13,7 +13,7 @@
     );
 
     .mat-mdc-header-row {
-        background-color: var(--mat-sys-surface-container-high);
+        background: var(--mat-sys-surface-container-high);
     }
 
     .mat-mdc-footer-row {
@@ -22,7 +22,7 @@
 
     @include mat.paginator-overrides(
         (
-            container-background-color: var(--mat-sys-surface-container-low),
+            container-background-color: var(--mat-sys-surface-container-lowest),
         )
     );
 }
@@ -33,6 +33,7 @@
 
     [mat-cell] {
         justify-content: center;
+        background: var(--mat-sys-surface-container-lowest);
     }
 
     .mdc-data-table__content .mdc-data-table__row:last-child .mdc-data-table__cell {

package/src/lib/styles/typography.scss

@@ -1,112 +1,5 @@
-// TODO After angular v21, replace entire file with: body{ @include mat.system-classes();}
+@use '@angular/material' as mat;
 
-// ***********************************************************************************************
-// Font - Apply typography styles
-// See https://m3.material.io/styles/typography/applying-type for guidance.
-// ***********************************************************************************************
-
-// Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
-// Material, this is used for the subscript text in a form field and the text in a paginator.
-.mat-font-body-sm {
-    font: var(--mat-sys-body-small);
-    letter-spacing: var(--mat-sys-body-small-tracking);
-}
-
-// Sets the font to the body medium typeface. Use for medium body text, this is the default
-// body font. In Angular Material, this is used for the text in a table row and the supporting
-// text in a dialog.
-.mat-font-body-md {
-    font: var(--mat-sys-body-medium);
-    letter-spacing: var(--mat-sys-body-medium-tracking);
-}
-
-// Sets the font to the body large typeface. Use for large body text, such as an introductory
-// paragraph. In Angular Material, this is used for the text in a list item and the text in a
-// select trigger.
-.mat-font-body-lg {
-    font: var(--mat-sys-body-large);
-    letter-spacing: var(--mat-sys-body-large-tracking);
-}
-
-// Sets the font to the display small typeface. Use for small display text, such as a date.
-.mat-font-display-sm {
-    font: var(--mat-sys-display-small);
-    letter-spacing: var(--mat-sys-display-small-tracking);
-}
-
-// Sets the font to the display medium typeface. Use for medium display text, such as a hero
-// title.
-.mat-font-display-md {
-    font: var(--mat-sys-display-medium);
-    letter-spacing: var(--mat-sys-display-medium-tracking);
-}
-
-// Sets the font to the display large typeface. Use for large display text, such as a hero title.
-.mat-font-display-lg {
-    font: var(--mat-sys-display-large);
-    letter-spacing: var(--mat-sys-display-large-tracking);
-}
-
-// Sets the font to the headline small typeface. Use for small headlines, such as a page title. In
-// Angular Material, this is used for the headline in a dialog.
-.mat-font-headline-sm {
-    font: var(--mat-sys-headline-small);
-    letter-spacing: var(--mat-sys-headline-small-tracking);
-}
-
-// Sets the font to the headline medium typeface. Use for medium headlines, such as a section
-// title.
-.mat-font-headline-md {
-    font: var(--mat-sys-headline-medium);
-    letter-spacing: var(--mat-sys-headline-medium-tracking);
-}
-
-// Sets the font to the headline large typeface. Use for large headlines, such as a page title on
-// a large screen.
-.mat-font-headline-lg {
-    font: var(--mat-sys-headline-large);
-    letter-spacing: var(--mat-sys-headline-large-tracking);
-}
-
-// Sets the font to the label small typeface. Use for small labels, such as text in a badge.
-.mat-font-label-sm {
-    font: var(--mat-sys-label-small);
-    letter-spacing: var(--mat-sys-label-small-tracking);
-}
-
-// Sets the font to the label medium typeface. Use for medium labels. In Angular Material, this
-// is used for the slider label.
-.mat-font-label-md {
-    font: var(--mat-sys-label-medium);
-    letter-spacing: var(--mat-sys-label-medium-tracking);
-}
-
-// Sets the font to the label large typeface. Use for large labels. In Angular Material, this is
-// used for buttons, chips, and menu labels.
-.mat-font-label-lg {
-    font: var(--mat-sys-label-large);
-    letter-spacing: var(--mat-sys-label-large-tracking);
-}
-
-// Sets the font to the title small typeface. Use for small titles, such as a card title. In
-// Angular Material, this is used for the header of a table and the label of an option group.
-.mat-font-title-sm {
-    font: var(--mat-sys-title-small);
-    letter-spacing: var(--mat-sys-title-small-tracking);
-}
-
-// Sets the font to the title medium typeface. Use for medium titles, such as a dialog title
-// or the primary text in a list item. In Angular Material, this is used for the subtitle
-// of a card and the header of an expansion panel.
-.mat-font-title-md {
-    font: var(--mat-sys-title-medium);
-    letter-spacing: var(--mat-sys-title-medium-tracking);
-}
-
-// Sets the font to the title large typeface. Use for large titles, such as a page title on a
-// small screen. In Angular Material, this is used for the title of a card and the title of a
-// toolbar.
-.mat-font-title-lg {
-    font: var(--mat-sys-title-large);
-    letter-spacing: var(--mat-sys-title-large-tracking);
+body {
+    @include mat.system-classes();
 }

package/types/ecodev-natural.d.ts

@@ -1927,7 +1927,7 @@ declare class NaturalColumnsPickerComponent implements OnChanges {
     readonly isMobile: rxjs.Observable<boolean>;
     private initColumns;
     updateColumns(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(changes: SimpleChanges<this>): void;
     defaultTrue(value: boolean | undefined): boolean;
     color(button: Button): NaturalPalette | null;
     useCheckbox(button: Button): boolean;
@@ -2940,7 +2940,7 @@ declare abstract class NaturalAbstractFile implements OnInit, OnDestroy, OnChang
     private readonly document;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(changes: SimpleChanges<this>): void;
     private getFileElement;
     private enableSelecting;
     protected handleFiles(files: File[]): void;
@@ -3045,7 +3045,7 @@ declare class NaturalFileComponent implements OnInit, OnChanges {
     readonly modelChange: i0.OutputEmitterRef<FileModel>;
     imagePreview: string;
     filePreview: string | null;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(changes: SimpleChanges<this>): void;
     ngOnInit(): void;
     upload(file: File): void;
     getDownloadLink(): null | string;
@@ -3153,7 +3153,7 @@ declare class NaturalHierarchicSelectorComponent implements OnInit, OnChanges {
     /**
      * Angular OnChange implementation
      */
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(changes: SimpleChanges<this>): void;
     ngOnInit(): void;
     /**
      * Toggle selection of a node, considering if multiple selection is activated or not