@recursyve/nice-data-filter-kit 14.2.3 → 14.3.1

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

@@ -0,0 +1,25 @@
+@import "./filter-selection/filter-selection.theme";
+@import "./rule/rule.theme";
+
+@mixin nice-advanced-filters-theme($theme) {
+    @include advanced-filter-selection-theme();
+    @include advanced-rule-theme($theme);
+
+    nice-advanced-filters {
+        .advanced-filter-title {
+            @apply text-xl;
+        }
+
+        .advanced-filter-condition {
+            @apply text-lg;
+        }
+
+        .add-condition {
+            @apply min-h-12 rounded border-accent #{!important};
+        }
+
+        .close-button, .refresh-button {
+            @apply min-h-12;
+        }
+    }
+}

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

@@ -0,0 +1,29 @@
+@mixin advanced-filter-selection-theme() {
+    nice-advanced-filter-selection {
+        .filter-selection-container {
+            @apply min-h-36 min-w-36 max-h-[600px] max-w-[600px] p-8 overflow-auto;
+        }
+
+        .filter-group {
+            .group-icon {
+                @apply text-accent icon-size-8;
+            }
+
+            .group-name {
+                @apply text-lg font-bold;
+            }
+        }
+
+        .filter-item {
+            @apply cursor-pointer p-2 pl-4 border border-transparent;
+
+            &:hover {
+                @apply bg-accent/10;
+            }
+
+            .mat-ripple-element {
+                @apply bg-accent/20 #{!important};
+            }
+        }
+    }
+}

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

@@ -0,0 +1,96 @@
+@use '@angular/material' as mat;
+
+@mixin advanced-rule-theme($theme) {
+    $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;
+
+        .select-filter {
+            @apply w-full min-h-12 rounded;
+
+            .mat-button-wrapper {
+                @apply w-full px-2;
+            }
+        }
+
+        .config-name {
+            @apply flex flex-auto max-w-50 truncate;
+        }
+
+        .mat-form-field {
+            @apply w-full min-h-12;
+
+            .mat-form-field-wrapper {
+                @apply m-0 p-0 #{!important};
+            }
+
+            .mat-form-field-subscript-wrapper {
+                @apply hidden;
+            }
+
+            .mat-form-field-infix {
+                border-top: 0.5em solid transparent;
+            }
+
+            .mat-form-field-flex {
+                @apply rounded #{!important};
+            }
+        }
+
+        .condition-toggle {
+            @apply w-full min-h-12 rounded border border-accent #{!important};
+
+            mat-button-toggle {
+                @apply flex-auto border-accent #{!important};
+
+                &.mat-button-toggle-checked {
+                    @apply bg-accent/20;
+                }
+
+                &:not(.mat-button-toggle-checked) {
+                    @apply bg-transparent;
+                }
+
+                .mat-button-toggle-button {
+                    @apply h-full text-accent;
+                }
+            }
+        }
+
+        .add-button {
+            @apply w-12 max-w-12 h-12 max-h-12 rounded;
+
+            .mat-button-wrapper {
+                @apply w-full h-full border border-accent rounded #{!important};
+
+                .mat-icon {
+                    @apply text-accent #{!important};
+                }
+            }
+
+            .mat-ripple-element {
+                @apply bg-accent #{!important};
+            }
+        }
+
+        .remove-button {
+            @apply w-12 max-w-12 h-12 max-h-12 rounded;
+
+            .mat-button-wrapper {
+                @apply w-full h-full rounded #{!important};
+
+                .mat-icon {
+                    @apply text-accent #{!important};
+                }
+            }
+
+            .mat-ripple-element {
+                @apply bg-accent #{!important};
+            }
+        }
+    }
+}

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

@@ -1,9 +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";
 
 @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);
 
     // TODO: Figure out a better way ot use tailwind
     nice-filter-search {