@ecodev/natural 66.0.3 → 66.0.4

package/index.d.ts

@@ -4052,15 +4052,13 @@ declare class NaturalTableButtonComponent {
     readonly fragment: i0.InputSignal<string | undefined>;
     readonly preserveFragment: i0.InputSignal<boolean>;
     readonly disabled: i0.InputSignal<boolean>;
-    readonly raised: i0.InputSignal<boolean>;
-    protected readonly appearance: i0.Signal<MatButtonAppearance>;
-    protected readonly iconClass: i0.Signal<"" | "mat-elevation-z4">;
+    readonly appearance: i0.InputSignal<MatButtonAppearance>;
     readonly color: i0.InputSignal<ThemePalette>;
     protected readonly buttonClick$: Subject<MouseEvent>;
     readonly buttonClick: i0.OutputRef<MouseEvent>;
     protected readonly type: i0.Signal<"none" | "href" | "routerLinkOrClick">;
     static ɵfac: i0.ɵɵFactoryDeclaration<NaturalTableButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NaturalTableButtonComponent, "natural-table-button", never, { "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "queryParamsHandling": { "alias": "queryParamsHandling"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "navigate": { "alias": "navigate"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "preserveFragment": { "alias": "preserveFragment"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NaturalTableButtonComponent, "natural-table-button", never, { "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "queryParamsHandling": { "alias": "queryParamsHandling"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "navigate": { "alias": "navigate"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "preserveFragment": { "alias": "preserveFragment"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
 }
 
 type NaturalDialogTriggerRoutingData<T, D> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecodev/natural",
-  "version": "66.0.3",
+  "version": "66.0.4",
   "license": "MIT",
   "repository": "github:Ecodev/natural",
   "sideEffects": false,

package/src/lib/_natural.scss

@@ -94,7 +94,6 @@ body {
 
     &-neutral1 {
         background-color: var(--mat-sys-neutral10);
-
         color: var(--mat-sys-on-surface);
     }
 
@@ -138,34 +137,6 @@ body {
     }
 }
 
-.mdc-fab {
-    &.nat-rounded {
-        @include mat.fab-overrides(
-            (
-                container-shape: var(--mat-sys-corner-full),
-                extended-container-shape: var(--mat-sys-corner-full),
-                small-container-shape: var(--mat-sys-corner-full),
-            )
-        );
-    }
-
-    &.nat-flat {
-        @include mat.fab-overrides(
-            (
-                container-elevation-shadow: 0,
-                focus-container-elevation-shadow: 0,
-                hover-container-elevation-shadow: 0,
-                extended-container-elevation-shadow: 0,
-                extended-focus-container-elevation-shadow: 0,
-                extended-hover-container-elevation-shadow: 0,
-                small-container-elevation-shadow: 0,
-                small-focus-container-elevation-shadow: 0,
-                small-hover-container-elevation-shadow: 0,
-            )
-        );
-    }
-}
-
 .nat-gradient {
     &-primary {
         background: var(--nat-gradient-primary) !important;
@@ -217,6 +188,109 @@ h6 {
     margin: 0;
 }
 
+// Nice todo angular 21 : replace tonal by m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+[matButton] {
+    &[color='error'] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--mat-sys-error-container),
+                filled-container-color: var(--mat-sys-error-container),
+                filled-label-text-color: var(--mat-sys-on-error-container),
+                tonal-container-color: color-mix(in srgb, var(--mat-sys-error-container) 12%, transparent),
+                tonal-label-text-color: var(--mat-sys-on-surface),
+                protected-container-color: color-mix(in srgb, var(--mat-sys-error-container) 60%, black),
+                protected-label-text-color: white,
+                outlined-outline-color: var(--mat-sys-error-container),
+                outlined-label-text-color: var(--mat-sys-error-container),
+            )
+        );
+    }
+
+    &[color='tertiary'] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--mat-sys-tertiary-container),
+                filled-container-color: var(--mat-sys-tertiary-container),
+                filled-label-text-color: var(--mat-sys-on-tertiary-container),
+                tonal-container-color: color-mix(in srgb, var(--mat-sys-tertiary-container) 12%, transparent),
+                tonal-label-text-color: var(--mat-sys-on-surface),
+                protected-container-color: color-mix(in srgb, var(--mat-sys-tertiary-container) 60%, black),
+                protected-label-text-color: white,
+                outlined-outline-color: var(--mat-sys-tertiary-container),
+                outlined-label-text-color: var(--mat-sys-tertiary-container),
+            )
+        );
+    }
+}
+
+[matMiniFab],
+[matFab] {
+    &[color='error'] {
+        @include mat.fab-overrides(
+            (
+                container-color: var(--mat-sys-error-container),
+                foreground-color: var(--mat-sys-on-error-container),
+                small-container-color: var(--mat-sys-error-container),
+                small-foreground-color: var(--mat-sys-on-error-container),
+            )
+        );
+    }
+
+    &[color='tertiary'] {
+        @include mat.fab-overrides(
+            (
+                container-color: var(--mat-sys-tertiary-container),
+                foreground-color: var(--mat-sys-on-tertiary-container),
+                small-container-color: var(--mat-sys-tertiary-container),
+                small-foreground-color: var(--mat-sys-on-tertiary-container),
+            )
+        );
+    }
+
+    &.nat-rounded {
+        @include mat.fab-overrides(
+            (
+                container-shape: var(--mat-sys-corner-full),
+                extended-container-shape: var(--mat-sys-corner-full),
+                small-container-shape: var(--mat-sys-corner-full),
+            )
+        );
+    }
+
+    &.nat-flat {
+        @include mat.fab-overrides(
+            (
+                container-elevation-shadow: 0,
+                focus-container-elevation-shadow: 0,
+                hover-container-elevation-shadow: 0,
+                extended-container-elevation-shadow: 0,
+                extended-focus-container-elevation-shadow: 0,
+                extended-hover-container-elevation-shadow: 0,
+                small-container-elevation-shadow: 0,
+                small-focus-container-elevation-shadow: 0,
+                small-hover-container-elevation-shadow: 0,
+            )
+        );
+    }
+}
+
+[matIconButton] {
+    &[color='error'] {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-error-container),
+            )
+        );
+    }
+    &[color='tertiary'] {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-tertiary-container),
+            )
+        );
+    }
+}
+
 // Todo Remove on angular v21
 // add body{ @include mat.system-classes();}