@elementar-rt/components 0.6.58 → 0.7.0

package/fesm2022/elementar-rt-components-empty-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components-empty-state.mjs","sources":["../../../projects/components/empty-state/src/empty-state/empty-state.component.ts","../../../projects/components/empty-state/src/empty-state/empty-state.component.html","../../../projects/components/empty-state/elementar-rt-components-empty-state.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\nexport type EmptyStatePreset = 'no-results' | 'no-data' | 'error' | 'offline' | 'custom';\n\nconst PRESET_CONFIG: Record<EmptyStatePreset, { icon: string; title: string; description: string }> = {\n  'no-results': { icon: '🔍', title: 'No results found', description: 'Try adjusting your search or filters.' },\n  'no-data':    { icon: '📭', title: 'Nothing here yet', description: 'Data will appear here once it is available.' },\n  'error':      { icon: '⚠️', title: 'Something went wrong', description: 'An error occurred. Please try again.' },\n  'offline':    { icon: '📡', title: 'You are offline', description: 'Check your connection and try again.' },\n  'custom':     { icon: '', title: '', description: '' },\n};\n\n@Component({\n  selector: 'emr-empty-state',\n  exportAs: 'emrEmptyState',\n  templateUrl: './empty-state.component.html',\n  styleUrl: './empty-state.component.scss',\n  host: {\n    'class': 'emr-empty-state',\n    '[attr.data-preset]': 'preset()',\n  }\n})\nexport class EmptyStateComponent {\n  preset = input<EmptyStatePreset>('no-data');\n  title = input('');\n  description = input('');\n  icon = input('');\n\n  protected get _icon(): string { return this.icon() || PRESET_CONFIG[this.preset()].icon; }\n  protected get _title(): string { return this.title() || PRESET_CONFIG[this.preset()].title; }\n  protected get _description(): string { return this.description() || PRESET_CONFIG[this.preset()].description; }\n}\n","<div class=\"es-icon\">\n  <ng-content select=\"[emrEmptyStateIcon]\">\n    <span class=\"es-emoji\">{{ _icon }}</span>\n  </ng-content>\n</div>\n<div class=\"es-body\">\n  <p class=\"es-title\">\n    <ng-content select=\"[emrEmptyStateTitle]\">{{ _title }}</ng-content>\n  </p>\n  <p class=\"es-description\">\n    <ng-content select=\"[emrEmptyStateDescription]\">{{ _description }}</ng-content>\n  </p>\n</div>\n<div class=\"es-actions\">\n  <ng-content select=\"[emrEmptyStateActions]\"/>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAIA,MAAM,aAAa,GAAmF;AACpG,IAAA,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,uCAAuC,EAAE;AAC7G,IAAA,SAAS,EAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,6CAA6C,EAAE;AACnH,IAAA,OAAO,EAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,sCAAsC,EAAE;AAChH,IAAA,SAAS,EAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,sCAAsC,EAAE;AAC3G,IAAA,QAAQ,EAAM,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CACvD;MAYY,mBAAmB,CAAA;AAC9B,IAAA,MAAM,GAAG,KAAK,CAAmB,SAAS,kDAAC;AAC3C,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC;AACjB,IAAA,WAAW,GAAG,KAAK,CAAC,EAAE,uDAAC;AACvB,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,gDAAC;AAEhB,IAAA,IAAc,KAAK,GAAA,EAAa,OAAO,IAAI,CAAC,IAAI,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;AACzF,IAAA,IAAc,MAAM,GAAA,EAAa,OAAO,IAAI,CAAC,KAAK,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;AAC5F,IAAA,IAAc,YAAY,GAAA,EAAa,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;wGARnG,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,msBCtBhC,wfAgBA,EAAA,MAAA,EAAA,CAAA,moCAAA,CAAA,EAAA,CAAA;;4FDMa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;+BACE,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,IAAA,EAGnB;AACJ,wBAAA,OAAO,EAAE,iBAAiB;AAC1B,wBAAA,oBAAoB,EAAE,UAAU;AACjC,qBAAA,EAAA,QAAA,EAAA,wfAAA,EAAA,MAAA,EAAA,CAAA,moCAAA,CAAA,EAAA;;;AEpBH;;AAEG;;;;"}
+{"version":3,"file":"elementar-rt-components-empty-state.mjs","sources":["../../../projects/components/empty-state/src/empty-state/empty-state.component.ts","../../../projects/components/empty-state/src/empty-state/empty-state.component.html","../../../projects/components/empty-state/elementar-rt-components-empty-state.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\nexport type EmptyStatePreset = 'no-results' | 'no-data' | 'error' | 'offline' | 'custom';\n\nconst PRESET_CONFIG: Record<EmptyStatePreset, { icon: string; title: string; description: string }> = {\n  'no-results': { icon: '🔍', title: 'No results found', description: 'Try adjusting your search or filters.' },\n  'no-data':    { icon: '📭', title: 'Nothing here yet', description: 'Data will appear here once it is available.' },\n  'error':      { icon: '⚠️', title: 'Something went wrong', description: 'An error occurred. Please try again.' },\n  'offline':    { icon: '📡', title: 'You are offline', description: 'Check your connection and try again.' },\n  'custom':     { icon: '', title: '', description: '' },\n};\n\n@Component({\n  selector: 'emr-empty-state',\n  exportAs: 'emrEmptyState',\n  templateUrl: './empty-state.component.html',\n  styleUrl: './empty-state.component.scss',\n  host: {\n    'class': 'emr-empty-state',\n    '[attr.data-preset]': 'preset()',\n  }\n})\nexport class EmptyStateComponent {\n  preset = input<EmptyStatePreset>('no-data');\n  title = input('');\n  description = input('');\n  icon = input('');\n\n  protected get _icon(): string { return this.icon() || PRESET_CONFIG[this.preset()].icon; }\n  protected get _title(): string { return this.title() || PRESET_CONFIG[this.preset()].title; }\n  protected get _description(): string { return this.description() || PRESET_CONFIG[this.preset()].description; }\n}\n","<div class=\"es-icon\">\n  <ng-content select=\"[emrEmptyStateIcon]\">\n    <span class=\"es-emoji\">{{ _icon }}</span>\n  </ng-content>\n</div>\n<div class=\"es-body\">\n  <p class=\"es-title\">\n    <ng-content select=\"[emrEmptyStateTitle]\">{{ _title }}</ng-content>\n  </p>\n  <p class=\"es-description\">\n    <ng-content select=\"[emrEmptyStateDescription]\">{{ _description }}</ng-content>\n  </p>\n</div>\n<div class=\"es-actions\">\n  <ng-content select=\"[emrEmptyStateActions]\"/>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAIA,MAAM,aAAa,GAAmF;AACpG,IAAA,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,uCAAuC,EAAE;AAC7G,IAAA,SAAS,EAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,6CAA6C,EAAE;AACnH,IAAA,OAAO,EAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,sCAAsC,EAAE;AAChH,IAAA,SAAS,EAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,sCAAsC,EAAE;AAC3G,IAAA,QAAQ,EAAM,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CACvD;MAYY,mBAAmB,CAAA;AAC9B,IAAA,MAAM,GAAG,KAAK,CAAmB,SAAS,6EAAC;AAC3C,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,4EAAC;AACjB,IAAA,WAAW,GAAG,KAAK,CAAC,EAAE,kFAAC;AACvB,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,2EAAC;AAEhB,IAAA,IAAc,KAAK,GAAA,EAAa,OAAO,IAAI,CAAC,IAAI,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;AACzF,IAAA,IAAc,MAAM,GAAA,EAAa,OAAO,IAAI,CAAC,KAAK,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;AAC5F,IAAA,IAAc,YAAY,GAAA,EAAa,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;wGARnG,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,msBCtBhC,wfAgBA,EAAA,MAAA,EAAA,CAAA,moCAAA,CAAA,EAAA,CAAA;;4FDMa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;+BACE,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,IAAA,EAGnB;AACJ,wBAAA,OAAO,EAAE,iBAAiB;AAC1B,wBAAA,oBAAoB,EAAE,UAAU;AACjC,qBAAA,EAAA,QAAA,EAAA,wfAAA,EAAA,MAAA,EAAA,CAAA,moCAAA,CAAA,EAAA;;;AEpBH;;AAEG;;"}

package/fesm2022/elementar-rt-components-expand.mjs

@@ -3,16 +3,12 @@ import { inject, ElementRef, input, booleanAttribute, output, effect, Component
 
 class ExpandComponent {
     _elementRef = inject(ElementRef);
-    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
-    expandLabel = input('Show more', ...(ngDevMode ? [{ debugName: "expandLabel" }] : []));
-    collapseLabel = input('Show less', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : []));
-    showButtonIfExpanded = input(false, ...(ngDevMode ? [{ debugName: "showButtonIfExpanded", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    expandLabel = input('Show more', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
+    collapseLabel = input('Show less', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
+    showButtonIfExpanded = input(false, { ...(ngDevMode ? { debugName: "showButtonIfExpanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
     expandedChange = output();
     _expanded = false;
     constructor() {
@@ -41,15 +37,15 @@ class ExpandComponent {
         this._expanded = false;
         this.expandedChange.emit(this._expanded);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ExpandComponent, isStandalone: true, selector: "emr-expand", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonIfExpanded: { classPropertyName: "showButtonIfExpanded", publicName: "showButtonIfExpanded", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.is-expanded": "_expanded" }, classAttribute: "emr-expand" }, exportAs: ["emrExpand"], ngImport: i0, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n", styles: [":host{--emr-expand-fade-color: var(--color-background);--emr-expand-button-bg: var(--color-surface-container);--emr-expand-button-hover-bg: var(--color-surface-container-high);--emr-expand-button-color: var(--color-on-surface);--emr-expand-button-font-size: var(--text-tiny);--emr-expand-button-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-expand-button-border-radius: calc(infinity * 1px);--emr-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--emr-expand-button-hover-opacity: 90%;--emr-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--emr-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--emr-expand-button-padding);border-radius:var(--emr-expand-button-border-radius);background:var(--emr-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--emr-expand-button-color);font-size:var(--emr-expand-button-font-size);box-shadow:var(--emr-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--emr-expand-button-hover-opacity);background:var(--emr-expand-button-hover-bg)}:host .button:active{scale:.98}:host:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--emr-expand-fade-color));z-index:1}:host.is-expanded{max-height:max-content;overflow:auto}:host.is-expanded:after{display:none}:host.is-expanded .button{visibility:hidden}:host.is-expanded:hover .button{visibility:visible}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ExpandComponent, isStandalone: true, selector: "emr-expand", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonIfExpanded: { classPropertyName: "showButtonIfExpanded", publicName: "showButtonIfExpanded", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.is-expanded": "_expanded" }, classAttribute: "emr-expand" }, exportAs: ["emrExpand"], ngImport: i0, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n", styles: [":host{--emr-expand-fade-color: var(--color-background);--emr-expand-button-bg: var(--color-surface-container);--emr-expand-button-hover-bg: var(--color-surface-container-high);--emr-expand-button-color: var(--color-on-surface);--emr-expand-button-font-size: var(--text-tiny);--emr-expand-button-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-expand-button-border-radius: calc(infinity * 1px);--emr-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--emr-expand-button-hover-opacity: 90%;--emr-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--emr-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--emr-expand-button-padding);border-radius:var(--emr-expand-button-border-radius);background:var(--emr-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--emr-expand-button-color);font-size:var(--emr-expand-button-font-size);box-shadow:var(--emr-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--emr-expand-button-hover-opacity);background:var(--emr-expand-button-hover-bg)}:host .button:active{scale:.98}:host:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--emr-expand-fade-color));z-index:1}:host.is-expanded{max-height:max-content;overflow:auto}:host.is-expanded:after{display:none}:host.is-expanded .button{visibility:hidden}:host.is-expanded:hover .button{visibility:visible}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ExpandComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExpandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-expand', exportAs: 'emrExpand', host: {
                         'class': 'emr-expand',
                         '[class.is-expanded]': '_expanded'
-                    }, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n", styles: [":host{--emr-expand-fade-color: var(--color-background);--emr-expand-button-bg: var(--color-surface-container);--emr-expand-button-hover-bg: var(--color-surface-container-high);--emr-expand-button-color: var(--color-on-surface);--emr-expand-button-font-size: var(--text-tiny);--emr-expand-button-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-expand-button-border-radius: calc(infinity * 1px);--emr-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--emr-expand-button-hover-opacity: 90%;--emr-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--emr-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--emr-expand-button-padding);border-radius:var(--emr-expand-button-border-radius);background:var(--emr-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--emr-expand-button-color);font-size:var(--emr-expand-button-font-size);box-shadow:var(--emr-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--emr-expand-button-hover-opacity);background:var(--emr-expand-button-hover-bg)}:host .button:active{scale:.98}:host:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--emr-expand-fade-color));z-index:1}:host.is-expanded{max-height:max-content;overflow:auto}:host.is-expanded:after{display:none}:host.is-expanded .button{visibility:hidden}:host.is-expanded:hover .button{visibility:visible}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n", styles: [":host{--emr-expand-fade-color: var(--color-background);--emr-expand-button-bg: var(--color-surface-container);--emr-expand-button-hover-bg: var(--color-surface-container-high);--emr-expand-button-color: var(--color-on-surface);--emr-expand-button-font-size: var(--text-tiny);--emr-expand-button-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-expand-button-border-radius: calc(infinity * 1px);--emr-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--emr-expand-button-hover-opacity: 90%;--emr-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--emr-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--emr-expand-button-padding);border-radius:var(--emr-expand-button-border-radius);background:var(--emr-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--emr-expand-button-color);font-size:var(--emr-expand-button-font-size);box-shadow:var(--emr-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--emr-expand-button-hover-opacity);background:var(--emr-expand-button-hover-bg)}:host .button:active{scale:.98}:host:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--emr-expand-fade-color));z-index:1}:host.is-expanded{max-height:max-content;overflow:auto}:host.is-expanded:after{display:none}:host.is-expanded .button{visibility:hidden}:host.is-expanded:hover .button{visibility:visible}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], showButtonIfExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonIfExpanded", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 /**

