@recursyve/nice-ui-kit.v2 16.0.0-beta.144 → 18.0.0-beta.144

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "16.0.0-beta.144",
+  "version": "18.0.0-beta.144",
   "exports": {
     ".": {
       "sass": "./_index.scss",
@@ -14,19 +14,19 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/forms": "^16.0.0",
-    "@angular/material": "^16.0.0",
-    "@recursyve/ngx-form-generator": ">= 16.0.0-beta.47",
-    "ngx-mask": "^16.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@recursyve/ngx-form-generator": ">= 18.0.0-beta.50",
+    "ngx-mask": "^18.0.0",
     "perfect-scrollbar": "^1.5.5",
     "uuid": ">= 9.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0",
-    "lottie-web": "~5.12.0",
+    "lottie-web": "~5.12.2",
     "class-transformer": "^0.5.1"
   },
   "module": "fesm2022/recursyve-nice-ui-kit.v2.mjs",

package/src/lib/components/base-form/base-form.theme.scss

@@ -5,16 +5,16 @@
 
     .nice-form {
         .mat-step-icon-selected {
-            background-color: mat.get-color-from-palette($accent);
+            background-color: mat.m2-get-color-from-palette($accent);
         }
 
         .mat-step-icon-state-done {
-            background-color: mat.get-color-from-palette($accent, 400);
+            background-color: mat.m2-get-color-from-palette($accent, 400);
         }
 
         .mat-list-item {
             .field-group-icon {
-                color: mat.get-color-from-palette($accent);
+                color: mat.m2-get-color-from-palette($accent);
             }
         }
     }

package/src/lib/components/date-range-picker/date-range-picker.theme.scss

@@ -36,7 +36,7 @@
 
         button {
             .mat-button-focus-overlay {
-                background: mat.get-color-from-palette($accent) !important;
+                background: mat.m2-get-color-from-palette($accent) !important;
             }
         }
 

package/src/lib/components/horizontal-stepper/horizontal-stepper.theme.scss

@@ -6,11 +6,11 @@
 
     nice-horizontal-stepper {
         .step {
-            background: mat.get-color-from-palette($primary, 500, 0.3);
+            background: mat.m2-get-color-from-palette($primary, 500, 0.3);
         }
 
         .step.active {
-            background: mat.get-color-from-palette($accent);
+            background: mat.m2-get-color-from-palette($accent);
         }
     }
 }

package/src/lib/components/toggle-button-group/toggle-button-group.theme.scss

@@ -15,19 +15,19 @@
                 &.selected {
                     &.bg-selected-accent {
                         .toggle-button-inner {
-                            color: mat.get-color-from-palette($accent, default-contrast);
+                            color: mat.m2-get-color-from-palette($accent, default-contrast);
                         }
                     }
 
                     &.bg-selected-primary {
                         .toggle-button-inner {
-                            color: mat.get-contrast-color-from-palette($primary, 500);
+                            color: mat.m2-get-contrast-color-from-palette($primary, 500);
                         }
                     }
 
                     &.bg-selected-warn {
                         .toggle-button-inner {
-                            color: mat.get-contrast-color-from-palette($warn, 500);
+                            color: mat.m2-get-contrast-color-from-palette($warn, 500);
                         }
                     }
                 }

package/src/lib/nice.theme.scss

@@ -85,7 +85,7 @@
 
     .mat-tab-group:not(.keep-material-style) {
         &.mat-accent .mat-tab-label-active, .mat-tab-label:focus:not(.mat-tab-disabled) {
-            color: mat.get-color-from-palette($accent);
+            color: mat.m2-get-color-from-palette($accent);
         }
     }
 }
@@ -206,7 +206,7 @@ $palettes: ();
     set. We can just create one light and one dark theme and then switch the
     CSS Custom Properties to dynamically switch the colors. */
 @function nice-light-theme() {
-    $base-light-theme: mat.define-light-theme((
+    $base-light-theme: mat.m2-define-light-theme((
             color: ($palettes)
     ));
 
@@ -233,7 +233,7 @@ $palettes: ();
 }
 
 @function nice-dark-theme() {
-    $base-dark-theme: mat.define-dark-theme((
+    $base-dark-theme: mat.m2-define-dark-theme((
             color: ($palettes)
     ));
 
@@ -266,21 +266,21 @@ $palettes: ();
     @include mat.all-component-themes((
             color: null,
             density: 0,
-            typography: mat.define-typography-config(
+            typography: mat.m2-define-typography-config(
                 $font-family: theme('fontFamily.sans'),
-                $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
-                $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
-                $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
-                $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
-                $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-                $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-                $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
-                $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
-                $body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-                $body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-                $caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
-                $button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
-                $overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
+                $headline-1: mat.m2-define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+                $headline-2: mat.m2-define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+                $headline-3: mat.m2-define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+                $headline-4: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+                $headline-5: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $headline-6: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $subtitle-1: mat.m2-define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+                $subtitle-2: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+                $body-1: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $body-2: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $caption: mat.m2-define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+                $button: mat.m2-define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+                $overline: mat.m2-define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
             )
     ));