npm - @ngstarter-ui/components - Versions diffs - 1.0.28 → 1.0.31 - Mend

@ngstarter-ui/components 1.0.28 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/fesm2022/ngstarter-ui-components-empty-state.mjs CHANGED Viewed

@@ -25,13 +25,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class EmptyStateIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmptyStateIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EmptyStateIcon, isStandalone: true, selector: "ngs-empty-state-icon", host: { classAttribute: "ngs-empty-state-icon" }, exportAs: ["ngsEmptyStateIcon"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 40);height:calc(var(--spacing, .25rem) * 40);background:var(--color-surface-container);border-radius:calc(infinity * 1px);margin-bottom:calc(var(--spacing, .25rem) * 6)}:host ::ng-deep ngs-icon{--icon-size: calc(var(--spacing, .25rem) * 28)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EmptyStateIcon, isStandalone: true, selector: "ngs-empty-state-icon", host: { classAttribute: "ngs-empty-state-icon" }, exportAs: ["ngsEmptyStateIcon"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 40);height:calc(var(--spacing, .25rem) * 40);background:var(--ngs-color-surface-container);border-radius:calc(infinity * 1px);margin-bottom:calc(var(--spacing, .25rem) * 6)}:host ::ng-deep ngs-icon{--icon-size: calc(var(--spacing, .25rem) * 28)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmptyStateIcon, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-empty-state-icon', exportAs: 'ngsEmptyStateIcon', host: {
                         'class': 'ngs-empty-state-icon'
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content/>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 40);height:calc(var(--spacing, .25rem) * 40);background:var(--color-surface-container);border-radius:calc(infinity * 1px);margin-bottom:calc(var(--spacing, .25rem) * 6)}:host ::ng-deep ngs-icon{--icon-size: calc(var(--spacing, .25rem) * 28)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content/>\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 40);height:calc(var(--spacing, .25rem) * 40);background:var(--ngs-color-surface-container);border-radius:calc(infinity * 1px);margin-bottom:calc(var(--spacing, .25rem) * 6)}:host ::ng-deep ngs-icon{--icon-size: calc(var(--spacing, .25rem) * 28)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 class EmptyStateTitle {
@@ -47,13 +47,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class EmptyStateContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmptyStateContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EmptyStateContent, isStandalone: true, selector: "ngs-empty-state-content", host: { classAttribute: "ngs-empty-state-content" }, exportAs: ["ngsEmptyStateContent"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.875rem;color:var(--color-neutral-600)}:host-context(html.dark){color:var(--color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EmptyStateContent, isStandalone: true, selector: "ngs-empty-state-content", host: { classAttribute: "ngs-empty-state-content" }, exportAs: ["ngsEmptyStateContent"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-font-size-sm);color:var(--ngs-color-neutral-600)}:host-context(html.dark){color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmptyStateContent, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-empty-state-content', exportAs: 'ngsEmptyStateContent', host: {
                         'class': 'ngs-empty-state-content'
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.875rem;color:var(--color-neutral-600)}:host-context(html.dark){color:var(--color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-font-size-sm);color:var(--ngs-color-neutral-600)}:host-context(html.dark){color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 class EmptyStateActions {

package/fesm2022/ngstarter-ui-components-empty-state.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-empty-state.mjs","sources":["../../../projects/components/empty-state/src/empty-state/empty-state.ts","../../../projects/components/empty-state/src/empty-state/empty-state.html","../../../projects/components/empty-state/src/empty-state-image/empty-state-image.ts","../../../projects/components/empty-state/src/empty-state-image/empty-state-image.html","../../../projects/components/empty-state/src/empty-state-icon/empty-state-icon.ts","../../../projects/components/empty-state/src/empty-state-icon/empty-state-icon.html","../../../projects/components/empty-state/src/empty-state-title/empty-state-title.ts","../../../projects/components/empty-state/src/empty-state-title/empty-state-title.html","../../../projects/components/empty-state/src/empty-state-content/empty-state-content.ts","../../../projects/components/empty-state/src/empty-state-content/empty-state-content.html","../../../projects/components/empty-state/src/empty-state-actions/empty-state-actions.ts","../../../projects/components/empty-state/src/empty-state-actions/empty-state-actions.html","../../../projects/components/empty-state/ngstarter-ui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state',\n exportAs: 'ngsEmptyState',\n templateUrl: './empty-state.html',\n styleUrl: './empty-state.scss',\n host: {\n 'class': 'ngs-empty-state',\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyState {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-image',\n exportAs: 'ngsEmptyStateImage',\n templateUrl: './empty-state-image.html',\n styleUrl: './empty-state-image.scss',\n host: {\n 'class': 'ngs-empty-state-image'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateImage {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-icon',\n exportAs: 'ngsEmptyStateIcon',\n templateUrl: './empty-state-icon.html',\n styleUrl: './empty-state-icon.scss',\n host: {\n 'class': 'ngs-empty-state-icon'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateIcon {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-title,[ngs-empty-state-title]',\n exportAs: 'ngsEmptyStateTitle',\n templateUrl: './empty-state-title.html',\n styleUrl: './empty-state-title.scss',\n host: {\n 'class': 'ngs-empty-state-title'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateTitle {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-content',\n exportAs: 'ngsEmptyStateContent',\n templateUrl: './empty-state-content.html',\n styleUrl: './empty-state-content.scss',\n host: {\n 'class': 'ngs-empty-state-content'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateContent {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-actions',\n exportAs: 'ngsEmptyStateActions',\n templateUrl: './empty-state-actions.html',\n styleUrl: './empty-state-actions.scss',\n host: {\n 'class': 'ngs-empty-state-actions'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateActions {}\n","<ng-content/>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MAaa,UAAU,CAAA;uGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,qJCbvB,iBACA,EAAA,MAAA,EAAA,CAAA,0RAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDYa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;+BACE,iBAAiB,EAAA,QAAA,EACjB,eAAe,EAAA,IAAA,EAGnB;AACJ,wBAAA,OAAO,EAAE,iBAAiB;AAC3B,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,0RAAA,CAAA,EAAA;;;MEEpC,eAAe,CAAA;uGAAf,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,QAAA,EAAA,IAAA,EAAA,eAAe,sKCb5B,iBACA,EAAA,MAAA,EAAA,CAAA,qUAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDYa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;+BACE,uBAAuB,EAAA,QAAA,EACvB,oBAAoB,EAAA,IAAA,EAGxB;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,qUAAA,CAAA,EAAA;;;MEEpC,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,mKCb3B,iBACA,EAAA,MAAA,EAAA,CAAA,~~kcAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDYa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAX1B,SAAS;+BACE,sBAAsB,EAAA,QAAA,EACtB,mBAAmB,EAAA,IAAA,EAGvB;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,~~kcAAA~~,CAAA,EAAA;;;MEEpC,eAAe,CAAA;uGAAf,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,QAAA,EAAA,IAAA,EAAA,eAAe,8LCb5B,iBACA,EAAA,MAAA,EAAA,CAAA,4HAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDYa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;+BACE,+CAA+C,EAAA,QAAA,EAC/C,oBAAoB,EAAA,IAAA,EAGxB;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,4HAAA,CAAA,EAAA;;;MEEpC,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4KCb9B,iBACA,EAAA,MAAA,EAAA,CAAA,~~oMAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDYa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;+BACE,yBAAyB,EAAA,QAAA,EACzB,sBAAsB,EAAA,IAAA,EAG1B;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,~~oMAAA~~,CAAA,EAAA;;;MEEpC,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4KCb9B,iBACA,EAAA,MAAA,EAAA,CAAA,8LAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDYa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;+BACE,yBAAyB,EAAA,QAAA,EACzB,sBAAsB,EAAA,IAAA,EAG1B;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,8LAAA,CAAA,EAAA;;;AEXjD;;AAEG;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-empty-state.mjs","sources":["../../../projects/components/empty-state/src/empty-state/empty-state.ts","../../../projects/components/empty-state/src/empty-state/empty-state.html","../../../projects/components/empty-state/src/empty-state-image/empty-state-image.ts","../../../projects/components/empty-state/src/empty-state-image/empty-state-image.html","../../../projects/components/empty-state/src/empty-state-icon/empty-state-icon.ts","../../../projects/components/empty-state/src/empty-state-icon/empty-state-icon.html","../../../projects/components/empty-state/src/empty-state-title/empty-state-title.ts","../../../projects/components/empty-state/src/empty-state-title/empty-state-title.html","../../../projects/components/empty-state/src/empty-state-content/empty-state-content.ts","../../../projects/components/empty-state/src/empty-state-content/empty-state-content.html","../../../projects/components/empty-state/src/empty-state-actions/empty-state-actions.ts","../../../projects/components/empty-state/src/empty-state-actions/empty-state-actions.html","../../../projects/components/empty-state/ngstarter-ui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state',\n exportAs: 'ngsEmptyState',\n templateUrl: './empty-state.html',\n styleUrl: './empty-state.scss',\n host: {\n 'class': 'ngs-empty-state',\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyState {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-image',\n exportAs: 'ngsEmptyStateImage',\n templateUrl: './empty-state-image.html',\n styleUrl: './empty-state-image.scss',\n host: {\n 'class': 'ngs-empty-state-image'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateImage {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-icon',\n exportAs: 'ngsEmptyStateIcon',\n templateUrl: './empty-state-icon.html',\n styleUrl: './empty-state-icon.scss',\n host: {\n 'class': 'ngs-empty-state-icon'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateIcon {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-title,[ngs-empty-state-title]',\n exportAs: 'ngsEmptyStateTitle',\n templateUrl: './empty-state-title.html',\n styleUrl: './empty-state-title.scss',\n host: {\n 'class': 'ngs-empty-state-title'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateTitle {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-content',\n exportAs: 'ngsEmptyStateContent',\n templateUrl: './empty-state-content.html',\n styleUrl: './empty-state-content.scss',\n host: {\n 'class': 'ngs-empty-state-content'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateContent {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-empty-state-actions',\n exportAs: 'ngsEmptyStateActions',\n templateUrl: './empty-state-actions.html',\n styleUrl: './empty-state-actions.scss',\n host: {\n 'class': 'ngs-empty-state-actions'\n },\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateActions {}\n","<ng-content/>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-expand.mjs CHANGED Viewed

@@ -38,14 +38,14 @@ class Expand {
         this.expandedChange.emit(this._expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Expand, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Expand, isStandalone: true, selector: "ngs-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: "ngs-expand" }, exportAs: ["ngsExpand"], 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{--ngs-expand-fade-color: var(--color-background);--ngs-expand-button-bg: var(--color-surface-container);--ngs-expand-button-hover-bg: var(--color-surface-container-high);--ngs-expand-button-color: var(--color-on-surface);--ngs-expand-button-font-size: var(--text-tiny);--ngs-expand-button-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ngs-expand-button-border-radius: calc(infinity * 1px);--ngs-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--ngs-expand-button-hover-opacity: 90%;--ngs-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--ngs-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--ngs-expand-button-padding);border-radius:var(--ngs-expand-button-border-radius);background:var(--ngs-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--ngs-expand-button-color);font-size:var(--ngs-expand-button-font-size);box-shadow:var(--ngs-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--ngs-expand-button-hover-opacity);background:var(--ngs-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(--ngs-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.2.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Expand, isStandalone: true, selector: "ngs-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: "ngs-expand" }, exportAs: ["ngsExpand"], 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{--ngs-expand-fade-color: var(--ngs-color-background);--ngs-expand-button-bg: var(--ngs-color-surface-container);--ngs-expand-button-hover-bg: var(--ngs-color-surface-container-high);--ngs-expand-button-color: var(--ngs-color-on-surface);--ngs-expand-button-font-size: var(--text-tiny);--ngs-expand-button-box-shadow: var(--ngs-shadow-md);--ngs-expand-button-border-radius: calc(infinity * 1px);--ngs-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--ngs-expand-button-hover-opacity: 90%;--ngs-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--ngs-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--ngs-expand-button-padding);border-radius:var(--ngs-expand-button-border-radius);background:var(--ngs-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--ngs-expand-button-color);font-size:var(--ngs-expand-button-font-size);box-shadow:var(--ngs-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--ngs-expand-button-hover-opacity);background:var(--ngs-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(--ngs-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.2.2 | MIT License | https://tailwindcss.com */\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Expand, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-expand', exportAs: 'ngsExpand', host: {
                         'class': 'ngs-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{--ngs-expand-fade-color: var(--color-background);--ngs-expand-button-bg: var(--color-surface-container);--ngs-expand-button-hover-bg: var(--color-surface-container-high);--ngs-expand-button-color: var(--color-on-surface);--ngs-expand-button-font-size: var(--text-tiny);--ngs-expand-button-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ngs-expand-button-border-radius: calc(infinity * 1px);--ngs-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--ngs-expand-button-hover-opacity: 90%;--ngs-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--ngs-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--ngs-expand-button-padding);border-radius:var(--ngs-expand-button-border-radius);background:var(--ngs-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--ngs-expand-button-color);font-size:var(--ngs-expand-button-font-size);box-shadow:var(--ngs-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--ngs-expand-button-hover-opacity);background:var(--ngs-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(--ngs-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.2.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{--ngs-expand-fade-color: var(--ngs-color-background);--ngs-expand-button-bg: var(--ngs-color-surface-container);--ngs-expand-button-hover-bg: var(--ngs-color-surface-container-high);--ngs-expand-button-color: var(--ngs-color-on-surface);--ngs-expand-button-font-size: var(--text-tiny);--ngs-expand-button-box-shadow: var(--ngs-shadow-md);--ngs-expand-button-border-radius: calc(infinity * 1px);--ngs-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--ngs-expand-button-hover-opacity: 90%;--ngs-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--ngs-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--ngs-expand-button-padding);border-radius:var(--ngs-expand-button-border-radius);background:var(--ngs-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--ngs-expand-button-color);font-size:var(--ngs-expand-button-font-size);box-shadow:var(--ngs-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--ngs-expand-button-hover-opacity);background:var(--ngs-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(--ngs-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.2.2 | 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/ngstarter-ui-components-expand.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-expand.mjs","sources":["../../../projects/components/expand/src/expand/expand.ts","../../../projects/components/expand/src/expand/expand.html","../../../projects/components/expand/ngstarter-ui-components-expand.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, output } from '@angular/core';\n\n@Component({\n selector: 'ngs-expand',\n exportAs: 'ngsExpand',\n templateUrl: './expand.html',\n styleUrl: './expand.scss',\n host: {\n 'class': 'ngs-expand',\n '[class.is-expanded]': '_expanded'\n }\n})\nexport class Expand {\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('--ngs-expand-fade-color', this.color(), 'important');\n (this._elementRef.nativeElement as HTMLElement).style.setProperty('--ngs-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,MAAM,CAAA;AACT,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;uGA/CW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,uiCCZnB,oZAiBA,EAAA,MAAA,EAAA,CAAA,~~mrDAAA~~,CAAA,EAAA,CAAA;;2FDLa,MAAM,EAAA,UAAA,EAAA,CAAA;kBAVlB,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;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-expand.mjs","sources":["../../../projects/components/expand/src/expand/expand.ts","../../../projects/components/expand/src/expand/expand.html","../../../projects/components/expand/ngstarter-ui-components-expand.ts"],"sourcesContent":["import { booleanAttribute, Component, effect, ElementRef, inject, input, output } from '@angular/core';\n\n@Component({\n selector: 'ngs-expand',\n exportAs: 'ngsExpand',\n templateUrl: './expand.html',\n styleUrl: './expand.scss',\n host: {\n 'class': 'ngs-expand',\n '[class.is-expanded]': '_expanded'\n }\n})\nexport class Expand {\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('--ngs-expand-fade-color', this.color(), 'important');\n (this._elementRef.nativeElement as HTMLElement).style.setProperty('--ngs-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,MAAM,CAAA;AACT,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;uGA/CW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,uiCCZnB,oZAiBA,EAAA,MAAA,EAAA,CAAA,ypDAAA,CAAA,EAAA,CAAA;;2FDLa,MAAM,EAAA,UAAA,EAAA,CAAA;kBAVlB,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,ypDAAA,CAAA,EAAA;;;AEVH;;AAEG;;;;"}

package/fesm2022/ngstarter-ui-components-expansion.mjs CHANGED Viewed

@@ -48,7 +48,7 @@ class ExpansionPanel {
         return this.expanded() ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ExpansionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ExpansionPanel, isStandalone: true, selector: "ngs-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed", expandedChange: "expandedChange" }, host: { properties: { "class.ngs-expanded": "expanded()", "class.ngs-expansion-panel-disabled": "disabled()", "attr.id": "id" }, classAttribute: "ngs-expansion-panel" }, exportAs: ["ngsExpansionPanel"], ngImport: i0, template: "<ng-content select=\"ngs-expansion-panel-header\"/>\n<div class=\"ngs-expansion-panel-content\"\n     role=\"region\"\n     [class.ngs-expanded]=\"expanded()\"\n     [attr.id]=\"id\"\n     [attr.aria-labelledby]=\"headerId\"\n     [attr.aria-hidden]=\"!expanded()\"\n     (click)=\"$event.stopPropagation()\">\n  <div class=\"ngs-expansion-panel-body\">\n    <ng-content/>\n  </div>\n  <ng-content select=\"ngs-action-row\"/>\n</div>\n", styles: [":host{--ngs-expansion-panel-background: var(--color-surface);--ngs-expansion-panel-color: var(--color-on-surface);--ngs-expansion-panel-divider-color: var(--color-subtle);--ngs-expansion-panel-disabled-color: var(--color-neutral-300);--ngs-expansion-panel-header-height: calc(var(--spacing, .25rem) * 14);--ngs-expansion-panel-header-expanded-height: calc(var(--spacing, .25rem) * 16);--ngs-expansion-panel-content-padding: 3px 24px 16px 24px;--ngs-expansion-panel-radius: .75rem;--ngs-expansion-panel-description-color: var(--color-on-surface-variant);margin-bottom:-1px}:host:first-of-type{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host:last-of-type{border-bottom-left-radius:var(--ngs-expansion-panel-radius);border-bottom-right-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded{border-top:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-bottom:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded+ngs-expansion-panel{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host{display:block;background:var(--ngs-expansion-panel-background);color:var(--ngs-expansion-panel-color);border:1px solid var(--ngs-expansion-panel-divider-color);overflow:hidden}:host.ngs-expanded{margin:16px 0}:host.ngs-expanded:first-of-type{margin-top:0}:host.ngs-expanded:last-of-type{margin-bottom:0}:host.ngs-expansion-panel-disabled{--ngs-expansion-panel-description-color: var(--ngs-expansion-panel-disabled-color);color:var(--ngs-expansion-panel-disabled-color);pointer-events:none}:host .ngs-expansion-panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);visibility:hidden;overflow:hidden;height:0}:host.ngs-expanded :host .ngs-expansion-panel-content{grid-template-rows:1fr;visibility:visible}:host .ngs-expansion-panel-content.ngs-expanded{grid-template-rows:1fr;visibility:visible;height:auto}:host .ngs-expansion-panel-content>div{overflow:hidden;min-height:0}:host .ngs-expansion-panel-body{padding:var(--ngs-expansion-panel-content-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ExpansionPanel, isStandalone: true, selector: "ngs-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed", expandedChange: "expandedChange" }, host: { properties: { "class.ngs-expanded": "expanded()", "class.ngs-expansion-panel-disabled": "disabled()", "attr.id": "id" }, classAttribute: "ngs-expansion-panel" }, exportAs: ["ngsExpansionPanel"], ngImport: i0, template: "<ng-content select=\"ngs-expansion-panel-header\"/>\n<div class=\"ngs-expansion-panel-content\"\n     role=\"region\"\n     [class.ngs-expanded]=\"expanded()\"\n     [attr.id]=\"id\"\n     [attr.aria-labelledby]=\"headerId\"\n     [attr.aria-hidden]=\"!expanded()\"\n     (click)=\"$event.stopPropagation()\">\n  <div class=\"ngs-expansion-panel-body\">\n    <ng-content/>\n  </div>\n  <ng-content select=\"ngs-action-row\"/>\n</div>\n", styles: [":host{--ngs-expansion-panel-background: var(--ngs-color-surface);--ngs-expansion-panel-color: var(--ngs-color-on-surface);--ngs-expansion-panel-divider-color: var(--ngs-color-subtle);--ngs-expansion-panel-disabled-color: var(--ngs-color-neutral-300);--ngs-expansion-panel-header-height: calc(var(--spacing, .25rem) * 14);--ngs-expansion-panel-header-expanded-height: calc(var(--spacing, .25rem) * 16);--ngs-expansion-panel-content-padding: 3px 24px 16px 24px;--ngs-expansion-panel-radius: var(--ngs-radius-xl);--ngs-expansion-panel-description-color: var(--ngs-color-on-surface-variant);margin-bottom:-1px}:host:first-of-type{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host:last-of-type{border-bottom-left-radius:var(--ngs-expansion-panel-radius);border-bottom-right-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded{border-top:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-bottom:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded+ngs-expansion-panel{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host{display:block;background:var(--ngs-expansion-panel-background);color:var(--ngs-expansion-panel-color);border:1px solid var(--ngs-expansion-panel-divider-color);overflow:hidden}:host.ngs-expanded{margin:16px 0}:host.ngs-expanded:first-of-type{margin-top:0}:host.ngs-expanded:last-of-type{margin-bottom:0}:host.ngs-expansion-panel-disabled{--ngs-expansion-panel-description-color: var(--ngs-expansion-panel-disabled-color);color:var(--ngs-expansion-panel-disabled-color);pointer-events:none}:host .ngs-expansion-panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);visibility:hidden;overflow:hidden;height:0}:host.ngs-expanded :host .ngs-expansion-panel-content{grid-template-rows:1fr;visibility:visible}:host .ngs-expansion-panel-content.ngs-expanded{grid-template-rows:1fr;visibility:visible;height:auto}:host .ngs-expansion-panel-content>div{overflow:hidden;min-height:0}:host .ngs-expansion-panel-body{padding:var(--ngs-expansion-panel-content-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ExpansionPanel, decorators: [{
             type: Component,
@@ -57,7 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[class.ngs-expanded]': 'expanded()',
                         '[class.ngs-expansion-panel-disabled]': 'disabled()',
                         '[attr.id]': 'id',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngs-expansion-panel-header\"/>\n<div class=\"ngs-expansion-panel-content\"\n     role=\"region\"\n     [class.ngs-expanded]=\"expanded()\"\n     [attr.id]=\"id\"\n     [attr.aria-labelledby]=\"headerId\"\n     [attr.aria-hidden]=\"!expanded()\"\n     (click)=\"$event.stopPropagation()\">\n  <div class=\"ngs-expansion-panel-body\">\n    <ng-content/>\n  </div>\n  <ng-content select=\"ngs-action-row\"/>\n</div>\n", styles: [":host{--ngs-expansion-panel-background: var(--color-surface);--ngs-expansion-panel-color: var(--color-on-surface);--ngs-expansion-panel-divider-color: var(--color-subtle);--ngs-expansion-panel-disabled-color: var(--color-neutral-300);--ngs-expansion-panel-header-height: calc(var(--spacing, .25rem) * 14);--ngs-expansion-panel-header-expanded-height: calc(var(--spacing, .25rem) * 16);--ngs-expansion-panel-content-padding: 3px 24px 16px 24px;--ngs-expansion-panel-radius: .75rem;--ngs-expansion-panel-description-color: var(--color-on-surface-variant);margin-bottom:-1px}:host:first-of-type{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host:last-of-type{border-bottom-left-radius:var(--ngs-expansion-panel-radius);border-bottom-right-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded{border-top:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-bottom:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded+ngs-expansion-panel{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host{display:block;background:var(--ngs-expansion-panel-background);color:var(--ngs-expansion-panel-color);border:1px solid var(--ngs-expansion-panel-divider-color);overflow:hidden}:host.ngs-expanded{margin:16px 0}:host.ngs-expanded:first-of-type{margin-top:0}:host.ngs-expanded:last-of-type{margin-bottom:0}:host.ngs-expansion-panel-disabled{--ngs-expansion-panel-description-color: var(--ngs-expansion-panel-disabled-color);color:var(--ngs-expansion-panel-disabled-color);pointer-events:none}:host .ngs-expansion-panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);visibility:hidden;overflow:hidden;height:0}:host.ngs-expanded :host .ngs-expansion-panel-content{grid-template-rows:1fr;visibility:visible}:host .ngs-expansion-panel-content.ngs-expanded{grid-template-rows:1fr;visibility:visible;height:auto}:host .ngs-expansion-panel-content>div{overflow:hidden;min-height:0}:host .ngs-expansion-panel-body{padding:var(--ngs-expansion-panel-content-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngs-expansion-panel-header\"/>\n<div class=\"ngs-expansion-panel-content\"\n     role=\"region\"\n     [class.ngs-expanded]=\"expanded()\"\n     [attr.id]=\"id\"\n     [attr.aria-labelledby]=\"headerId\"\n     [attr.aria-hidden]=\"!expanded()\"\n     (click)=\"$event.stopPropagation()\">\n  <div class=\"ngs-expansion-panel-body\">\n    <ng-content/>\n  </div>\n  <ng-content select=\"ngs-action-row\"/>\n</div>\n", styles: [":host{--ngs-expansion-panel-background: var(--ngs-color-surface);--ngs-expansion-panel-color: var(--ngs-color-on-surface);--ngs-expansion-panel-divider-color: var(--ngs-color-subtle);--ngs-expansion-panel-disabled-color: var(--ngs-color-neutral-300);--ngs-expansion-panel-header-height: calc(var(--spacing, .25rem) * 14);--ngs-expansion-panel-header-expanded-height: calc(var(--spacing, .25rem) * 16);--ngs-expansion-panel-content-padding: 3px 24px 16px 24px;--ngs-expansion-panel-radius: var(--ngs-radius-xl);--ngs-expansion-panel-description-color: var(--ngs-color-on-surface-variant);margin-bottom:-1px}:host:first-of-type{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host:last-of-type{border-bottom-left-radius:var(--ngs-expansion-panel-radius);border-bottom-right-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded{border-top:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-bottom:1px solid var(--ngs-expansion-panel-divider-color, rgba(0, 0, 0, .12));border-radius:var(--ngs-expansion-panel-radius)}:host.ngs-expanded+ngs-expansion-panel{border-top-left-radius:var(--ngs-expansion-panel-radius);border-top-right-radius:var(--ngs-expansion-panel-radius)}:host{display:block;background:var(--ngs-expansion-panel-background);color:var(--ngs-expansion-panel-color);border:1px solid var(--ngs-expansion-panel-divider-color);overflow:hidden}:host.ngs-expanded{margin:16px 0}:host.ngs-expanded:first-of-type{margin-top:0}:host.ngs-expanded:last-of-type{margin-bottom:0}:host.ngs-expansion-panel-disabled{--ngs-expansion-panel-description-color: var(--ngs-expansion-panel-disabled-color);color:var(--ngs-expansion-panel-disabled-color);pointer-events:none}:host .ngs-expansion-panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);visibility:hidden;overflow:hidden;height:0}:host.ngs-expanded :host .ngs-expansion-panel-content{grid-template-rows:1fr;visibility:visible}:host .ngs-expansion-panel-content.ngs-expanded{grid-template-rows:1fr;visibility:visible;height:auto}:host .ngs-expansion-panel-content>div{overflow:hidden;min-height:0}:host .ngs-expansion-panel-body{padding:var(--ngs-expansion-panel-content-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 class Accordion {

package/fesm2022/ngstarter-ui-components-expansion.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-expansion.mjs","sources":["../../../projects/components/expansion/src/expansion-panel/expansion-panel.ts","../../../projects/components/expansion/src/expansion-panel/expansion-panel.html","../../../projects/components/expansion/src/accordion/accordion.ts","../../../projects/components/expansion/src/accordion/accordion.html","../../../projects/components/expansion/src/expansion-panel-header/expansion-panel-header.ts","../../../projects/components/expansion/src/expansion-panel-header/expansion-panel-header.html","../../../projects/components/expansion/src/expansion-panel-title/expansion-panel-title.ts","../../../projects/components/expansion/src/expansion-panel-title/expansion-panel-title.html","../../../projects/components/expansion/src/expansion-panel-description/expansion-panel-description.ts","../../../projects/components/expansion/src/expansion-panel-description/expansion-panel-description.html","../../../projects/components/expansion/src/action-row/action-row.ts","../../../projects/components/expansion/src/action-row/action-row.html","../../../projects/components/expansion/ngstarter-ui-components-expansion.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n input,\n output,\n booleanAttribute,\n inject,\n Optional,\n SkipSelf,\n model\n} from '@angular/core';\nimport { Accordion } from '../accordion/accordion';\n\nlet nextId = 0;\n\n@Component({\n selector: 'ngs-expansion-panel',\n exportAs: 'ngsExpansionPanel',\n standalone: true,\n templateUrl: './expansion-panel.html',\n styleUrl: './expansion-panel.scss',\n host: {\n 'class': 'ngs-expansion-panel',\n '[class.ngs-expanded]': 'expanded()',\n '[class.ngs-expansion-panel-disabled]': 'disabled()',\n '[attr.id]': 'id',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanel {\n private _cdr = inject(ChangeDetectorRef);\n readonly accordion = inject(Accordion, { optional: true });\n\n disabled = input(false, {\n transform: booleanAttribute\n });\n\n expanded = model(false);\n\n hideToggle = input(false, {\n transform: booleanAttribute\n });\n\n readonly opened = output<void>();\n readonly closed = output<void>();\n readonly expandedChange = output<boolean>();\n\n readonly id = `ngs-expansion-panel-${nextId++}`;\n readonly headerId = `ngs-expansion-panel-header-${nextId++}`;\n\n toggle(): void {\n if (this.expanded()) {\n this.close();\n } else {\n this.open();\n }\n }\n\n open(): void {\n if (!this.expanded()) {\n this.expanded.set(true);\n this.opened.emit();\n this._emitExpansionChange();\n }\n }\n\n close(): void {\n if (this.expanded()) {\n this.expanded.set(false);\n this.closed.emit();\n this._emitExpansionChange();\n }\n }\n\n private _emitExpansionChange(): void {\n this.expandedChange.emit(this.expanded());\n this._cdr.markForCheck();\n }\n\n _getHideToggle(): boolean {\n return this.hideToggle() \|\| (this.accordion?.hideToggle() ?? false);\n }\n\n _getExpandedState(): string {\n return this.expanded() ? 'expanded' : 'collapsed';\n }\n}\n","<ng-content select=\"ngs-expansion-panel-header\"/>\n<div class=\"ngs-expansion-panel-content\"\n role=\"region\"\n [class.ngs-expanded]=\"expanded()\"\n [attr.id]=\"id\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"ngs-expansion-panel-body\">\n <ng-content/>\n </div>\n <ng-content select=\"ngs-action-row\"/>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n input,\n booleanAttribute,\n AfterContentInit,\n OnDestroy,\n ChangeDetectorRef,\n inject,\n contentChildren\n} from '@angular/core';\nimport { outputToObservable, toObservable } from '@angular/core/rxjs-interop';\nimport { ExpansionPanel } from '../expansion-panel/expansion-panel';\nimport { merge, of, startWith, Subject, switchMap, takeUntil } from 'rxjs';\n\n@Component({\n selector: 'ngs-accordion',\n exportAs: 'ngsAccordion',\n standalone: true,\n templateUrl: './accordion.html',\n styleUrl: './accordion.scss',\n host: {\n 'class': 'ngs-accordion not-prose',\n '[class.ngs-accordion-multi]': 'multi()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Accordion implements AfterContentInit, OnDestroy {\n private readonly _destroyed = new Subject<void>();\n readonly _cdr = inject(ChangeDetectorRef);\n\n /** Whether the accordion should allow multiple expanded panels at a time. /\n multi = input(false, {\n transform: booleanAttribute\n });\n\n /* Whether the expansion indicator should be hidden. /\n hideToggle = input(false, {\n transform: booleanAttribute\n });\n\n readonly _panels = contentChildren(ExpansionPanel, { descendants: true });\n private readonly _panels$ = toObservable(this._panels);\n\n ngAfterContentInit() {\n this._panels$.pipe(\n startWith(this._panels()),\n switchMap(panels => {\n if (panels.length === 0) {\n return of(null);\n }\n return merge(...panels.map(panel =>\n outputToObservable(panel.expandedChange).pipe(\n switchMap(expanded => {\n if (expanded && !this.multi()) {\n this._closeAllExcept(panel);\n }\n this._cdr.markForCheck();\n return of(null);\n })\n )\n ));\n }),\n takeUntil(this._destroyed)\n ).subscribe();\n }\n\n ngOnDestroy() {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n openAll(): void {\n if (this.multi()) {\n this._panels().forEach(p => p.open());\n this._cdr.markForCheck();\n }\n }\n\n closeAll(): void {\n this._panels().forEach(p => p.close());\n this._cdr.markForCheck();\n }\n\n private _closeAllExcept(panel: ExpansionPanel) {\n this._panels().forEach(p => {\n if (p !== panel) {\n p.close();\n }\n });\n this._cdr.markForCheck();\n }\n}\n","<ng-content />\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Host,\n input,\n booleanAttribute,\n inject\n} from '@angular/core';\nimport { ExpansionPanel } from '../expansion-panel/expansion-panel';\n\n@Component({\n selector: 'ngs-expansion-panel-header',\n standalone: true,\n templateUrl: './expansion-panel-header.html',\n styleUrl: './expansion-panel-header.scss',\n host: {\n 'class': 'ngs-expansion-panel-header',\n 'role': 'button',\n '[attr.id]': 'panel.headerId',\n '[attr.tabindex]': 'panel.disabled() ? -1 : 0',\n '[attr.aria-controls]': 'panel.id',\n '[attr.aria-expanded]': 'panel.expanded()',\n '[attr.aria-disabled]': 'panel.disabled()',\n '[class.ngs-expanded]': 'panel.expanded()',\n '(click)': '_toggle()',\n '(keydown.enter)': '_toggle()',\n '(keydown.space)': '_toggle()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanelHeader {\n readonly panel = inject(ExpansionPanel);\n private _cdr = inject(ChangeDetectorRef);\n\n hideToggle = input(false, {\n transform: booleanAttribute\n });\n\n _toggle(): void {\n if (!this.panel.disabled()) {\n this.panel.toggle();\n this._cdr.markForCheck();\n\n if (this.panel.accordion) {\n this.panel.accordion._cdr.markForCheck();\n }\n }\n }\n\n _getExpandedState(): string {\n return this.panel._getExpandedState();\n }\n}\n","<span class=\"ngs-expansion-panel-header-content\">\n <ng-content select=\"ngs-panel-title\" />\n <ng-content select=\"ngs-panel-description\" />\n <ng-content />\n</span>\n\n@if (!hideToggle() && !panel._getHideToggle()) {\n <span class=\"ngs-expansion-indicator\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M480-345 240-585l36-36 204 204 204-204 36 36-240 240Z\"></path>\n </svg>\n </span>\n} @else {\n <span class=\"ngs-expansion-indicator-placeholder\"></span>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-expansion-panel-title',\n exportAs: 'ngsExpansionPanelTitle',\n templateUrl: './expansion-panel-title.html',\n styleUrl: './expansion-panel-title.scss',\n host: {\n 'class': 'ngs-expansion-panel-title'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanelTitle { }\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-expansion-panel-description',\n exportAs: 'ngsExpansionPanelDescription',\n templateUrl: './expansion-panel-description.html',\n styleUrl: './expansion-panel-description.scss',\n host: {\n 'class': 'ngs-expansion-panel-description'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanelDescription { }\n","<ng-content />\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-action-row',\n standalone: true,\n imports: [],\n templateUrl: './action-row.html',\n styleUrl: './action-row.scss',\n host: {\n 'class': 'ngs-action-row'\n }\n})\nexport class ActionRow {\n\n}\n","<ng-content />\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ngstarter-ui-components-expansion.mjs","sources":["../../../projects/components/expansion/src/expansion-panel/expansion-panel.ts","../../../projects/components/expansion/src/expansion-panel/expansion-panel.html","../../../projects/components/expansion/src/accordion/accordion.ts","../../../projects/components/expansion/src/accordion/accordion.html","../../../projects/components/expansion/src/expansion-panel-header/expansion-panel-header.ts","../../../projects/components/expansion/src/expansion-panel-header/expansion-panel-header.html","../../../projects/components/expansion/src/expansion-panel-title/expansion-panel-title.ts","../../../projects/components/expansion/src/expansion-panel-title/expansion-panel-title.html","../../../projects/components/expansion/src/expansion-panel-description/expansion-panel-description.ts","../../../projects/components/expansion/src/expansion-panel-description/expansion-panel-description.html","../../../projects/components/expansion/src/action-row/action-row.ts","../../../projects/components/expansion/src/action-row/action-row.html","../../../projects/components/expansion/ngstarter-ui-components-expansion.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n input,\n output,\n booleanAttribute,\n inject,\n Optional,\n SkipSelf,\n model\n} from '@angular/core';\nimport { Accordion } from '../accordion/accordion';\n\nlet nextId = 0;\n\n@Component({\n selector: 'ngs-expansion-panel',\n exportAs: 'ngsExpansionPanel',\n standalone: true,\n templateUrl: './expansion-panel.html',\n styleUrl: './expansion-panel.scss',\n host: {\n 'class': 'ngs-expansion-panel',\n '[class.ngs-expanded]': 'expanded()',\n '[class.ngs-expansion-panel-disabled]': 'disabled()',\n '[attr.id]': 'id',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanel {\n private _cdr = inject(ChangeDetectorRef);\n readonly accordion = inject(Accordion, { optional: true });\n\n disabled = input(false, {\n transform: booleanAttribute\n });\n\n expanded = model(false);\n\n hideToggle = input(false, {\n transform: booleanAttribute\n });\n\n readonly opened = output<void>();\n readonly closed = output<void>();\n readonly expandedChange = output<boolean>();\n\n readonly id = `ngs-expansion-panel-${nextId++}`;\n readonly headerId = `ngs-expansion-panel-header-${nextId++}`;\n\n toggle(): void {\n if (this.expanded()) {\n this.close();\n } else {\n this.open();\n }\n }\n\n open(): void {\n if (!this.expanded()) {\n this.expanded.set(true);\n this.opened.emit();\n this._emitExpansionChange();\n }\n }\n\n close(): void {\n if (this.expanded()) {\n this.expanded.set(false);\n this.closed.emit();\n this._emitExpansionChange();\n }\n }\n\n private _emitExpansionChange(): void {\n this.expandedChange.emit(this.expanded());\n this._cdr.markForCheck();\n }\n\n _getHideToggle(): boolean {\n return this.hideToggle() \|\| (this.accordion?.hideToggle() ?? false);\n }\n\n _getExpandedState(): string {\n return this.expanded() ? 'expanded' : 'collapsed';\n }\n}\n","<ng-content select=\"ngs-expansion-panel-header\"/>\n<div class=\"ngs-expansion-panel-content\"\n role=\"region\"\n [class.ngs-expanded]=\"expanded()\"\n [attr.id]=\"id\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"ngs-expansion-panel-body\">\n <ng-content/>\n </div>\n <ng-content select=\"ngs-action-row\"/>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n input,\n booleanAttribute,\n AfterContentInit,\n OnDestroy,\n ChangeDetectorRef,\n inject,\n contentChildren\n} from '@angular/core';\nimport { outputToObservable, toObservable } from '@angular/core/rxjs-interop';\nimport { ExpansionPanel } from '../expansion-panel/expansion-panel';\nimport { merge, of, startWith, Subject, switchMap, takeUntil } from 'rxjs';\n\n@Component({\n selector: 'ngs-accordion',\n exportAs: 'ngsAccordion',\n standalone: true,\n templateUrl: './accordion.html',\n styleUrl: './accordion.scss',\n host: {\n 'class': 'ngs-accordion not-prose',\n '[class.ngs-accordion-multi]': 'multi()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Accordion implements AfterContentInit, OnDestroy {\n private readonly _destroyed = new Subject<void>();\n readonly _cdr = inject(ChangeDetectorRef);\n\n /** Whether the accordion should allow multiple expanded panels at a time. /\n multi = input(false, {\n transform: booleanAttribute\n });\n\n /* Whether the expansion indicator should be hidden. /\n hideToggle = input(false, {\n transform: booleanAttribute\n });\n\n readonly _panels = contentChildren(ExpansionPanel, { descendants: true });\n private readonly _panels$ = toObservable(this._panels);\n\n ngAfterContentInit() {\n this._panels$.pipe(\n startWith(this._panels()),\n switchMap(panels => {\n if (panels.length === 0) {\n return of(null);\n }\n return merge(...panels.map(panel =>\n outputToObservable(panel.expandedChange).pipe(\n switchMap(expanded => {\n if (expanded && !this.multi()) {\n this._closeAllExcept(panel);\n }\n this._cdr.markForCheck();\n return of(null);\n })\n )\n ));\n }),\n takeUntil(this._destroyed)\n ).subscribe();\n }\n\n ngOnDestroy() {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n openAll(): void {\n if (this.multi()) {\n this._panels().forEach(p => p.open());\n this._cdr.markForCheck();\n }\n }\n\n closeAll(): void {\n this._panels().forEach(p => p.close());\n this._cdr.markForCheck();\n }\n\n private _closeAllExcept(panel: ExpansionPanel) {\n this._panels().forEach(p => {\n if (p !== panel) {\n p.close();\n }\n });\n this._cdr.markForCheck();\n }\n}\n","<ng-content />\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Host,\n input,\n booleanAttribute,\n inject\n} from '@angular/core';\nimport { ExpansionPanel } from '../expansion-panel/expansion-panel';\n\n@Component({\n selector: 'ngs-expansion-panel-header',\n standalone: true,\n templateUrl: './expansion-panel-header.html',\n styleUrl: './expansion-panel-header.scss',\n host: {\n 'class': 'ngs-expansion-panel-header',\n 'role': 'button',\n '[attr.id]': 'panel.headerId',\n '[attr.tabindex]': 'panel.disabled() ? -1 : 0',\n '[attr.aria-controls]': 'panel.id',\n '[attr.aria-expanded]': 'panel.expanded()',\n '[attr.aria-disabled]': 'panel.disabled()',\n '[class.ngs-expanded]': 'panel.expanded()',\n '(click)': '_toggle()',\n '(keydown.enter)': '_toggle()',\n '(keydown.space)': '_toggle()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanelHeader {\n readonly panel = inject(ExpansionPanel);\n private _cdr = inject(ChangeDetectorRef);\n\n hideToggle = input(false, {\n transform: booleanAttribute\n });\n\n _toggle(): void {\n if (!this.panel.disabled()) {\n this.panel.toggle();\n this._cdr.markForCheck();\n\n if (this.panel.accordion) {\n this.panel.accordion._cdr.markForCheck();\n }\n }\n }\n\n _getExpandedState(): string {\n return this.panel._getExpandedState();\n }\n}\n","<span class=\"ngs-expansion-panel-header-content\">\n <ng-content select=\"ngs-panel-title\" />\n <ng-content select=\"ngs-panel-description\" />\n <ng-content />\n</span>\n\n@if (!hideToggle() && !panel._getHideToggle()) {\n <span class=\"ngs-expansion-indicator\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M480-345 240-585l36-36 204 204 204-204 36 36-240 240Z\"></path>\n </svg>\n </span>\n} @else {\n <span class=\"ngs-expansion-indicator-placeholder\"></span>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-expansion-panel-title',\n exportAs: 'ngsExpansionPanelTitle',\n templateUrl: './expansion-panel-title.html',\n styleUrl: './expansion-panel-title.scss',\n host: {\n 'class': 'ngs-expansion-panel-title'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanelTitle { }\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-expansion-panel-description',\n exportAs: 'ngsExpansionPanelDescription',\n templateUrl: './expansion-panel-description.html',\n styleUrl: './expansion-panel-description.scss',\n host: {\n 'class': 'ngs-expansion-panel-description'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ExpansionPanelDescription { }\n","<ng-content />\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-action-row',\n standalone: true,\n imports: [],\n templateUrl: './action-row.html',\n styleUrl: './action-row.scss',\n host: {\n 'class': 'ngs-action-row'\n }\n})\nexport class ActionRow {\n\n}\n","<ng-content />\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-filter-builder.mjs CHANGED Viewed

@@ -312,7 +312,7 @@ class FilterBuilder {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilterBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FilterBuilder, isStandalone: true, selector: "ngs-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: "ngs-filter-builder" }, queries: [{ propertyName: "_customOperationDefs", predicate: FilterBuilderOperationDefDirective, isSignal: true }], viewQueries: [{ propertyName: "_prebuiltOperationDefs", predicate: FilterBuilderOperationDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsFilterBuilder"], 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            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\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                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-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        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--color-on-surface);--ngs-filter-builder-group-operation-bg: var(--color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: .5rem;--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--color-border);--ngs-filter-builder-group-add-color: var(--color-primary);--ngs-filter-builder-group-add-hover-color: var(--color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: .5rem;--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: .5rem;--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--color-on-surface);--ngs-filter-builder-condition-value-bg: var(--color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: .5rem;--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--color-error);--ngs-filter-builder-condition-remove-hover-color: var(--color-error);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 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(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-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(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }, { kind: "directive", type: MenuOptionGroupDirective, selector: "[ngsMenuOptionGroup]", inputs: ["multiple"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }, { kind: "directive", type: FocusElementDirective, selector: "[ngsFocusElement]", inputs: ["checkChildren"], outputs: ["elementFocused", "elementBlurred"], exportAs: ["ngsFocusElement"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: FilterBuilderOperationDefDirective, selector: "[ngsFilterBuilderOperationDef]", inputs: ["ngsFilterBuilderOperationDef", "allowedDataTypes"] }, { kind: "directive", type: FilterBuilderOperationNameDirective, selector: "[ngsFilterBuilderOperationName]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FilterBuilder, isStandalone: true, selector: "ngs-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: "ngs-filter-builder" }, queries: [{ propertyName: "_customOperationDefs", predicate: FilterBuilderOperationDefDirective, isSignal: true }], viewQueries: [{ propertyName: "_prebuiltOperationDefs", predicate: FilterBuilderOperationDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsFilterBuilder"], 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            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\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                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-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        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--ngs-color-on-surface);--ngs-filter-builder-group-operation-bg: var(--ngs-color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--ngs-color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--ngs-color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--ngs-color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--ngs-color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--ngs-color-border);--ngs-filter-builder-group-add-color: var(--ngs-color-primary);--ngs-filter-builder-group-add-hover-color: var(--ngs-color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--ngs-color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--ngs-color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--ngs-color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--ngs-color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--ngs-color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--ngs-color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--ngs-color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--ngs-color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--ngs-color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--ngs-color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--ngs-color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--ngs-color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--ngs-color-on-surface);--ngs-filter-builder-condition-value-bg: var(--ngs-color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--ngs-color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--ngs-color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--ngs-color-danger);--ngs-filter-builder-condition-remove-hover-color: var(--ngs-color-danger);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 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(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-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(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--ngs-color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--ngs-color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--ngs-color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--ngs-color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--ngs-color-neutral-50)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }, { kind: "directive", type: MenuOptionGroupDirective, selector: "[ngsMenuOptionGroup]", inputs: ["multiple"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }, { kind: "directive", type: FocusElementDirective, selector: "[ngsFocusElement]", inputs: ["checkChildren"], outputs: ["elementFocused", "elementBlurred"], exportAs: ["ngsFocusElement"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: FilterBuilderOperationDefDirective, selector: "[ngsFilterBuilderOperationDef]", inputs: ["ngsFilterBuilderOperationDef", "allowedDataTypes"] }, { kind: "directive", type: FilterBuilderOperationNameDirective, selector: "[ngsFilterBuilderOperationName]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilterBuilder, decorators: [{
             type: Component,
@@ -335,7 +335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         FilterBuilderOperationNameDirective
                     ], host: {
                         'class': 'ngs-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            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\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                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-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        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--color-on-surface);--ngs-filter-builder-group-operation-bg: var(--color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: .5rem;--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--color-border);--ngs-filter-builder-group-add-color: var(--color-primary);--ngs-filter-builder-group-add-hover-color: var(--color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: .5rem;--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: .5rem;--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--color-on-surface);--ngs-filter-builder-condition-value-bg: var(--color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: .5rem;--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--color-error);--ngs-filter-builder-condition-remove-hover-color: var(--color-error);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 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(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-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(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.2.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            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\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                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-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        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--ngs-color-on-surface);--ngs-filter-builder-group-operation-bg: var(--ngs-color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--ngs-color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--ngs-color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--ngs-color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--ngs-color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--ngs-color-border);--ngs-filter-builder-group-add-color: var(--ngs-color-primary);--ngs-filter-builder-group-add-hover-color: var(--ngs-color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--ngs-color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--ngs-color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--ngs-color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--ngs-color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--ngs-color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--ngs-color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--ngs-color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--ngs-color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--ngs-color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--ngs-color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--ngs-color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--ngs-color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--ngs-color-on-surface);--ngs-filter-builder-condition-value-bg: var(--ngs-color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: var(--ngs-radius-lg);--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--ngs-color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--ngs-color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--ngs-color-danger);--ngs-filter-builder-condition-remove-hover-color: var(--ngs-color-danger);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 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(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-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(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-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(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--ngs-color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--ngs-color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--ngs-color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--ngs-color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--ngs-color-neutral-50)}\n/*! tailwindcss v4.2.2 | 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"] }] } });
 /**