@recursyve/nice-data-filter-kit 18.0.3 → 21.0.0

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@recursyve/nice-data-filter-kit",
-  "version": "18.0.3",
+  "version": "21.0.0",
   "exports": {
     ".": {
       "sass": "./_index.scss",
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/recursyve-nice-data-filter-kit.mjs",
-      "esm": "./esm2022/recursyve-nice-data-filter-kit.mjs",
+      "types": "./types/recursyve-nice-data-filter-kit.d.ts",
       "default": "./fesm2022/recursyve-nice-data-filter-kit.mjs"
     },
     "./package.json": {
@@ -14,20 +12,20 @@
     }
   },
   "peerDependencies": {
-    "@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",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
     "@datorama/akita": "^8.0.1",
-    "@ngx-translate/core": "^16.0.0",
-    "@recursyve/nice-ui-kit.v2": ">= 18.0.0-beta.144",
-    "@recursyve/ngx-form-generator": ">= 18.0.0-beta.50"
+    "@ngx-translate/core": "^17.0.0",
+    "@recursyve/nice-ui-kit.v2": ">= 21.0.0-beta.145",
+    "@recursyve/ngx-form-generator": ">= 21.0.0-beta.51"
   },
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "module": "fesm2022/recursyve-nice-data-filter-kit.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/recursyve-nice-data-filter-kit.d.ts",
   "sideEffects": false
 }

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

@@ -1,9 +1,10 @@
-@use '@angular/material' as mat;
+@use "sass:map";
+@use "@angular/material" as mat;
 @use "@recursyve/nice-ui-kit.v2" as nice;
 
 @mixin nice-base-list-theme($theme) {
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
 
     nice-export-bottom-sheet {
         .mat-list-icon:before {
@@ -26,7 +27,7 @@
                 width: 100%;
             }
 
-            background: map-get($background, card);
+            background: map.get($background, card);
 
             .search {
                 width: 100%;
@@ -35,7 +36,7 @@
                 padding: 0 18px;
 
                 .mat-icon {
-                    color: map-get($foreground, icon);
+                    color: map.get($foreground, icon);
                 }
 
                 input {
@@ -46,15 +47,15 @@
                     padding: 0 16px;
                     border: none;
                     outline: none;
-                    background: map-get($background, card);
-                    color: map-get($foreground, text);
+                    background: map.get($background, card);
+                    color: map.get($foreground, text);
                 }
             }
         }
 
         .list-button {
-            background: map-get($background, card);
-            color: map-get($foreground, text);
+            background: map.get($background, card);
+            color: map.get($foreground, text);
         }
 
         .custom-button-list {

package/src/lib/components/nice-filter-view/components/advanced-filters/advanced-filters.theme.scss

@@ -1,9 +1,9 @@
-@import "./filter-selection/filter-selection.theme";
-@import "./rule/rule.theme";
+@use "./filter-selection/filter-selection.theme" as filter-selection;
+@use "./rule/rule.theme" as rule;
 
 @mixin nice-advanced-filters-theme($theme) {
-    @include advanced-filter-selection-theme();
-    @include advanced-rule-theme($theme);
+    @include filter-selection.advanced-filter-selection-theme();
+    @include rule.advanced-rule-theme($theme);
 
     nice-advanced-filters {
         .advanced-filter-title {

package/src/lib/components/nice-filter-view/components/advanced-filters/rule/rule.theme.scss

@@ -1,12 +1,13 @@
-@use '@angular/material' as mat;
+@use "sass:map";
+@use "@angular/material" as mat;
 
 @mixin advanced-rule-theme($theme) {
     --nice-advanced-filter-rule-border-color: #8E9297;
 
-    $isDark: map-get($theme, is-dark);
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    $isDark: map.get($theme, is-dark);
+    $primary: map.get($theme, primary);
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
 
     nice-advanced-rule {
         background: transparent;

package/src/lib/components/query-builder/query-builder.theme.scss

@@ -1,15 +1,16 @@
-@import "./filter-selection/filter-selection.theme";
-@import "./rule/rule.theme";
+@use "sass:map";
+@use "./filter-selection/filter-selection.theme" as filter-selection;
+@use "./rule/rule.theme" as rule;
 
 @mixin nice-query-builder-theme($theme) {
-    @include filter-selection-theme();
-    @include rule-theme($theme);
+    @include filter-selection.filter-selection-theme();
+    @include rule.rule-theme($theme);
 
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
 
     .add-button {
-        background: map-get($background, card) !important;
-        color: map-get($foreground, text) !important;
+        background: map.get($background, card) !important;
+        color: map.get($foreground, text) !important;
     }
 }

package/src/lib/components/query-builder/rule/rule.theme.scss

@@ -1,10 +1,11 @@
-@use '@angular/material' as mat;
+@use "sass:map";
+@use "@angular/material" as mat;
 
 @mixin rule-theme($theme) {
-    $isDark: map-get($theme, is-dark);
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
+    $isDark: map.get($theme, is-dark);
+    $primary: map.get($theme, primary);
+    $background: map.get($theme, background);
+    $foreground: map.get($theme, foreground);
 
     nice-rule {
         background: transparent;
@@ -89,8 +90,8 @@
     }
 
     .or-button {
-        background: map-get($background, card) !important;
-        color: map-get($foreground, text) !important;
+        background: map.get($background, card) !important;
+        color: map.get($foreground, text) !important;
     }
 
     .select-filter {

package/src/lib/nice-data-filter.theme.scss

@@ -1,11 +1,11 @@
-@import "./components/base-list/base-list.theme";
-@import "./components/nice-filter-view/components/advanced-filters/advanced-filters.theme";
-@import "./components/query-builder/query-builder.theme";
+@use "./components/base-list/base-list.theme" as base-list;
+@use "./components/nice-filter-view/components/advanced-filters/advanced-filters.theme" as advanced-filters;
+@use "./components/query-builder/query-builder.theme" as query-builder;
 
 @mixin nice-data-filter-kit-theme($theme) {
-    @include nice-base-list-theme($theme);
-    @include nice-query-builder-theme($theme);
-    @include nice-advanced-filters-theme($theme);
+    @include base-list.nice-base-list-theme($theme);
+    @include query-builder.nice-query-builder-theme($theme);
+    @include advanced-filters.nice-advanced-filters-theme($theme);
 
     // TODO: Figure out a better way ot use tailwind
     nice-filter-search {