package/fesm2022/elementar-rt-components-expand.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components-expand.mjs","sources":["../../../projects/components/expand/src/expand/expand.component.ts","../../../projects/components/expand/src/expand/expand.component.html","../../../projects/components/expand/elementar-rt-components-expand.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, output } from '@angular/core';\n\n@Component({\n  selector: 'emr-expand',\n  exportAs: 'emrExpand',\n  templateUrl: './expand.component.html',\n  styleUrl: './expand.component.scss',\n  host: {\n    'class': 'emr-expand',\n    '[class.is-expanded]': '_expanded'\n  }\n})\nexport class ExpandComponent {\n  private _elementRef = inject(ElementRef);\n\n  expanded = input(false, {\n    transform: booleanAttribute\n  });\n  color = input('');\n  expandLabel = input('Show more');\n  collapseLabel = input('Show less');\n  showButtonIfExpanded = input(false, {\n    transform: booleanAttribute\n  });\n  height = input<string>('');\n\n  readonly expandedChange = output<boolean>();\n\n  protected _expanded = false;\n\n  constructor() {\n    effect(() => {\n      this._expanded = this.expanded();\n      (this._elementRef.nativeElement as HTMLElement).style.setProperty('--emr-expand-fade-color', this.color(), 'important');\n      (this._elementRef.nativeElement as HTMLElement).style.setProperty('--emr-expand-expanded-height', this.height(), 'important');\n    });\n  }\n\n  get api() {\n    return {\n      expand: () => this._expand(),\n      collapse: () => this._collapse(),\n      toggle: () => this._toggle()\n    };\n  }\n\n  private _toggle() {\n    this._expanded = !this._expanded;\n    this.expandedChange.emit(this._expanded);\n  }\n\n  private _expand() {\n    this._expanded = true;\n    this.expandedChange.emit(this._expanded);\n  }\n\n  private _collapse() {\n    this._expanded = false;\n    this.expandedChange.emit(this._expanded);\n  }\n}\n","<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAYa,eAAe,CAAA;AAClB,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;IAExC,QAAQ,GAAG,KAAK,CAAC,KAAK,4CACpB,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CADL;AACtB,YAAA,SAAS,EAAE;AACZ,SAAA,CAAA,CAAA,CAAC;AACF,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC;AACjB,IAAA,WAAW,GAAG,KAAK,CAAC,WAAW,uDAAC;AAChC,IAAA,aAAa,GAAG,KAAK,CAAC,WAAW,yDAAC;IAClC,oBAAoB,GAAG,KAAK,CAAC,KAAK,wDAChC,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CADO;AAClC,YAAA,SAAS,EAAE;AACZ,SAAA,CAAA,CAAA,CAAC;AACF,IAAA,MAAM,GAAG,KAAK,CAAS,EAAE,kDAAC;IAEjB,cAAc,GAAG,MAAM,EAAW;IAEjC,SAAS,GAAG,KAAK;AAE3B,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,IAAI,CAAC,WAAW,CAAC,aAA6B,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,CAAC;AACtH,YAAA,IAAI,CAAC,WAAW,CAAC,aAA6B,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,WAAW,CAAC;AAC/H,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,IAAI,GAAG,GAAA;QACL,OAAO;AACL,YAAA,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC5B,YAAA,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE;AAChC,YAAA,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO;SAC3B;IACH;IAEQ,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C;IAEQ,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C;IAEQ,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C;wGA/CW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,uiCCZ5B,oZAiBA,EAAA,MAAA,EAAA,CAAA,mrDAAA,CAAA,EAAA,CAAA;;4FDLa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAV3B,SAAS;+BACE,YAAY,EAAA,QAAA,EACZ,WAAW,EAAA,IAAA,EAGf;AACJ,wBAAA,OAAO,EAAE,YAAY;AACrB,wBAAA,qBAAqB,EAAE;AACxB,qBAAA,EAAA,QAAA,EAAA,oZAAA,EAAA,MAAA,EAAA,CAAA,mrDAAA,CAAA,EAAA;;;AEVH;;AAEG;;;;"}
+{"version":3,"file":"elementar-rt-components-expand.mjs","sources":["../../../projects/components/expand/src/expand/expand.component.ts","../../../projects/components/expand/src/expand/expand.component.html","../../../projects/components/expand/elementar-rt-components-expand.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, output } from '@angular/core';\n\n@Component({\n  selector: 'emr-expand',\n  exportAs: 'emrExpand',\n  templateUrl: './expand.component.html',\n  styleUrl: './expand.component.scss',\n  host: {\n    'class': 'emr-expand',\n    '[class.is-expanded]': '_expanded'\n  }\n})\nexport class ExpandComponent {\n  private _elementRef = inject(ElementRef);\n\n  expanded = input(false, {\n    transform: booleanAttribute\n  });\n  color = input('');\n  expandLabel = input('Show more');\n  collapseLabel = input('Show less');\n  showButtonIfExpanded = input(false, {\n    transform: booleanAttribute\n  });\n  height = input<string>('');\n\n  readonly expandedChange = output<boolean>();\n\n  protected _expanded = false;\n\n  constructor() {\n    effect(() => {\n      this._expanded = this.expanded();\n      (this._elementRef.nativeElement as HTMLElement).style.setProperty('--emr-expand-fade-color', this.color(), 'important');\n      (this._elementRef.nativeElement as HTMLElement).style.setProperty('--emr-expand-expanded-height', this.height(), 'important');\n    });\n  }\n\n  get api() {\n    return {\n      expand: () => this._expand(),\n      collapse: () => this._collapse(),\n      toggle: () => this._toggle()\n    };\n  }\n\n  private _toggle() {\n    this._expanded = !this._expanded;\n    this.expandedChange.emit(this._expanded);\n  }\n\n  private _expand() {\n    this._expanded = true;\n    this.expandedChange.emit(this._expanded);\n  }\n\n  private _collapse() {\n    this._expanded = false;\n    this.expandedChange.emit(this._expanded);\n  }\n}\n","<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAYa,eAAe,CAAA;AAClB,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;IAExC,QAAQ,GAAG,KAAK,CAAC,KAAK,gFACpB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACF,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,4EAAC;AACjB,IAAA,WAAW,GAAG,KAAK,CAAC,WAAW,kFAAC;AAChC,IAAA,aAAa,GAAG,KAAK,CAAC,WAAW,oFAAC;IAClC,oBAAoB,GAAG,KAAK,CAAC,KAAK,4FAChC,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACF,IAAA,MAAM,GAAG,KAAK,CAAS,EAAE,6EAAC;IAEjB,cAAc,GAAG,MAAM,EAAW;IAEjC,SAAS,GAAG,KAAK;AAE3B,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,IAAI,CAAC,WAAW,CAAC,aAA6B,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,CAAC;AACtH,YAAA,IAAI,CAAC,WAAW,CAAC,aAA6B,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,WAAW,CAAC;AAC/H,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,IAAI,GAAG,GAAA;QACL,OAAO;AACL,YAAA,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC5B,YAAA,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE;AAChC,YAAA,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO;SAC3B;IACH;IAEQ,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C;IAEQ,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C;IAEQ,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C;wGA/CW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,uiCCZ5B,oZAiBA,EAAA,MAAA,EAAA,CAAA,mrDAAA,CAAA,EAAA,CAAA;;4FDLa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAV3B,SAAS;+BACE,YAAY,EAAA,QAAA,EACZ,WAAW,EAAA,IAAA,EAGf;AACJ,wBAAA,OAAO,EAAE,YAAY;AACrB,wBAAA,qBAAqB,EAAE;AACxB,qBAAA,EAAA,QAAA,EAAA,oZAAA,EAAA,MAAA,EAAA,CAAA,mrDAAA,CAAA,EAAA;;;AEVH;;AAEG;;"}

package/fesm2022/elementar-rt-components-expansion-panel.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { model, input, booleanAttribute, output, Component } from '@angular/core';
 
 class ExpansionPanelComponent {
-    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     expandedChange = output();
     _toggle() {
         if (this.disabled())
@@ -12,16 +12,16 @@ class ExpansionPanelComponent {
         this.expanded.set(next);
         this.expandedChange.emit(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: ExpansionPanelComponent, isStandalone: true, selector: "emr-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", expandedChange: "expandedChange" }, host: { properties: { "class.is-expanded": "expanded()", "class.is-disabled": "disabled()" }, classAttribute: "emr-expansion-panel" }, exportAs: ["emrExpansionPanel"], ngImport: i0, template: "<div class=\"ep-header\" (click)=\"_toggle()\" [attr.aria-expanded]=\"expanded()\">\n  <span class=\"ep-title\">\n    <ng-content select=\"emr-expansion-panel-title,[emrExpansionPanelTitle]\"/>\n  </span>\n  <span class=\"ep-description\">\n    <ng-content select=\"emr-expansion-panel-description,[emrExpansionPanelDescription]\"/>\n  </span>\n  <svg class=\"ep-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\n  </svg>\n</div>\n<div class=\"ep-body\">\n  <div class=\"ep-content\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{--emr-ep-border: 1px solid var(--color-outline-variant);--emr-ep-border-radius: 1rem;--emr-ep-header-height: calc(var(--spacing, .25rem) * 14);--emr-ep-header-padding: 0 calc(var(--spacing, .25rem) * 5);--emr-ep-content-padding: var(--spacing, .25rem) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5);--emr-ep-bg: var(--color-surface-container-low);display:block;border:var(--emr-ep-border);border-radius:var(--emr-ep-border-radius);background:var(--emr-ep-bg);overflow:hidden;transition:box-shadow .15s}:host.is-expanded{box-shadow:0 2px 8px var(--color-shadow)}@supports (color: color-mix(in lab,red,red)){:host.is-expanded{box-shadow:0 2px 8px color-mix(in srgb,var(--color-shadow) 8%,transparent)}}:host.is-expanded .ep-icon{transform:rotate(180deg)}:host.is-expanded .ep-body{grid-template-rows:1fr}:host.is-disabled .ep-header{opacity:.38;cursor:not-allowed}.ep-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);min-height:var(--emr-ep-header-height);padding:var(--emr-ep-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none}.ep-header:hover{background:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){.ep-header:hover{background:color-mix(in srgb,var(--color-on-surface) 4%,transparent)}}.ep-title{flex:1;font-weight:500;font-size:.875rem}.ep-description{font-size:.75rem;color:var(--color-on-surface-variant)}.ep-icon{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);color:var(--color-on-surface-variant)}.ep-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1)}.ep-content{overflow:hidden;padding:0 calc(var(--spacing, .25rem) * 5)}:host(.is-expanded) .ep-content{padding:var(--emr-ep-content-padding)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: ExpansionPanelComponent, isStandalone: true, selector: "emr-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", expandedChange: "expandedChange" }, host: { properties: { "class.is-expanded": "expanded()", "class.is-disabled": "disabled()" }, classAttribute: "emr-expansion-panel" }, exportAs: ["emrExpansionPanel"], ngImport: i0, template: "<div class=\"ep-header\" (click)=\"_toggle()\" [attr.aria-expanded]=\"expanded()\">\n  <span class=\"ep-title\">\n    <ng-content select=\"emr-expansion-panel-title,[emrExpansionPanelTitle]\"/>\n  </span>\n  <span class=\"ep-description\">\n    <ng-content select=\"emr-expansion-panel-description,[emrExpansionPanelDescription]\"/>\n  </span>\n  <svg class=\"ep-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\n  </svg>\n</div>\n<div class=\"ep-body\">\n  <div class=\"ep-content\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{--emr-ep-border: 1px solid var(--color-outline-variant);--emr-ep-border-radius: 1rem;--emr-ep-header-height: calc(var(--spacing, .25rem) * 14);--emr-ep-header-padding: 0 calc(var(--spacing, .25rem) * 5);--emr-ep-content-padding: var(--spacing, .25rem) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5);--emr-ep-bg: var(--color-surface-container-low);display:block;border:var(--emr-ep-border);border-radius:var(--emr-ep-border-radius);background:var(--emr-ep-bg);overflow:hidden;transition:box-shadow .15s}:host.is-expanded{box-shadow:0 2px 8px var(--color-shadow)}@supports (color: color-mix(in lab,red,red)){:host.is-expanded{box-shadow:0 2px 8px color-mix(in srgb,var(--color-shadow) 8%,transparent)}}:host.is-expanded .ep-icon{transform:rotate(180deg)}:host.is-expanded .ep-body{grid-template-rows:1fr}:host.is-disabled .ep-header{opacity:.38;cursor:not-allowed}.ep-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);min-height:var(--emr-ep-header-height);padding:var(--emr-ep-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none}.ep-header:hover{background:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){.ep-header:hover{background:color-mix(in srgb,var(--color-on-surface) 4%,transparent)}}.ep-title{flex:1;font-weight:500;font-size:.875rem}.ep-description{font-size:.75rem;color:var(--color-on-surface-variant)}.ep-icon{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);color:var(--color-on-surface-variant)}.ep-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1)}.ep-content{overflow:hidden;padding:0 calc(var(--spacing, .25rem) * 5)}:host(.is-expanded) .ep-content{padding:var(--emr-ep-content-padding)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-expansion-panel', exportAs: 'emrExpansionPanel', host: {
                         'class': 'emr-expansion-panel',
                         '[class.is-expanded]': 'expanded()',
                         '[class.is-disabled]': 'disabled()',
-                    }, template: "<div class=\"ep-header\" (click)=\"_toggle()\" [attr.aria-expanded]=\"expanded()\">\n  <span class=\"ep-title\">\n    <ng-content select=\"emr-expansion-panel-title,[emrExpansionPanelTitle]\"/>\n  </span>\n  <span class=\"ep-description\">\n    <ng-content select=\"emr-expansion-panel-description,[emrExpansionPanelDescription]\"/>\n  </span>\n  <svg class=\"ep-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\n  </svg>\n</div>\n<div class=\"ep-body\">\n  <div class=\"ep-content\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{--emr-ep-border: 1px solid var(--color-outline-variant);--emr-ep-border-radius: 1rem;--emr-ep-header-height: calc(var(--spacing, .25rem) * 14);--emr-ep-header-padding: 0 calc(var(--spacing, .25rem) * 5);--emr-ep-content-padding: var(--spacing, .25rem) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5);--emr-ep-bg: var(--color-surface-container-low);display:block;border:var(--emr-ep-border);border-radius:var(--emr-ep-border-radius);background:var(--emr-ep-bg);overflow:hidden;transition:box-shadow .15s}:host.is-expanded{box-shadow:0 2px 8px var(--color-shadow)}@supports (color: color-mix(in lab,red,red)){:host.is-expanded{box-shadow:0 2px 8px color-mix(in srgb,var(--color-shadow) 8%,transparent)}}:host.is-expanded .ep-icon{transform:rotate(180deg)}:host.is-expanded .ep-body{grid-template-rows:1fr}:host.is-disabled .ep-header{opacity:.38;cursor:not-allowed}.ep-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);min-height:var(--emr-ep-header-height);padding:var(--emr-ep-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none}.ep-header:hover{background:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){.ep-header:hover{background:color-mix(in srgb,var(--color-on-surface) 4%,transparent)}}.ep-title{flex:1;font-weight:500;font-size:.875rem}.ep-description{font-size:.75rem;color:var(--color-on-surface-variant)}.ep-icon{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);color:var(--color-on-surface-variant)}.ep-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1)}.ep-content{overflow:hidden;padding:0 calc(var(--spacing, .25rem) * 5)}:host(.is-expanded) .ep-content{padding:var(--emr-ep-content-padding)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ep-header\" (click)=\"_toggle()\" [attr.aria-expanded]=\"expanded()\">\n  <span class=\"ep-title\">\n    <ng-content select=\"emr-expansion-panel-title,[emrExpansionPanelTitle]\"/>\n  </span>\n  <span class=\"ep-description\">\n    <ng-content select=\"emr-expansion-panel-description,[emrExpansionPanelDescription]\"/>\n  </span>\n  <svg class=\"ep-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\n  </svg>\n</div>\n<div class=\"ep-body\">\n  <div class=\"ep-content\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{--emr-ep-border: 1px solid var(--color-outline-variant);--emr-ep-border-radius: 1rem;--emr-ep-header-height: calc(var(--spacing, .25rem) * 14);--emr-ep-header-padding: 0 calc(var(--spacing, .25rem) * 5);--emr-ep-content-padding: var(--spacing, .25rem) calc(var(--spacing, .25rem) * 5) calc(var(--spacing, .25rem) * 5);--emr-ep-bg: var(--color-surface-container-low);display:block;border:var(--emr-ep-border);border-radius:var(--emr-ep-border-radius);background:var(--emr-ep-bg);overflow:hidden;transition:box-shadow .15s}:host.is-expanded{box-shadow:0 2px 8px var(--color-shadow)}@supports (color: color-mix(in lab,red,red)){:host.is-expanded{box-shadow:0 2px 8px color-mix(in srgb,var(--color-shadow) 8%,transparent)}}:host.is-expanded .ep-icon{transform:rotate(180deg)}:host.is-expanded .ep-body{grid-template-rows:1fr}:host.is-disabled .ep-header{opacity:.38;cursor:not-allowed}.ep-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);min-height:var(--emr-ep-header-height);padding:var(--emr-ep-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none}.ep-header:hover{background:var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){.ep-header:hover{background:color-mix(in srgb,var(--color-on-surface) 4%,transparent)}}.ep-title{flex:1;font-weight:500;font-size:.875rem}.ep-description{font-size:.75rem;color:var(--color-on-surface-variant)}.ep-icon{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);color:var(--color-on-surface-variant)}.ep-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1)}.ep-content{overflow:hidden;padding:0 calc(var(--spacing, .25rem) * 5)}:host(.is-expanded) .ep-content{padding:var(--emr-ep-content-padding)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 /**

package/fesm2022/elementar-rt-components-expansion-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components-expansion-panel.mjs","sources":["../../../projects/components/expansion-panel/src/expansion-panel/expansion-panel.component.ts","../../../projects/components/expansion-panel/src/expansion-panel/expansion-panel.component.html","../../../projects/components/expansion-panel/elementar-rt-components-expansion-panel.ts"],"sourcesContent":["import { booleanAttribute, Component, input, model, output } from '@angular/core';\n\n@Component({\n  selector: 'emr-expansion-panel',\n  exportAs: 'emrExpansionPanel',\n  templateUrl: './expansion-panel.component.html',\n  styleUrl: './expansion-panel.component.scss',\n  host: {\n    'class': 'emr-expansion-panel',\n    '[class.is-expanded]': 'expanded()',\n    '[class.is-disabled]': 'disabled()',\n  }\n})\nexport class ExpansionPanelComponent {\n  expanded = model(false);\n  disabled = input(false, { transform: booleanAttribute });\n\n  readonly expandedChange = output<boolean>();\n\n  protected _toggle() {\n    if (this.disabled()) return;\n    const next = !this.expanded();\n    this.expanded.set(next);\n    this.expandedChange.emit(next);\n  }\n}\n","<div class=\"ep-header\" (click)=\"_toggle()\" [attr.aria-expanded]=\"expanded()\">\n  <span class=\"ep-title\">\n    <ng-content select=\"emr-expansion-panel-title,[emrExpansionPanelTitle]\"/>\n  </span>\n  <span class=\"ep-description\">\n    <ng-content select=\"emr-expansion-panel-description,[emrExpansionPanelDescription]\"/>\n  </span>\n  <svg class=\"ep-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\n  </svg>\n</div>\n<div class=\"ep-body\">\n  <div class=\"ep-content\">\n    <ng-content/>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAaa,uBAAuB,CAAA;AAClC,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC;AACvB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;IAE/C,cAAc,GAAG,MAAM,EAAW;IAEjC,OAAO,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;AACrB,QAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;IAChC;wGAXW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,glBCbpC,4mBAgBA,EAAA,MAAA,EAAA,CAAA,yyDAAA,CAAA,EAAA,CAAA;;4FDHa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAXnC,SAAS;+BACE,qBAAqB,EAAA,QAAA,EACrB,mBAAmB,EAAA,IAAA,EAGvB;AACJ,wBAAA,OAAO,EAAE,qBAAqB;AAC9B,wBAAA,qBAAqB,EAAE,YAAY;AACnC,wBAAA,qBAAqB,EAAE,YAAY;AACpC,qBAAA,EAAA,QAAA,EAAA,4mBAAA,EAAA,MAAA,EAAA,CAAA,yyDAAA,CAAA,EAAA;;;AEXH;;AAEG;;;;"}
+{"version":3,"file":"elementar-rt-components-expansion-panel.mjs","sources":["../../../projects/components/expansion-panel/src/expansion-panel/expansion-panel.component.ts","../../../projects/components/expansion-panel/src/expansion-panel/expansion-panel.component.html","../../../projects/components/expansion-panel/elementar-rt-components-expansion-panel.ts"],"sourcesContent":["import { booleanAttribute, Component, input, model, output } from '@angular/core';\n\n@Component({\n  selector: 'emr-expansion-panel',\n  exportAs: 'emrExpansionPanel',\n  templateUrl: './expansion-panel.component.html',\n  styleUrl: './expansion-panel.component.scss',\n  host: {\n    'class': 'emr-expansion-panel',\n    '[class.is-expanded]': 'expanded()',\n    '[class.is-disabled]': 'disabled()',\n  }\n})\nexport class ExpansionPanelComponent {\n  expanded = model(false);\n  disabled = input(false, { transform: booleanAttribute });\n\n  readonly expandedChange = output<boolean>();\n\n  protected _toggle() {\n    if (this.disabled()) return;\n    const next = !this.expanded();\n    this.expanded.set(next);\n    this.expandedChange.emit(next);\n  }\n}\n","<div class=\"ep-header\" (click)=\"_toggle()\" [attr.aria-expanded]=\"expanded()\">\n  <span class=\"ep-title\">\n    <ng-content select=\"emr-expansion-panel-title,[emrExpansionPanelTitle]\"/>\n  </span>\n  <span class=\"ep-description\">\n    <ng-content select=\"emr-expansion-panel-description,[emrExpansionPanelDescription]\"/>\n  </span>\n  <svg class=\"ep-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n    <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\n  </svg>\n</div>\n<div class=\"ep-body\">\n  <div class=\"ep-content\">\n    <ng-content/>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAaa,uBAAuB,CAAA;AAClC,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,+EAAC;IACvB,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAE/C,cAAc,GAAG,MAAM,EAAW;IAEjC,OAAO,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;AACrB,QAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;IAChC;wGAXW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,glBCbpC,4mBAgBA,EAAA,MAAA,EAAA,CAAA,yyDAAA,CAAA,EAAA,CAAA;;4FDHa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAXnC,SAAS;+BACE,qBAAqB,EAAA,QAAA,EACrB,mBAAmB,EAAA,IAAA,EAGvB;AACJ,wBAAA,OAAO,EAAE,qBAAqB;AAC9B,wBAAA,qBAAqB,EAAE,YAAY;AACnC,wBAAA,qBAAqB,EAAE,YAAY;AACpC,qBAAA,EAAA,QAAA,EAAA,4mBAAA,EAAA,MAAA,EAAA,CAAA,yyDAAA,CAAA,EAAA;;;AEXH;;AAEG;;"}

package/fesm2022/elementar-rt-components-filter-builder.mjs

@@ -12,10 +12,10 @@ import { MenuOptionGroupDirective, AutoFocusDirective, FocusElementDirective } f
 
 class FilterBuilderOperationNameDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderOperationNameDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FilterBuilderOperationNameDirective, isStandalone: true, selector: "[emrFilterBuilderOperationName]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderOperationNameDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: FilterBuilderOperationNameDirective, isStandalone: true, selector: "[emrFilterBuilderOperationName]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderOperationNameDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderOperationNameDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrFilterBuilderOperationName]'
@@ -24,10 +24,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class FilterBuilderOperationIconDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderOperationIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FilterBuilderOperationIconDirective, isStandalone: true, selector: "[emrFilterBuilderOperationIcon]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderOperationIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: FilterBuilderOperationIconDirective, isStandalone: true, selector: "[emrFilterBuilderOperationIcon]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderOperationIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderOperationIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrFilterBuilderOperationIcon]'
@@ -35,16 +35,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 
 class FilterBuilderOperationDefDirective {
-    id = input('', ...(ngDevMode ? [{ debugName: "id", alias: 'emrFilterBuilderOperationDef' }] : [{
-            alias: 'emrFilterBuilderOperationDef'
-        }]));
-    allowedDataTypes = input([], ...(ngDevMode ? [{ debugName: "allowedDataTypes" }] : []));
-    operationName = contentChild(FilterBuilderOperationNameDirective, ...(ngDevMode ? [{ debugName: "operationName" }] : []));
-    operationIcon = contentChild(FilterBuilderOperationIconDirective, ...(ngDevMode ? [{ debugName: "operationIcon" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderOperationDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: FilterBuilderOperationDefDirective, isStandalone: true, selector: "[emrFilterBuilderOperationDef]", inputs: { id: { classPropertyName: "id", publicName: "emrFilterBuilderOperationDef", isSignal: true, isRequired: false, transformFunction: null }, allowedDataTypes: { classPropertyName: "allowedDataTypes", publicName: "allowedDataTypes", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "operationName", first: true, predicate: FilterBuilderOperationNameDirective, descendants: true, isSignal: true }, { propertyName: "operationIcon", first: true, predicate: FilterBuilderOperationIconDirective, descendants: true, isSignal: true }], ngImport: i0 });
+    id = input('', { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'emrFilterBuilderOperationDef' });
+    allowedDataTypes = input([], ...(ngDevMode ? [{ debugName: "allowedDataTypes" }] : /* istanbul ignore next */ []));
+    operationName = contentChild(FilterBuilderOperationNameDirective, ...(ngDevMode ? [{ debugName: "operationName" }] : /* istanbul ignore next */ []));
+    operationIcon = contentChild(FilterBuilderOperationIconDirective, ...(ngDevMode ? [{ debugName: "operationIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderOperationDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.22", type: FilterBuilderOperationDefDirective, isStandalone: true, selector: "[emrFilterBuilderOperationDef]", inputs: { id: { classPropertyName: "id", publicName: "emrFilterBuilderOperationDef", isSignal: true, isRequired: false, transformFunction: null }, allowedDataTypes: { classPropertyName: "allowedDataTypes", publicName: "allowedDataTypes", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "operationName", first: true, predicate: FilterBuilderOperationNameDirective, descendants: true, isSignal: true }, { propertyName: "operationIcon", first: true, predicate: FilterBuilderOperationIconDirective, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderOperationDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderOperationDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrFilterBuilderOperationDef]'
@@ -62,9 +60,9 @@ class FilterBuilderComponent {
         '_resetArrayValue': this._resetArrayValue,
         '_resetNumberValue': this._resetNumberValue,
     };
-    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-    fieldDefs = input([], ...(ngDevMode ? [{ debugName: "fieldDefs" }] : []));
-    categories = input([], ...(ngDevMode ? [{ debugName: "categories" }] : []));
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    fieldDefs = input([], ...(ngDevMode ? [{ debugName: "fieldDefs" }] : /* istanbul ignore next */ []));
+    categories = input([], ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
     groupOperations = input([
         {
             id: 'and',
@@ -74,11 +72,11 @@ class FilterBuilderComponent {
             id: 'or',
             name: 'Or'
         }
-    ], ...(ngDevMode ? [{ debugName: "groupOperations" }] : []));
-    customOperations = input([], ...(ngDevMode ? [{ debugName: "customOperations" }] : []));
+    ], ...(ngDevMode ? [{ debugName: "groupOperations" }] : /* istanbul ignore next */ []));
+    customOperations = input([], ...(ngDevMode ? [{ debugName: "customOperations" }] : /* istanbul ignore next */ []));
     _logicalOperator = this.groupOperations()[0].id;
-    _prebuiltOperationDefs = viewChildren(FilterBuilderOperationDefDirective, ...(ngDevMode ? [{ debugName: "_prebuiltOperationDefs" }] : []));
-    _customOperationDefs = contentChildren(FilterBuilderOperationDefDirective, ...(ngDevMode ? [{ debugName: "_customOperationDefs" }] : []));
+    _prebuiltOperationDefs = viewChildren(FilterBuilderOperationDefDirective, ...(ngDevMode ? [{ debugName: "_prebuiltOperationDefs" }] : /* istanbul ignore next */ []));
+    _customOperationDefs = contentChildren(FilterBuilderOperationDefDirective, ...(ngDevMode ? [{ debugName: "_customOperationDefs" }] : /* istanbul ignore next */ []));
     _operationDefs = [];
     valueChanged = output();
     _value = [];
@@ -299,10 +297,10 @@ class FilterBuilderComponent {
         });
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FilterBuilderComponent, isStandalone: true, selector: "emr-filter-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fieldDefs: { classPropertyName: "fieldDefs", publicName: "fieldDefs", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, groupOperations: { classPropertyName: "groupOperations", publicName: "groupOperations", isSignal: true, isRequired: false, transformFunction: null }, customOperations: { classPropertyName: "customOperations", publicName: "customOperations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { classAttribute: "emr-filter-builder" }, queries: [{ propertyName: "_customOperationDefs", predicate: FilterBuilderOperationDefDirective, isSignal: true }], viewQueries: [{ propertyName: "_prebuiltOperationDefs", predicate: FilterBuilderOperationDefDirective, descendants: true, isSignal: true }], exportAs: ["emrFilterBuilder"], ngImport: i0, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button [matMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [matMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <mat-icon class=\"font-icon\">add</mat-icon>\n          </div>\n          <mat-menu #nestedGroupOperationsMenu>\n            <div emrMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n              }\n            </div>\n          </mat-menu>\n          <mat-menu #addGroupMenu>\n            <button mat-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button mat-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </mat-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"></ng-container>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button class=\"condition-field\"\n                  [matMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [matMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"></ng-template>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\"\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\" multiple\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             emrFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput emrAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                        </div>\n                      }\n                      @default {\n                        <mat-form-field class=\"form-field-number\">\n                          <input type=\"number\" matInput emrAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <mat-form-field class=\"form-field\">\n                      <input type=\"text\" matInput emrAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </mat-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <mat-menu #fieldsMenu>\n          <div emrMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n            @for (fieldDef of fieldDefs(); track fieldDef) {\n              <mat-option [value]=\"fieldDef.dataField\"\n                          (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</mat-option>\n            }\n          </div>\n        </mat-menu>\n        <mat-menu #operationsMenu>\n          <div emrMenuOptionGroup [ngModel]=\"item['value'][1]\">\n            @for (operation of _operationDefs; track operation.id()) {\n              <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                <mat-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                  <div class=\"flex items-center gap-3\">\n                    @if (operation.operationIcon()) {\n                      <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"></ng-template>\n                    }\n                    <div>\n                      <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"></ng-template>\n                    </div>\n                  </div>\n                </mat-option>\n              </div>\n            }\n          </div>\n        </mat-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [matMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [matMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <mat-icon class=\"font-icon\">add</mat-icon>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"></ng-container>\n</div>\n\n<mat-menu #groupOperationsMenu>\n  <div emrMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n    @for (groupOperation of groupOperations(); track groupOperation.id) {\n      <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n    }\n  </div>\n</mat-menu>\n<mat-menu #addMenu>\n  <button mat-menu-item (click)=\"addCondition()\">Add Condition</button>\n  <button mat-menu-item (click)=\"addGroup()\">Add Group</button>\n</mat-menu>\n\n<ng-container emrFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template emrFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--emr-filter-builder-group-operations-gap: calc(var(--spacing) * 2);--emr-filter-builder-group-operation-font-size: var(--text-tiny);--emr-filter-builder-group-operation-color: var(--color-neutral-800);--emr-filter-builder-group-operation-bg: transparent;--emr-filter-builder-group-operation-font-weight: 400;--emr-filter-builder-group-operation-border-radius: .5rem;--emr-filter-builder-group-operation-bpadding: 0 calc(var(--spacing) * 2);--emr-filter-builder-group-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-200);--emr-filter-builder-group-operation-active-color: var(--color-neutral-900);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-300);--emr-filter-builder-group-operation-border: 1px solid var(--color-neutral-500);--emr-filter-builder-group-add-color: var(--color-primary);--emr-filter-builder-group-add-hover-color: var(--color-primary);--emr-filter-builder-group-margin: 0;--emr-filter-builder-group-padding: 0;--emr-filter-builder-group-gap: calc(var(--spacing) * 4);--emr-filter-builder-condition-gap: calc(var(--spacing) * 2);--emr-filter-builder-condition-field-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-field-font-size: var(--text-tiny);--emr-filter-builder-condition-field-color: var(--color-neutral-800);--emr-filter-builder-condition-field-bg: var(--color-primary-300);--emr-filter-builder-condition-field-font-weight: 400;--emr-filter-builder-condition-field-border-radius: .5rem;--emr-filter-builder-condition-field-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-field-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-field-hover-bg: var(--color-primary-400);--emr-filter-builder-condition-field-active-color: white;--emr-filter-builder-condition-field-active-bg: var(--color-primary-500);--emr-filter-builder-condition-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-operation-font-size: var(--text-tiny);--emr-filter-builder-condition-operation-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-bg: var(--color-tertiary-300);--emr-filter-builder-condition-operation-font-weight: 400;--emr-filter-builder-condition-operation-border-radius: .5rem;--emr-filter-builder-condition-operation-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-hover-bg: var(--color-tertiary-400);--emr-filter-builder-condition-operation-active-color: white;--emr-filter-builder-condition-operation-active-bg: var(--color-tertiary-500);--emr-filter-builder-condition-value-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-value-font-size: var(--text-tiny);--emr-filter-builder-condition-value-color: var(--color-neutral-800);--emr-filter-builder-condition-value-bg: var(--color-neutral-200);--emr-filter-builder-condition-value-font-weight: 400;--emr-filter-builder-condition-value-border-radius: .5rem;--emr-filter-builder-condition-value-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-value-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-value-hover-bg: var(--color-neutral-300);--emr-filter-builder-condition-remove-color: oklch(63.7% .237 25.331);--emr-filter-builder-condition-remove-hover-color: oklch(57.7% .245 27.325);display:block}:host ::ng-deep .mat-mdc-form-field-infix{--mat-form-field-container-height: 46px !important;--mat-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--emr-filter-builder-group-operations-gap)}:host .group{margin:var(--emr-filter-builder-group-margin);padding:var(--emr-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--emr-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-group-operation-height);font-size:var(--emr-filter-builder-group-operation-font-size);font-weight:var(--emr-filter-builder-group-operation-font-weight);color:var(--emr-filter-builder-group-operation-color);background:var(--emr-filter-builder-group-operation-bg);border:var(--emr-filter-builder-group-operation-border);border-radius:var(--emr-filter-builder-group-operation-border-radius);padding:var(--emr-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--emr-filter-builder-group-operation-hover-color);background:var(--emr-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--emr-filter-builder-group-operation-active-color);background:var(--emr-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--emr-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-field-height);font-size:var(--emr-filter-builder-condition-field-font-size);font-weight:var(--emr-filter-builder-condition-field-font-weight);color:var(--emr-filter-builder-condition-field-color);background:var(--emr-filter-builder-condition-field-bg);border-radius:var(--emr-filter-builder-condition-field-border-radius);padding:var(--emr-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--emr-filter-builder-condition-field-hover-color);background:var(--emr-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--emr-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--emr-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--emr-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--emr-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--emr-filter-builder-condition-field-active-color);background:var(--emr-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-operation-height);font-size:var(--emr-filter-builder-condition-operation-font-size);font-weight:var(--emr-filter-builder-condition-operation-font-weight);color:var(--emr-filter-builder-condition-operation-color);background:var(--emr-filter-builder-condition-operation-bg);border-radius:var(--emr-filter-builder-condition-operation-border-radius);padding:var(--emr-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--emr-filter-builder-condition-operation-hover-color);background:var(--emr-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--emr-filter-builder-condition-operation-active-color);background:var(--emr-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-value-height);font-size:var(--emr-filter-builder-condition-value-font-size);font-weight:var(--emr-filter-builder-condition-value-font-weight);color:var(--emr-filter-builder-condition-value-color);background:var(--emr-filter-builder-condition-value-bg);border-radius:var(--emr-filter-builder-condition-value-border-radius);padding:var(--emr-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--emr-filter-builder-condition-value-hover-color);background:var(--emr-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--emr-filter-builder-group-operation-color: var(--color-neutral-200);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-650);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-100);--emr-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MenuOptionGroupDirective, selector: "[emrMenuOptionGroup]", outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: AutoFocusDirective, selector: "[emrAutoFocus]", exportAs: ["emrAutoFocus"] }, { kind: "directive", type: FocusElementDirective, selector: "[emrFocusElement]", inputs: ["checkChildren"], outputs: ["elementFocused", "elementBlurred"], exportAs: ["emrFocusElement"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: FilterBuilderOperationDefDirective, selector: "[emrFilterBuilderOperationDef]", inputs: ["emrFilterBuilderOperationDef", "allowedDataTypes"] }, { kind: "directive", type: FilterBuilderOperationNameDirective, selector: "[emrFilterBuilderOperationName]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FilterBuilderComponent, isStandalone: true, selector: "emr-filter-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fieldDefs: { classPropertyName: "fieldDefs", publicName: "fieldDefs", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, groupOperations: { classPropertyName: "groupOperations", publicName: "groupOperations", isSignal: true, isRequired: false, transformFunction: null }, customOperations: { classPropertyName: "customOperations", publicName: "customOperations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { classAttribute: "emr-filter-builder" }, queries: [{ propertyName: "_customOperationDefs", predicate: FilterBuilderOperationDefDirective, isSignal: true }], viewQueries: [{ propertyName: "_prebuiltOperationDefs", predicate: FilterBuilderOperationDefDirective, descendants: true, isSignal: true }], exportAs: ["emrFilterBuilder"], ngImport: i0, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button [matMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [matMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <mat-icon class=\"font-icon\">add</mat-icon>\n          </div>\n          <mat-menu #nestedGroupOperationsMenu>\n            <div emrMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n              }\n            </div>\n          </mat-menu>\n          <mat-menu #addGroupMenu>\n            <button mat-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button mat-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </mat-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"></ng-container>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button class=\"condition-field\"\n                  [matMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [matMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"></ng-template>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\"\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\" multiple\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             emrFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput emrAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                        </div>\n                      }\n                      @default {\n                        <mat-form-field class=\"form-field-number\">\n                          <input type=\"number\" matInput emrAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <mat-form-field class=\"form-field\">\n                      <input type=\"text\" matInput emrAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </mat-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <mat-menu #fieldsMenu>\n          <div emrMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n            @for (fieldDef of fieldDefs(); track fieldDef) {\n              <mat-option [value]=\"fieldDef.dataField\"\n                          (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</mat-option>\n            }\n          </div>\n        </mat-menu>\n        <mat-menu #operationsMenu>\n          <div emrMenuOptionGroup [ngModel]=\"item['value'][1]\">\n            @for (operation of _operationDefs; track operation.id()) {\n              <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                <mat-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                  <div class=\"flex items-center gap-3\">\n                    @if (operation.operationIcon()) {\n                      <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"></ng-template>\n                    }\n                    <div>\n                      <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"></ng-template>\n                    </div>\n                  </div>\n                </mat-option>\n              </div>\n            }\n          </div>\n        </mat-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [matMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [matMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <mat-icon class=\"font-icon\">add</mat-icon>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"></ng-container>\n</div>\n\n<mat-menu #groupOperationsMenu>\n  <div emrMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n    @for (groupOperation of groupOperations(); track groupOperation.id) {\n      <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n    }\n  </div>\n</mat-menu>\n<mat-menu #addMenu>\n  <button mat-menu-item (click)=\"addCondition()\">Add Condition</button>\n  <button mat-menu-item (click)=\"addGroup()\">Add Group</button>\n</mat-menu>\n\n<ng-container emrFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template emrFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--emr-filter-builder-group-operations-gap: calc(var(--spacing) * 2);--emr-filter-builder-group-operation-font-size: var(--text-tiny);--emr-filter-builder-group-operation-color: var(--color-neutral-800);--emr-filter-builder-group-operation-bg: transparent;--emr-filter-builder-group-operation-font-weight: 400;--emr-filter-builder-group-operation-border-radius: .5rem;--emr-filter-builder-group-operation-bpadding: 0 calc(var(--spacing) * 2);--emr-filter-builder-group-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-200);--emr-filter-builder-group-operation-active-color: var(--color-neutral-900);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-300);--emr-filter-builder-group-operation-border: 1px solid var(--color-neutral-500);--emr-filter-builder-group-add-color: var(--color-primary);--emr-filter-builder-group-add-hover-color: var(--color-primary);--emr-filter-builder-group-margin: 0;--emr-filter-builder-group-padding: 0;--emr-filter-builder-group-gap: calc(var(--spacing) * 4);--emr-filter-builder-condition-gap: calc(var(--spacing) * 2);--emr-filter-builder-condition-field-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-field-font-size: var(--text-tiny);--emr-filter-builder-condition-field-color: var(--color-neutral-800);--emr-filter-builder-condition-field-bg: var(--color-primary-300);--emr-filter-builder-condition-field-font-weight: 400;--emr-filter-builder-condition-field-border-radius: .5rem;--emr-filter-builder-condition-field-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-field-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-field-hover-bg: var(--color-primary-400);--emr-filter-builder-condition-field-active-color: white;--emr-filter-builder-condition-field-active-bg: var(--color-primary-500);--emr-filter-builder-condition-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-operation-font-size: var(--text-tiny);--emr-filter-builder-condition-operation-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-bg: var(--color-tertiary-300);--emr-filter-builder-condition-operation-font-weight: 400;--emr-filter-builder-condition-operation-border-radius: .5rem;--emr-filter-builder-condition-operation-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-hover-bg: var(--color-tertiary-400);--emr-filter-builder-condition-operation-active-color: white;--emr-filter-builder-condition-operation-active-bg: var(--color-tertiary-500);--emr-filter-builder-condition-value-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-value-font-size: var(--text-tiny);--emr-filter-builder-condition-value-color: var(--color-neutral-800);--emr-filter-builder-condition-value-bg: var(--color-neutral-200);--emr-filter-builder-condition-value-font-weight: 400;--emr-filter-builder-condition-value-border-radius: .5rem;--emr-filter-builder-condition-value-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-value-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-value-hover-bg: var(--color-neutral-300);--emr-filter-builder-condition-remove-color: oklch(63.7% .237 25.331);--emr-filter-builder-condition-remove-hover-color: oklch(57.7% .245 27.325);display:block}:host ::ng-deep .mat-mdc-form-field-infix{--mat-form-field-container-height: 46px !important;--mat-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--emr-filter-builder-group-operations-gap)}:host .group{margin:var(--emr-filter-builder-group-margin);padding:var(--emr-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--emr-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-group-operation-height);font-size:var(--emr-filter-builder-group-operation-font-size);font-weight:var(--emr-filter-builder-group-operation-font-weight);color:var(--emr-filter-builder-group-operation-color);background:var(--emr-filter-builder-group-operation-bg);border:var(--emr-filter-builder-group-operation-border);border-radius:var(--emr-filter-builder-group-operation-border-radius);padding:var(--emr-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--emr-filter-builder-group-operation-hover-color);background:var(--emr-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--emr-filter-builder-group-operation-active-color);background:var(--emr-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--emr-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-field-height);font-size:var(--emr-filter-builder-condition-field-font-size);font-weight:var(--emr-filter-builder-condition-field-font-weight);color:var(--emr-filter-builder-condition-field-color);background:var(--emr-filter-builder-condition-field-bg);border-radius:var(--emr-filter-builder-condition-field-border-radius);padding:var(--emr-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--emr-filter-builder-condition-field-hover-color);background:var(--emr-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--emr-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--emr-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--emr-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--emr-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--emr-filter-builder-condition-field-active-color);background:var(--emr-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-operation-height);font-size:var(--emr-filter-builder-condition-operation-font-size);font-weight:var(--emr-filter-builder-condition-operation-font-weight);color:var(--emr-filter-builder-condition-operation-color);background:var(--emr-filter-builder-condition-operation-bg);border-radius:var(--emr-filter-builder-condition-operation-border-radius);padding:var(--emr-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--emr-filter-builder-condition-operation-hover-color);background:var(--emr-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--emr-filter-builder-condition-operation-active-color);background:var(--emr-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-value-height);font-size:var(--emr-filter-builder-condition-value-font-size);font-weight:var(--emr-filter-builder-condition-value-font-weight);color:var(--emr-filter-builder-condition-value-color);background:var(--emr-filter-builder-condition-value-bg);border-radius:var(--emr-filter-builder-condition-value-border-radius);padding:var(--emr-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--emr-filter-builder-condition-value-hover-color);background:var(--emr-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--emr-filter-builder-group-operation-color: var(--color-neutral-200);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-650);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-100);--emr-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MenuOptionGroupDirective, selector: "[emrMenuOptionGroup]", outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: AutoFocusDirective, selector: "[emrAutoFocus]", exportAs: ["emrAutoFocus"] }, { kind: "directive", type: FocusElementDirective, selector: "[emrFocusElement]", inputs: ["checkChildren"], outputs: ["elementFocused", "elementBlurred"], exportAs: ["emrFocusElement"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: FilterBuilderOperationDefDirective, selector: "[emrFilterBuilderOperationDef]", inputs: ["emrFilterBuilderOperationDef", "allowedDataTypes"] }, { kind: "directive", type: FilterBuilderOperationNameDirective, selector: "[emrFilterBuilderOperationName]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilterBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-filter-builder', exportAs: 'emrFilterBuilder', imports: [
                         MatIcon,
@@ -322,7 +320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         FilterBuilderOperationNameDirective
                     ], host: {
                         'class': 'emr-filter-builder'
-                    }, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button [matMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [matMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <mat-icon class=\"font-icon\">add</mat-icon>\n          </div>\n          <mat-menu #nestedGroupOperationsMenu>\n            <div emrMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n              }\n            </div>\n          </mat-menu>\n          <mat-menu #addGroupMenu>\n            <button mat-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button mat-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </mat-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"></ng-container>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button class=\"condition-field\"\n                  [matMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [matMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"></ng-template>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\"\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\" multiple\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             emrFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput emrAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                        </div>\n                      }\n                      @default {\n                        <mat-form-field class=\"form-field-number\">\n                          <input type=\"number\" matInput emrAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <mat-form-field class=\"form-field\">\n                      <input type=\"text\" matInput emrAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </mat-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <mat-menu #fieldsMenu>\n          <div emrMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n            @for (fieldDef of fieldDefs(); track fieldDef) {\n              <mat-option [value]=\"fieldDef.dataField\"\n                          (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</mat-option>\n            }\n          </div>\n        </mat-menu>\n        <mat-menu #operationsMenu>\n          <div emrMenuOptionGroup [ngModel]=\"item['value'][1]\">\n            @for (operation of _operationDefs; track operation.id()) {\n              <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                <mat-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                  <div class=\"flex items-center gap-3\">\n                    @if (operation.operationIcon()) {\n                      <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"></ng-template>\n                    }\n                    <div>\n                      <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"></ng-template>\n                    </div>\n                  </div>\n                </mat-option>\n              </div>\n            }\n          </div>\n        </mat-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [matMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [matMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <mat-icon class=\"font-icon\">add</mat-icon>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"></ng-container>\n</div>\n\n<mat-menu #groupOperationsMenu>\n  <div emrMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n    @for (groupOperation of groupOperations(); track groupOperation.id) {\n      <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n    }\n  </div>\n</mat-menu>\n<mat-menu #addMenu>\n  <button mat-menu-item (click)=\"addCondition()\">Add Condition</button>\n  <button mat-menu-item (click)=\"addGroup()\">Add Group</button>\n</mat-menu>\n\n<ng-container emrFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template emrFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--emr-filter-builder-group-operations-gap: calc(var(--spacing) * 2);--emr-filter-builder-group-operation-font-size: var(--text-tiny);--emr-filter-builder-group-operation-color: var(--color-neutral-800);--emr-filter-builder-group-operation-bg: transparent;--emr-filter-builder-group-operation-font-weight: 400;--emr-filter-builder-group-operation-border-radius: .5rem;--emr-filter-builder-group-operation-bpadding: 0 calc(var(--spacing) * 2);--emr-filter-builder-group-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-200);--emr-filter-builder-group-operation-active-color: var(--color-neutral-900);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-300);--emr-filter-builder-group-operation-border: 1px solid var(--color-neutral-500);--emr-filter-builder-group-add-color: var(--color-primary);--emr-filter-builder-group-add-hover-color: var(--color-primary);--emr-filter-builder-group-margin: 0;--emr-filter-builder-group-padding: 0;--emr-filter-builder-group-gap: calc(var(--spacing) * 4);--emr-filter-builder-condition-gap: calc(var(--spacing) * 2);--emr-filter-builder-condition-field-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-field-font-size: var(--text-tiny);--emr-filter-builder-condition-field-color: var(--color-neutral-800);--emr-filter-builder-condition-field-bg: var(--color-primary-300);--emr-filter-builder-condition-field-font-weight: 400;--emr-filter-builder-condition-field-border-radius: .5rem;--emr-filter-builder-condition-field-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-field-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-field-hover-bg: var(--color-primary-400);--emr-filter-builder-condition-field-active-color: white;--emr-filter-builder-condition-field-active-bg: var(--color-primary-500);--emr-filter-builder-condition-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-operation-font-size: var(--text-tiny);--emr-filter-builder-condition-operation-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-bg: var(--color-tertiary-300);--emr-filter-builder-condition-operation-font-weight: 400;--emr-filter-builder-condition-operation-border-radius: .5rem;--emr-filter-builder-condition-operation-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-hover-bg: var(--color-tertiary-400);--emr-filter-builder-condition-operation-active-color: white;--emr-filter-builder-condition-operation-active-bg: var(--color-tertiary-500);--emr-filter-builder-condition-value-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-value-font-size: var(--text-tiny);--emr-filter-builder-condition-value-color: var(--color-neutral-800);--emr-filter-builder-condition-value-bg: var(--color-neutral-200);--emr-filter-builder-condition-value-font-weight: 400;--emr-filter-builder-condition-value-border-radius: .5rem;--emr-filter-builder-condition-value-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-value-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-value-hover-bg: var(--color-neutral-300);--emr-filter-builder-condition-remove-color: oklch(63.7% .237 25.331);--emr-filter-builder-condition-remove-hover-color: oklch(57.7% .245 27.325);display:block}:host ::ng-deep .mat-mdc-form-field-infix{--mat-form-field-container-height: 46px !important;--mat-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--emr-filter-builder-group-operations-gap)}:host .group{margin:var(--emr-filter-builder-group-margin);padding:var(--emr-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--emr-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-group-operation-height);font-size:var(--emr-filter-builder-group-operation-font-size);font-weight:var(--emr-filter-builder-group-operation-font-weight);color:var(--emr-filter-builder-group-operation-color);background:var(--emr-filter-builder-group-operation-bg);border:var(--emr-filter-builder-group-operation-border);border-radius:var(--emr-filter-builder-group-operation-border-radius);padding:var(--emr-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--emr-filter-builder-group-operation-hover-color);background:var(--emr-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--emr-filter-builder-group-operation-active-color);background:var(--emr-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--emr-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-field-height);font-size:var(--emr-filter-builder-condition-field-font-size);font-weight:var(--emr-filter-builder-condition-field-font-weight);color:var(--emr-filter-builder-condition-field-color);background:var(--emr-filter-builder-condition-field-bg);border-radius:var(--emr-filter-builder-condition-field-border-radius);padding:var(--emr-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--emr-filter-builder-condition-field-hover-color);background:var(--emr-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--emr-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--emr-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--emr-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--emr-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--emr-filter-builder-condition-field-active-color);background:var(--emr-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-operation-height);font-size:var(--emr-filter-builder-condition-operation-font-size);font-weight:var(--emr-filter-builder-condition-operation-font-weight);color:var(--emr-filter-builder-condition-operation-color);background:var(--emr-filter-builder-condition-operation-bg);border-radius:var(--emr-filter-builder-condition-operation-border-radius);padding:var(--emr-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--emr-filter-builder-condition-operation-hover-color);background:var(--emr-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--emr-filter-builder-condition-operation-active-color);background:var(--emr-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-value-height);font-size:var(--emr-filter-builder-condition-value-font-size);font-weight:var(--emr-filter-builder-condition-value-font-weight);color:var(--emr-filter-builder-condition-value-color);background:var(--emr-filter-builder-condition-value-bg);border-radius:var(--emr-filter-builder-condition-value-border-radius);padding:var(--emr-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--emr-filter-builder-condition-value-hover-color);background:var(--emr-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--emr-filter-builder-group-operation-color: var(--color-neutral-200);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-650);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-100);--emr-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button [matMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [matMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <mat-icon class=\"font-icon\">add</mat-icon>\n          </div>\n          <mat-menu #nestedGroupOperationsMenu>\n            <div emrMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n              }\n            </div>\n          </mat-menu>\n          <mat-menu #addGroupMenu>\n            <button mat-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button mat-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </mat-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"></ng-container>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <mat-icon class=\"font-icon\">close</mat-icon>\n          </div>\n          <button class=\"condition-field\"\n                  [matMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [matMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"></ng-template>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\"\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <mat-form-field class=\"form-field\">\n                          <mat-select placeholder=\"Select...\" multiple\n                                      emrAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             emrFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput emrAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <mat-form-field class=\"form-field-number\">\n                            <input type=\"number\" matInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </mat-form-field>\n                        </div>\n                      }\n                      @default {\n                        <mat-form-field class=\"form-field-number\">\n                          <input type=\"number\" matInput emrAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </mat-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <mat-form-field class=\"form-field\">\n                      <input type=\"text\" matInput emrAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </mat-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <mat-menu #fieldsMenu>\n          <div emrMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n            @for (fieldDef of fieldDefs(); track fieldDef) {\n              <mat-option [value]=\"fieldDef.dataField\"\n                          (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</mat-option>\n            }\n          </div>\n        </mat-menu>\n        <mat-menu #operationsMenu>\n          <div emrMenuOptionGroup [ngModel]=\"item['value'][1]\">\n            @for (operation of _operationDefs; track operation.id()) {\n              <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                <mat-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                  <div class=\"flex items-center gap-3\">\n                    @if (operation.operationIcon()) {\n                      <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"></ng-template>\n                    }\n                    <div>\n                      <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"></ng-template>\n                    </div>\n                  </div>\n                </mat-option>\n              </div>\n            }\n          </div>\n        </mat-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [matMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [matMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <mat-icon class=\"font-icon\">add</mat-icon>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"></ng-container>\n</div>\n\n<mat-menu #groupOperationsMenu>\n  <div emrMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n    @for (groupOperation of groupOperations(); track groupOperation.id) {\n      <mat-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</mat-option>\n    }\n  </div>\n</mat-menu>\n<mat-menu #addMenu>\n  <button mat-menu-item (click)=\"addCondition()\">Add Condition</button>\n  <button mat-menu-item (click)=\"addGroup()\">Add Group</button>\n</mat-menu>\n\n<ng-container emrFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template emrFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template emrFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template emrFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container emrFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template emrFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--emr-filter-builder-group-operations-gap: calc(var(--spacing) * 2);--emr-filter-builder-group-operation-font-size: var(--text-tiny);--emr-filter-builder-group-operation-color: var(--color-neutral-800);--emr-filter-builder-group-operation-bg: transparent;--emr-filter-builder-group-operation-font-weight: 400;--emr-filter-builder-group-operation-border-radius: .5rem;--emr-filter-builder-group-operation-bpadding: 0 calc(var(--spacing) * 2);--emr-filter-builder-group-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-200);--emr-filter-builder-group-operation-active-color: var(--color-neutral-900);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-300);--emr-filter-builder-group-operation-border: 1px solid var(--color-neutral-500);--emr-filter-builder-group-add-color: var(--color-primary);--emr-filter-builder-group-add-hover-color: var(--color-primary);--emr-filter-builder-group-margin: 0;--emr-filter-builder-group-padding: 0;--emr-filter-builder-group-gap: calc(var(--spacing) * 4);--emr-filter-builder-condition-gap: calc(var(--spacing) * 2);--emr-filter-builder-condition-field-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-field-font-size: var(--text-tiny);--emr-filter-builder-condition-field-color: var(--color-neutral-800);--emr-filter-builder-condition-field-bg: var(--color-primary-300);--emr-filter-builder-condition-field-font-weight: 400;--emr-filter-builder-condition-field-border-radius: .5rem;--emr-filter-builder-condition-field-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-field-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-field-hover-bg: var(--color-primary-400);--emr-filter-builder-condition-field-active-color: white;--emr-filter-builder-condition-field-active-bg: var(--color-primary-500);--emr-filter-builder-condition-operation-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-operation-font-size: var(--text-tiny);--emr-filter-builder-condition-operation-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-bg: var(--color-tertiary-300);--emr-filter-builder-condition-operation-font-weight: 400;--emr-filter-builder-condition-operation-border-radius: .5rem;--emr-filter-builder-condition-operation-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-operation-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-operation-hover-bg: var(--color-tertiary-400);--emr-filter-builder-condition-operation-active-color: white;--emr-filter-builder-condition-operation-active-bg: var(--color-tertiary-500);--emr-filter-builder-condition-value-height: calc(var(--spacing) * 7);--emr-filter-builder-condition-value-font-size: var(--text-tiny);--emr-filter-builder-condition-value-color: var(--color-neutral-800);--emr-filter-builder-condition-value-bg: var(--color-neutral-200);--emr-filter-builder-condition-value-font-weight: 400;--emr-filter-builder-condition-value-border-radius: .5rem;--emr-filter-builder-condition-value-bpadding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);--emr-filter-builder-condition-value-hover-color: var(--color-neutral-800);--emr-filter-builder-condition-value-hover-bg: var(--color-neutral-300);--emr-filter-builder-condition-remove-color: oklch(63.7% .237 25.331);--emr-filter-builder-condition-remove-hover-color: oklch(57.7% .245 27.325);display:block}:host ::ng-deep .mat-mdc-form-field-infix{--mat-form-field-container-height: 46px !important;--mat-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--emr-filter-builder-group-operations-gap)}:host .group{margin:var(--emr-filter-builder-group-margin);padding:var(--emr-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--emr-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-group-operation-height);font-size:var(--emr-filter-builder-group-operation-font-size);font-weight:var(--emr-filter-builder-group-operation-font-weight);color:var(--emr-filter-builder-group-operation-color);background:var(--emr-filter-builder-group-operation-bg);border:var(--emr-filter-builder-group-operation-border);border-radius:var(--emr-filter-builder-group-operation-border-radius);padding:var(--emr-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--emr-filter-builder-group-operation-hover-color);background:var(--emr-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--emr-filter-builder-group-operation-active-color);background:var(--emr-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--emr-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-field-height);font-size:var(--emr-filter-builder-condition-field-font-size);font-weight:var(--emr-filter-builder-condition-field-font-weight);color:var(--emr-filter-builder-condition-field-color);background:var(--emr-filter-builder-condition-field-bg);border-radius:var(--emr-filter-builder-condition-field-border-radius);padding:var(--emr-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--emr-filter-builder-condition-field-hover-color);background:var(--emr-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--emr-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--emr-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--emr-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--emr-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--emr-filter-builder-condition-field-active-color);background:var(--emr-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-operation-height);font-size:var(--emr-filter-builder-condition-operation-font-size);font-weight:var(--emr-filter-builder-condition-operation-font-weight);color:var(--emr-filter-builder-condition-operation-color);background:var(--emr-filter-builder-condition-operation-bg);border-radius:var(--emr-filter-builder-condition-operation-border-radius);padding:var(--emr-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--emr-filter-builder-condition-operation-hover-color);background:var(--emr-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--emr-filter-builder-condition-operation-active-color);background:var(--emr-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--emr-filter-builder-condition-value-height);font-size:var(--emr-filter-builder-condition-value-font-size);font-weight:var(--emr-filter-builder-condition-value-font-weight);color:var(--emr-filter-builder-condition-value-color);background:var(--emr-filter-builder-condition-value-bg);border-radius:var(--emr-filter-builder-condition-value-border-radius);padding:var(--emr-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--emr-filter-builder-condition-value-hover-color);background:var(--emr-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--emr-filter-builder-group-operation-color: var(--color-neutral-200);--emr-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--emr-filter-builder-group-operation-active-bg: var(--color-neutral-650);--emr-filter-builder-group-operation-hover-color: var(--color-neutral-100);--emr-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fieldDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldDefs", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], groupOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupOperations", required: false }] }], customOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOperations", required: false }] }], _prebuiltOperationDefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterBuilderOperationDefDirective), { isSignal: true }] }], _customOperationDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FilterBuilderOperationDefDirective), { isSignal: true }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
 
 /**