npm - @shival99/z-ui - Versions diffs - 2.1.32 → 2.2.0 - Mend

@shival99/z-ui 2.1.32 → 2.2.0

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 (104) hide show

package/fesm2022/shival99-z-ui-components-z-empty.mjs CHANGED Viewed

@@ -80,23 +80,35 @@ const ERROR_MESSAGE_KEY = 'i18n_z_ui_empty_error_message';
 const ERROR_DESCRIPTION_KEY = 'i18n_z_ui_empty_error_description';
 class ZEmptyComponent {
     _translate = inject(ZTranslateService);
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    zType = input('empty', ...(ngDevMode ? [{ debugName: "zType" }] : []));
-    zIcon = input('lucidePackageOpen', ...(ngDevMode ? [{ debugName: "zIcon" }] : []));
-    zIconSize = input('40', ...(ngDevMode ? [{ debugName: "zIconSize" }] : []));
-    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
-    zMessage = input('', ...(ngDevMode ? [{ debugName: "zMessage" }] : []));
-    zDescription = input('', ...(ngDevMode ? [{ debugName: "zDescription" }] : []));
-    containerClasses = computed(() => zMergeClasses(zEmptyContainerVariants({ zSize: this.zSize(), zType: this.zType() }), this.class()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
-    iconClasses = computed(() => zEmptyIconVariants({ zSize: this.zSize(), zType: this.zType() }), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
-    messageClasses = computed(() => zEmptyMessageVariants({ zSize: this.zSize(), zType: this.zType() }), ...(ngDevMode ? [{ debugName: "messageClasses" }] : []));
-    descriptionClasses = computed(() => zEmptyDescriptionVariants({ zSize: this.zSize(), zType: this.zType() }), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zType = input('empty', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zType" }] : /* istanbul ignore next */ []));
+    zIcon = input('lucidePackageOpen', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zIcon" }] : /* istanbul ignore next */ []));
+    zIconSize = input('40', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zIconSize" }] : /* istanbul ignore next */ []));
+    zSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMessage" }] : /* istanbul ignore next */ []));
+    zDescription = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDescription" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => zMergeClasses(zEmptyContainerVariants({ zSize: this.zSize(), zType: this.zType() }), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => zEmptyIconVariants({ zSize: this.zSize(), zType: this.zType() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    messageClasses = computed(() => zEmptyMessageVariants({ zSize: this.zSize(), zType: this.zType() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageClasses" }] : /* istanbul ignore next */ []));
+    descriptionClasses = computed(() => zEmptyDescriptionVariants({ zSize: this.zSize(), zType: this.zType() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
     displayIcon = computed(() => {
         if (this.zType() === 'error') {
             return ERROR_ICON;
         }
         return this.zIcon();
-    }, ...(ngDevMode ? [{ debugName: "displayIcon" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayIcon" }] : /* istanbul ignore next */ []));
     displayMessage = computed(() => {
         this._translate.currentLang();
         const type = this.zType();
@@ -108,7 +120,8 @@ class ZEmptyComponent {
             return message;
         }
         return this._translate.instant('i18n_z_ui_empty_no_data');
-    }, ...(ngDevMode ? [{ debugName: "displayMessage" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMessage" }] : /* istanbul ignore next */ []));
     displayDescription = computed(() => {
         this._translate.currentLang();
         const type = this.zType();
@@ -117,11 +130,12 @@ class ZEmptyComponent {
             return this._translate.instant(ERROR_DESCRIPTION_KEY);
         }
         return description;
-    }, ...(ngDevMode ? [{ debugName: "displayDescription" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZEmptyComponent, isStandalone: true, selector: "z-empty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zIcon: { classPropertyName: "zIcon", publicName: "zIcon", isSignal: true, isRequired: false, transformFunction: null }, zIconSize: { classPropertyName: "zIconSize", publicName: "zIconSize", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zMessage: { classPropertyName: "zMessage", publicName: "zMessage", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-empty" }, ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <z-icon [zType]=\"displayIcon()\" [zSize]=\"zIconSize()\" [class]=\"iconClasses()\" />\n  <p [class]=\"messageClasses()\">{{ displayMessage() | translate }}</p>\n  @if (displayDescription()) {\n    <p [class]=\"descriptionClasses()\">{{ displayDescription() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayDescription" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZEmptyComponent, isStandalone: true, selector: "z-empty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zIcon: { classPropertyName: "zIcon", publicName: "zIcon", isSignal: true, isRequired: false, transformFunction: null }, zIconSize: { classPropertyName: "zIconSize", publicName: "zIconSize", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zMessage: { classPropertyName: "zMessage", publicName: "zMessage", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-empty" }, ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <z-icon [zType]=\"displayIcon()\" [zSize]=\"zIconSize()\" [class]=\"iconClasses()\" />\n  <p [class]=\"messageClasses()\">{{ displayMessage() | translate }}</p>\n  @if (displayDescription()) {\n    <p [class]=\"descriptionClasses()\">{{ displayDescription() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZEmptyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZEmptyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-empty', imports: [ZIconComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'z-empty',

package/fesm2022/shival99-z-ui-components-z-empty.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shival99-z-ui-components-z-empty.mjs","sources":["../../../../libs/core-ui/components/z-empty/z-empty.variants.ts","../../../../libs/core-ui/components/z-empty/z-empty.component.ts","../../../../libs/core-ui/components/z-empty/z-empty.component.html","../../../../libs/core-ui/components/z-empty/shival99-z-ui-components-z-empty.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zEmptyContainerVariants = cva('col-span-full flex flex-col items-center justify-center px-2', {\n variants: {\n zSize: {\n sm: 'py-8',\n default: 'py-12',\n lg: 'py-16',\n },\n zType: {\n empty: '',\n error: 'bg-destructive/5 rounded-lg border border-destructive/20',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport const zEmptyIconVariants = cva('text-center', {\n variants: {\n zSize: {\n sm: 'mb-2',\n default: 'mb-4',\n lg: 'mb-6',\n },\n zType: {\n empty: 'text-muted-foreground/50',\n error: 'text-destructive/70',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport const zEmptyMessageVariants = cva('text-center font-medium', {\n variants: {\n zSize: {\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n },\n zType: {\n empty: 'text-muted-foreground',\n error: 'text-destructive',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport const zEmptyDescriptionVariants = cva('mt-1.5 text-center', {\n variants: {\n zSize: {\n sm: 'text-xs',\n default: 'text-xs',\n lg: 'text-sm',\n },\n zType: {\n empty: 'text-muted-foreground/70',\n error: 'text-destructive/60',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport type ZEmptyVariants = VariantProps<typeof zEmptyContainerVariants>;\n","import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport type { ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZEmptyIconSize, ZEmptyType } from './z-empty.types';\nimport {\n zEmptyContainerVariants,\n zEmptyDescriptionVariants,\n zEmptyIconVariants,\n zEmptyMessageVariants,\n type ZEmptyVariants,\n} from './z-empty.variants';\n\nconst ERROR_ICON: ZIcon = 'lucideServerCrash';\nconst ERROR_MESSAGE_KEY = 'i18n_z_ui_empty_error_message';\nconst ERROR_DESCRIPTION_KEY = 'i18n_z_ui_empty_error_description';\n\n@Component({\n selector: 'z-empty',\n imports: [ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-empty.component.html',\n styleUrl: './z-empty.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-empty',\n },\n})\nexport class ZEmptyComponent {\n private readonly _translate = inject(ZTranslateService);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZEmptyType>('empty');\n public readonly zIcon = input<ZIcon>('lucidePackageOpen');\n public readonly zIconSize = input<ZEmptyIconSize>('40');\n public readonly zSize = input<ZEmptyVariants['zSize']>('default');\n public readonly zMessage = input<string>('');\n public readonly zDescription = input<string>('');\n\n protected readonly containerClasses = computed(() =>\n zMergeClasses(zEmptyContainerVariants({ zSize: this.zSize(), zType: this.zType() }), this.class())\n );\n\n protected readonly iconClasses = computed(() => zEmptyIconVariants({ zSize: this.zSize(), zType: this.zType() }));\n protected readonly messageClasses = computed(() =>\n zEmptyMessageVariants({ zSize: this.zSize(), zType: this.zType() })\n );\n\n protected readonly descriptionClasses = computed(() =>\n zEmptyDescriptionVariants({ zSize: this.zSize(), zType: this.zType() })\n );\n\n protected readonly displayIcon = computed<ZIcon>(() => {\n if (this.zType() === 'error') {\n return ERROR_ICON;\n }\n return this.zIcon();\n });\n\n protected readonly displayMessage = computed(() => {\n this._translate.currentLang();\n const type = this.zType();\n const message = this.zMessage();\n\n if (type === 'error') {\n return this._translate.instant(ERROR_MESSAGE_KEY);\n }\n\n if (message) {\n return message;\n }\n return this._translate.instant('i18n_z_ui_empty_no_data');\n });\n\n protected readonly displayDescription = computed(() => {\n this._translate.currentLang();\n const type = this.zType();\n const description = this.zDescription();\n\n if (type === 'error') {\n return this._translate.instant(ERROR_DESCRIPTION_KEY);\n }\n\n return description;\n });\n}\n","<div [class]=\"containerClasses()\">\n <z-icon [zType]=\"displayIcon()\" [zSize]=\"zIconSize()\" [class]=\"iconClasses()\" />\n <p [class]=\"messageClasses()\">{{ displayMessage() \| translate }}</p>\n @if (displayDescription()) {\n <p [class]=\"descriptionClasses()\">{{ displayDescription() \| translate }}</p>\n }\n <ng-content />\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"shival99-z-ui-components-z-empty.mjs","sources":["../../../../libs/core-ui/components/z-empty/z-empty.variants.ts","../../../../libs/core-ui/components/z-empty/z-empty.component.ts","../../../../libs/core-ui/components/z-empty/z-empty.component.html","../../../../libs/core-ui/components/z-empty/shival99-z-ui-components-z-empty.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zEmptyContainerVariants = cva('col-span-full flex flex-col items-center justify-center px-2', {\n variants: {\n zSize: {\n sm: 'py-8',\n default: 'py-12',\n lg: 'py-16',\n },\n zType: {\n empty: '',\n error: 'bg-destructive/5 rounded-lg border border-destructive/20',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport const zEmptyIconVariants = cva('text-center', {\n variants: {\n zSize: {\n sm: 'mb-2',\n default: 'mb-4',\n lg: 'mb-6',\n },\n zType: {\n empty: 'text-muted-foreground/50',\n error: 'text-destructive/70',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport const zEmptyMessageVariants = cva('text-center font-medium', {\n variants: {\n zSize: {\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n },\n zType: {\n empty: 'text-muted-foreground',\n error: 'text-destructive',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport const zEmptyDescriptionVariants = cva('mt-1.5 text-center', {\n variants: {\n zSize: {\n sm: 'text-xs',\n default: 'text-xs',\n lg: 'text-sm',\n },\n zType: {\n empty: 'text-muted-foreground/70',\n error: 'text-destructive/60',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zType: 'empty',\n },\n});\n\nexport type ZEmptyVariants = VariantProps<typeof zEmptyContainerVariants>;\n","import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport type { ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZEmptyIconSize, ZEmptyType } from './z-empty.types';\nimport {\n zEmptyContainerVariants,\n zEmptyDescriptionVariants,\n zEmptyIconVariants,\n zEmptyMessageVariants,\n type ZEmptyVariants,\n} from './z-empty.variants';\n\nconst ERROR_ICON: ZIcon = 'lucideServerCrash';\nconst ERROR_MESSAGE_KEY = 'i18n_z_ui_empty_error_message';\nconst ERROR_DESCRIPTION_KEY = 'i18n_z_ui_empty_error_description';\n\n@Component({\n selector: 'z-empty',\n imports: [ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-empty.component.html',\n styleUrl: './z-empty.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-empty',\n },\n})\nexport class ZEmptyComponent {\n private readonly _translate = inject(ZTranslateService);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZEmptyType>('empty');\n public readonly zIcon = input<ZIcon>('lucidePackageOpen');\n public readonly zIconSize = input<ZEmptyIconSize>('40');\n public readonly zSize = input<ZEmptyVariants['zSize']>('default');\n public readonly zMessage = input<string>('');\n public readonly zDescription = input<string>('');\n\n protected readonly containerClasses = computed(() =>\n zMergeClasses(zEmptyContainerVariants({ zSize: this.zSize(), zType: this.zType() }), this.class())\n );\n\n protected readonly iconClasses = computed(() => zEmptyIconVariants({ zSize: this.zSize(), zType: this.zType() }));\n protected readonly messageClasses = computed(() =>\n zEmptyMessageVariants({ zSize: this.zSize(), zType: this.zType() })\n );\n\n protected readonly descriptionClasses = computed(() =>\n zEmptyDescriptionVariants({ zSize: this.zSize(), zType: this.zType() })\n );\n\n protected readonly displayIcon = computed<ZIcon>(() => {\n if (this.zType() === 'error') {\n return ERROR_ICON;\n }\n return this.zIcon();\n });\n\n protected readonly displayMessage = computed(() => {\n this._translate.currentLang();\n const type = this.zType();\n const message = this.zMessage();\n\n if (type === 'error') {\n return this._translate.instant(ERROR_MESSAGE_KEY);\n }\n\n if (message) {\n return message;\n }\n return this._translate.instant('i18n_z_ui_empty_no_data');\n });\n\n protected readonly displayDescription = computed(() => {\n this._translate.currentLang();\n const type = this.zType();\n const description = this.zDescription();\n\n if (type === 'error') {\n return this._translate.instant(ERROR_DESCRIPTION_KEY);\n }\n\n return description;\n });\n}\n","<div [class]=\"containerClasses()\">\n <z-icon [zType]=\"displayIcon()\" [zSize]=\"zIconSize()\" [class]=\"iconClasses()\" />\n <p [class]=\"messageClasses()\">{{ displayMessage() \| translate }}</p>\n @if (displayDescription()) {\n <p [class]=\"descriptionClasses()\">{{ displayDescription() \| translate }}</p>\n }\n <ng-content />\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/shival99-z-ui-components-z-filter.mjs CHANGED Viewed

@@ -223,10 +223,10 @@ class ZFilterFieldPipe {
         const fieldsMap = getFieldsMap(fields);
         return fieldsMap[filter.field];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterFieldPipe, isStandalone: true, name: "zFilterField" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterFieldPipe, isStandalone: true, name: "zFilterField" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterFieldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterFieldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterField',
@@ -248,10 +248,10 @@ class ZFilterInputPatternPipe {
                 return field.pattern || '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterInputPatternPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterInputPatternPipe, isStandalone: true, name: "zFilterInputPattern" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterInputPatternPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterInputPatternPipe, isStandalone: true, name: "zFilterInputPattern" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterInputPatternPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterInputPatternPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterInputPattern',
@@ -264,10 +264,10 @@ class ZFilterIsBetweenOperatorPipe {
     transform(filter) {
         return filter.operator === 'between' || filter.operator === 'not_between';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, isStandalone: true, name: "zFilterIsBetweenOperator" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, isStandalone: true, name: "zFilterIsBetweenOperator" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterIsBetweenOperator',
@@ -281,10 +281,10 @@ class ZFilterIsValueHiddenPipe {
         const { operator } = filter;
         return operator === 'is_empty' || operator === 'is_not_empty';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsValueHiddenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsValueHiddenPipe, isStandalone: true, name: "zFilterIsValueHidden" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterIsValueHiddenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterIsValueHiddenPipe, isStandalone: true, name: "zFilterIsValueHidden" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsValueHiddenPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterIsValueHiddenPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterIsValueHidden',
@@ -304,10 +304,10 @@ class ZFilterOperatorLabelPipe {
         const op = operators.find(o => o.value === filter.operator);
         return op?.label || formatOperator(filter.operator);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorLabelPipe, isStandalone: true, name: "zFilterOperatorLabel" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterOperatorLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterOperatorLabelPipe, isStandalone: true, name: "zFilterOperatorLabel" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterOperatorLabelPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterOperatorLabel',
@@ -325,10 +325,10 @@ class ZFilterOperatorsPipe {
         }
         return getOperatorsForField(field, filter.values, i18n);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorsPipe, isStandalone: true, name: "zFilterOperators" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterOperatorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterOperatorsPipe, isStandalone: true, name: "zFilterOperators" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterOperatorsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterOperators',
@@ -346,10 +346,10 @@ class ZFilterSelectedOptionsPipe {
         }
         return field.options.filter(opt => filter.values.includes(opt.value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterSelectedOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterSelectedOptionsPipe, isStandalone: true, name: "zFilterSelectedOptions" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterSelectedOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterSelectedOptionsPipe, isStandalone: true, name: "zFilterSelectedOptions" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterSelectedOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterSelectedOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterSelectedOptions',
@@ -367,10 +367,10 @@ class ZFilterUnselectedOptionsPipe {
         }
         return field.options.filter(opt => !filter.values.includes(opt.value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterUnselectedOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterUnselectedOptionsPipe, isStandalone: true, name: "zFilterUnselectedOptions" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterUnselectedOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZFilterUnselectedOptionsPipe, isStandalone: true, name: "zFilterUnselectedOptions" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterUnselectedOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterUnselectedOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zFilterUnselectedOptions',
@@ -521,25 +521,40 @@ const zFilterBetweenVariants = cva('text-muted-foreground flex items-center', {
 });
 class ZFilterComponent {
-    addButtonTemplate = contentChild('addButton', ...(ngDevMode ? [{ debugName: "addButtonTemplate" }] : []));
+    addButtonTemplate = contentChild('addButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addButtonTemplate" }] : /* istanbul ignore next */ []));
     zFiltersChange = output();
     zFilterAdd = output();
     zFilterRemove = output();
     zFilterUpdate = output();
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    zFilters = input.required(...(ngDevMode ? [{ debugName: "zFilters" }] : []));
-    zFields = input.required(...(ngDevMode ? [{ debugName: "zFields" }] : []));
-    zSize = input('md', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
-    zI18n = input({}, ...(ngDevMode ? [{ debugName: "zI18n" }] : []));
-    zShowAddButton = input(true, ...(ngDevMode ? [{ debugName: "zShowAddButton" }] : []));
-    zAllowMultiple = input(true, ...(ngDevMode ? [{ debugName: "zAllowMultiple" }] : []));
-    zAddButtonIcon = input('lucidePlus', ...(ngDevMode ? [{ debugName: "zAddButtonIcon" }] : []));
-    zAddButtonText = input(...(ngDevMode ? [undefined, { debugName: "zAddButtonText" }] : []));
-    addFilterOpen = signal(false, ...(ngDevMode ? [{ debugName: "addFilterOpen" }] : []));
-    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
-    operatorPopoverOpen = signal(null, ...(ngDevMode ? [{ debugName: "operatorPopoverOpen" }] : []));
-    valuePopoverOpen = signal(null, ...(ngDevMode ? [{ debugName: "valuePopoverOpen" }] : []));
-    addFilterSearchInput = viewChild('addFilterSearchInput', ...(ngDevMode ? [{ debugName: "addFilterSearchInput" }] : []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zFilters = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFilters" }] : /* istanbul ignore next */ []));
+    zFields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFields" }] : /* istanbul ignore next */ []));
+    zSize = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zI18n = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zI18n" }] : /* istanbul ignore next */ []));
+    zShowAddButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowAddButton" }] : /* istanbul ignore next */ []));
+    zAllowMultiple = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAllowMultiple" }] : /* istanbul ignore next */ []));
+    zAddButtonIcon = input('lucidePlus', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAddButtonIcon" }] : /* istanbul ignore next */ []));
+    zAddButtonText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "zAddButtonText" }] : /* istanbul ignore next */ []));
+    addFilterOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addFilterOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    operatorPopoverOpen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorPopoverOpen" }] : /* istanbul ignore next */ []));
+    valuePopoverOpen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valuePopoverOpen" }] : /* istanbul ignore next */ []));
+    addFilterSearchInput = viewChild('addFilterSearchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addFilterSearchInput" }] : /* istanbul ignore next */ []));
     focusSearchInput() {
         setTimeout(() => {
             this.addFilterSearchInput()?.nativeElement?.focus();
@@ -560,8 +575,10 @@ class ZFilterComponent {
             placeholders: { ...DEFAULT_FILTER_I18N.placeholders, ...custom.placeholders },
             validation: { ...DEFAULT_FILTER_I18N.validation, ...custom.validation },
         };
-    }, ...(ngDevMode ? [{ debugName: "i18n" }] : []));
-    fieldsMap = computed(() => getFieldsMap(this.zFields()), ...(ngDevMode ? [{ debugName: "fieldsMap" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "i18n" }] : /* istanbul ignore next */ []));
+    fieldsMap = computed(() => getFieldsMap(this.zFields()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldsMap" }] : /* istanbul ignore next */ []));
     selectableFields = computed(() => {
         const flatFields = flattenFields(this.zFields());
         const filters = this.zFilters();
@@ -574,14 +591,16 @@ class ZFilterComponent {
             }
             return !filters.some(filter => filter.field === field.key);
         });
-    }, ...(ngDevMode ? [{ debugName: "selectableFields" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectableFields" }] : /* istanbul ignore next */ []));
     filteredFields = computed(() => {
         const query = this.searchQuery().toLowerCase().trim();
         if (!query) {
             return this.selectableFields();
         }
         return this.selectableFields().filter(field => field.label?.toLowerCase().includes(query) || field.key?.toLowerCase().includes(query));
-    }, ...(ngDevMode ? [{ debugName: "filteredFields" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredFields" }] : /* istanbul ignore next */ []));
     groupedFields = computed(() => {
         const allFields = this.zFields();
         const query = this.searchQuery().toLowerCase().trim();
@@ -622,7 +641,8 @@ class ZFilterComponent {
             groups.push({ group: groupName, fields: [field] });
         }
         return groups;
-    }, ...(ngDevMode ? [{ debugName: "groupedFields" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupedFields" }] : /* istanbul ignore next */ []));
     buttonSize = computed(() => {
         const size = this.zSize();
         if (size === 'sm') {
@@ -632,7 +652,8 @@ class ZFilterComponent {
             return 'lg';
         }
         return 'default';
-    }, ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
     calendarSize = computed(() => {
         const size = this.zSize();
         if (size === 'sm') {
@@ -642,14 +663,16 @@ class ZFilterComponent {
             return 'lg';
         }
         return 'default';
-    }, ...(ngDevMode ? [{ debugName: "calendarSize" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarSize" }] : /* istanbul ignore next */ []));
     dateValueMap = computed(() => {
         const map = {};
         for (const filter of this.zFilters()) {
             map[filter.id] = this._parseDateValue(filter.values[0]);
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "dateValueMap" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateValueMap" }] : /* istanbul ignore next */ []));
     dateRangeValueMap = computed(() => {
         const map = {};
         for (const filter of this.zFilters()) {
@@ -658,22 +681,26 @@ class ZFilterComponent {
             map[filter.id] = start || end ? { start, end } : null;
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "dateRangeValueMap" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateRangeValueMap" }] : /* istanbul ignore next */ []));
     timeValueMap = computed(() => {
         const map = {};
         for (const filter of this.zFilters()) {
             map[filter.id] = this._parseTimeValue(filter.values[0]);
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "timeValueMap" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeValueMap" }] : /* istanbul ignore next */ []));
     dateTimeValueMap = computed(() => {
         const map = {};
         for (const filter of this.zFilters()) {
             map[filter.id] = this._parseDateTimeValue(filter.values[0]);
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "dateTimeValueMap" }] : []));
-    hostClasses = computed(() => zMergeClasses(zFilterContainerVariants({ size: this.zSize() }), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTimeValueMap" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => zMergeClasses(zFilterContainerVariants({ size: this.zSize() }), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     getItemClasses() {
         return zFilterItemVariants({ size: this.zSize() });
     }
@@ -907,10 +934,10 @@ class ZFilterComponent {
         const minutes = String(value.getMinutes()).padStart(2, '0');
         return `${year}-${month}-${day}T${hours}:${minutes}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZFilterComponent, isStandalone: true, selector: "z-filter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zFilters: { classPropertyName: "zFilters", publicName: "zFilters", isSignal: true, isRequired: true, transformFunction: null }, zFields: { classPropertyName: "zFields", publicName: "zFields", isSignal: true, isRequired: true, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zI18n: { classPropertyName: "zI18n", publicName: "zI18n", isSignal: true, isRequired: false, transformFunction: null }, zShowAddButton: { classPropertyName: "zShowAddButton", publicName: "zShowAddButton", isSignal: true, isRequired: false, transformFunction: null }, zAllowMultiple: { classPropertyName: "zAllowMultiple", publicName: "zAllowMultiple", isSignal: true, isRequired: false, transformFunction: null }, zAddButtonIcon: { classPropertyName: "zAddButtonIcon", publicName: "zAddButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, zAddButtonText: { classPropertyName: "zAddButtonText", publicName: "zAddButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zFiltersChange: "zFiltersChange", zFilterAdd: "zFilterAdd", zFilterRemove: "zFilterRemove", zFilterUpdate: "zFilterUpdate" }, host: { attributes: { "data-slot": "z-filter" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "addButtonTemplate", first: true, predicate: ["addButton"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "addFilterSearchInput", first: true, predicate: ["addFilterSearchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Add Filter Button -->\n@if (zShowAddButton() && selectableFields().length > 0) {\n  @if (addButtonTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"addButtonTemplate()!\" />\n  } @else {\n    <button\n      z-button\n      zType=\"outline\"\n      [zSize]=\"buttonSize()\"\n      z-popover\n      [zPopoverContent]=\"addFilterPopover\"\n      zTrigger=\"click\"\n      zPosition=\"bottom-left\"\n      [zOffset]=\"6\"\n      (zShow)=\"addFilterOpen.set(true); focusSearchInput()\"\n      (zHide)=\"addFilterOpen.set(false); searchQuery.set('')\">\n      <z-icon [zType]=\"zAddButtonIcon()\" zSize=\"14\" />\n      {{ zAddButtonText() || i18n().addFilter }}\n    </button>\n  }\n}\n\n<ng-template #addFilterPopover let-close=\"close\">\n  <div class=\"w-[12.5rem]\">\n    <div class=\"border-border flex items-center border-b px-3\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n      <input\n        #addFilterSearchInput\n        type=\"text\"\n        [placeholder]=\"i18n().searchFields\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none\" />\n    </div>\n    <div class=\"flex max-h-[18.75rem] flex-col gap-0.5 overflow-y-auto p-1\">\n      @for (group of groupedFields(); track group.group; let groupIndex = $index) {\n        @if (group.group) {\n          <div\n            class=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\"\n            [class.border-border]=\"groupIndex > 0\"\n            [class.mt-2]=\"groupIndex > 0\"\n            [class.border-t]=\"groupIndex > 0\"\n            [class.ml-1]=\"groupIndex > 0\">\n            {{ group.group }}\n          </div>\n        }\n        @for (field of group.fields; track trackByFieldKey($index, field)) {\n          <button\n            type=\"button\"\n            class=\"hover:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors\"\n            (click)=\"onFieldSelect(field); close()\">\n            @if (field.icon) {\n              <z-icon [zType]=\"field.icon\" zSize=\"14\" class=\"text-muted-foreground\" />\n            }\n            <span>{{ field.label }}</span>\n          </button>\n        }\n      } @empty {\n        <div class=\"text-muted-foreground py-6 text-center text-sm\">\n          {{ i18n().noFieldsFound }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Filter Items -->\n@for (filter of zFilters(); track trackByFilterId($index, filter)) {\n  @if (filter | zFilterField: $any(zFields()); as field) {\n    <div [class]=\"getItemClasses()\" data-slot=\"filter-item\">\n      <!-- Field Label -->\n      <div [class]=\"getLabelClasses()\">\n        @if (field.icon) {\n          <z-icon [zType]=\"field.icon\" zSize=\"14\" />\n        }\n        {{ field.label }}\n      </div>\n\n      <!-- Operator Dropdown -->\n      <button\n        type=\"button\"\n        z-popover\n        [zPopoverContent]=\"operatorDropdown\"\n        zTrigger=\"click\"\n        zPosition=\"bottom-left\"\n        [zOffset]=\"4\"\n        (zShow)=\"operatorPopoverOpen.set(filter.id)\"\n        (zHide)=\"operatorPopoverOpen.set(null)\"\n        class=\"text-muted-foreground hover:text-foreground hover:bg-muted flex cursor-pointer items-center px-2.5 text-sm transition-colors\"\n        [class.text-foreground]=\"operatorPopoverOpen() === filter.id\"\n        [class.bg-muted]=\"operatorPopoverOpen() === filter.id\">\n        {{ filter | zFilterOperatorLabel: $any(zFields()) : i18n() }}\n        <z-icon zType=\"lucideChevronDown\" zSize=\"12\" class=\"ml-1\" />\n      </button>\n\n      <ng-template #operatorDropdown let-close=\"close\">\n        <div class=\"flex w-fit min-w-32 flex-col gap-0.5 p-1\">\n          @for (op of filter | zFilterOperators: $any(zFields()) : i18n(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-accent flex w-full cursor-pointer items-center justify-between gap-4 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n              (click)=\"updateFilterOperator(filter, op.value); close()\">\n              <span>{{ op.label }}</span>\n              @if (op.value === filter.operator) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary\" />\n              }\n            </button>\n          }\n        </div>\n      </ng-template>\n\n      <!-- Value Selector -->\n      @if (!(filter | zFilterIsValueHidden)) {\n        <!-- Boolean Field -->\n        @if (field.type === 'boolean') {\n          <div class=\"flex items-center gap-2 px-2.5\">\n            <z-switch [zChecked]=\"filter.values[0] === true\" (zChange)=\"onBooleanChange(filter, $event)\" zSize=\"sm\" />\n            @if (field.onLabel && field.offLabel) {\n              <span class=\"text-muted-foreground text-xs\">\n                {{ filter.values[0] === true ? field.onLabel : field.offLabel }}\n              </span>\n            }\n          </div>\n        }\n\n        <!-- Text/Email/URL/Tel Input -->\n        @else if (field.type === 'text' || field.type === 'email' || field.type === 'url' || field.type === 'tel') {\n          <div [class]=\"getInputClasses()\" class=\"w-36\">\n            @if (field.prefix) {\n              <span class=\"text-muted-foreground mr-1\">{{ field.prefix }}</span>\n            }\n            <input\n              type=\"{{\n                field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : field.type === 'tel' ? 'tel' : 'text'\n              }}\"\n              [value]=\"filter.values[0] || ''\"\n              [placeholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [pattern]=\"field | zFilterInputPattern\"\n              class=\"w-full bg-transparent outline-none\"\n              (blur)=\"onInputChange(filter, $event)\" />\n            @if (field.suffix) {\n              <span class=\"text-muted-foreground ml-1\">{{ field.suffix }}</span>\n            }\n          </div>\n        }\n\n        <!-- Number Input -->\n        @else if (field.type === 'number') {\n          @if (filter | zFilterIsBetweenOperator) {\n            <div class=\"flex items-center\">\n              <div [class]=\"getInputClasses()\" class=\"w-20\">\n                @if (field.prefix) {\n                  <span class=\"text-muted-foreground mr-1\">{{ field.prefix }}</span>\n                }\n                <input\n                  type=\"number\"\n                  [value]=\"filter.values[0] || ''\"\n                  [placeholder]=\"i18n().min\"\n                  [min]=\"field.min\"\n                  [max]=\"field.max\"\n                  [step]=\"field.step\"\n                  class=\"w-full bg-transparent outline-none\"\n                  (blur)=\"onInputChange(filter, $event, 0)\" />\n              </div>\n              <div [class]=\"getBetweenClasses()\">{{ i18n().to }}</div>\n              <div [class]=\"getInputClasses()\" class=\"w-20\">\n                <input\n                  type=\"number\"\n                  [value]=\"filter.values[1] || ''\"\n                  [placeholder]=\"i18n().max\"\n                  [min]=\"field.min\"\n                  [max]=\"field.max\"\n                  [step]=\"field.step\"\n                  class=\"w-full bg-transparent outline-none\"\n                  (blur)=\"onInputChange(filter, $event, 1)\" />\n                @if (field.suffix) {\n                  <span class=\"text-muted-foreground ml-1\">{{ field.suffix }}</span>\n                }\n              </div>\n            </div>\n          } @else {\n            <div [class]=\"getInputClasses()\" class=\"w-24\">\n              @if (field.prefix) {\n                <span class=\"text-muted-foreground mr-1\">{{ field.prefix }}</span>\n              }\n              <input\n                type=\"number\"\n                [value]=\"filter.values[0] || ''\"\n                [placeholder]=\"field.placeholder || i18n().placeholders.enterField\"\n                [min]=\"field.min\"\n                [max]=\"field.max\"\n                [step]=\"field.step\"\n                class=\"w-full bg-transparent outline-none\"\n                (blur)=\"onInputChange(filter, $event)\" />\n              @if (field.suffix) {\n                <span class=\"text-muted-foreground ml-1\">{{ field.suffix }}</span>\n              }\n            </div>\n          }\n        }\n\n        <!-- Date Input -->\n        @else if (field.type === 'date') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-40 min-w-0\">\n            <z-calendar\n              zMode=\"single\"\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"YYYY-MM-DD\"\n              [zSize]=\"calendarSize()\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"dateValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onDateValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- Date Range Input -->\n        @else if (field.type === 'daterange') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-56 min-w-0\">\n            <z-calendar\n              zMode=\"range\"\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"YYYY-MM-DD\"\n              [zSize]=\"calendarSize()\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"dateRangeValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onDateRangeValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- Time Input -->\n        @else if (field.type === 'time') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-28 min-w-0\">\n            <z-calendar\n              zMode=\"time\"\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"HH:mm\"\n              [zSize]=\"calendarSize()\"\n              [zShowSecond]=\"false\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"timeValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onTimeValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- DateTime Input -->\n        @else if (field.type === 'datetime') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-52 min-w-0\">\n            <z-calendar\n              zMode=\"single\"\n              zShowTime\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"YYYY-MM-DD HH:mm\"\n              [zSize]=\"calendarSize()\"\n              [zShowSecond]=\"false\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"dateTimeValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onDateTimeValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- Select/Multiselect -->\n        @else if (field.type === 'select' || field.type === 'multiselect' || field.options) {\n          <button\n            type=\"button\"\n            z-popover\n            [zPopoverContent]=\"selectPopover\"\n            zTrigger=\"click\"\n            zPosition=\"bottom-left\"\n            [zOffset]=\"4\"\n            (zShow)=\"valuePopoverOpen.set(filter.id); focusSelectSearch(filter.id)\"\n            (zHide)=\"valuePopoverOpen.set(null)\"\n            class=\"hover:bg-muted flex cursor-pointer items-center gap-1.5 px-2.5 text-sm transition-colors\"\n            [class.bg-muted]=\"valuePopoverOpen() === filter.id\">\n            @if (filter | zFilterSelectedOptions: $any(zFields()); as selectedOpts) {\n              @if (selectedOpts.length > 0) {\n                <div class=\"flex items-center -space-x-1.5\">\n                  @for (opt of selectedOpts.slice(0, 3); track $any(opt).value) {\n                    @if (opt.icon) {\n                      <z-icon [zType]=\"opt.icon\" zSize=\"14\" />\n                    }\n                  }\n                </div>\n                @if (selectedOpts.length === 1) {\n                  {{ selectedOpts[0].label }}\n                } @else {\n                  {{ selectedOpts.length }} {{ i18n().selectedCount }}\n                }\n              } @else {\n                <span class=\"text-muted-foreground\">{{ i18n().select }}</span>\n              }\n            }\n            <z-icon zType=\"lucideChevronDown\" zSize=\"12\" class=\"text-muted-foreground ml-1\" />\n          </button>\n\n          <ng-template #selectPopover let-close=\"close\">\n            <div class=\"w-[12.5rem]\">\n              @if (field.searchable !== false) {\n                <div class=\"border-border flex items-center border-b px-3\">\n                  <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n                  <input\n                    [id]=\"'select-search-' + filter.id\"\n                    type=\"text\"\n                    [placeholder]=\"i18n().placeholders.searchField\"\n                    class=\"placeholder:text-muted-foreground text-foreground flex h-9 w-full bg-transparent py-2 text-sm outline-none\" />\n                </div>\n              }\n              <div class=\"flex max-h-[12.5rem] flex-col gap-0.5 overflow-y-auto p-1\">\n                <!-- Selected Options -->\n                @for (opt of filter | zFilterSelectedOptions: $any(zFields()); track $any(opt).value) {\n                  <button\n                    type=\"button\"\n                    class=\"hover:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors\"\n                    (click)=\"onSelectValueChange(filter, $any(opt)); field.type !== 'multiselect' && close()\">\n                    @if (opt.icon) {\n                      <z-icon [zType]=\"opt.icon\" zSize=\"14\" />\n                    }\n                    <span class=\"truncate\">{{ opt.label }}</span>\n                    <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto\" />\n                  </button>\n                }\n\n                <!-- Separator -->\n                @if (\n                  (filter | zFilterSelectedOptions: $any(zFields())).length > 0 &&\n                  (filter | zFilterUnselectedOptions: $any(zFields())).length > 0\n                ) {\n                  <div class=\"bg-border my-1 ml-1 h-px\"></div>\n                }\n\n                <!-- Unselected Options -->\n                @for (opt of filter | zFilterUnselectedOptions: $any(zFields()); track $any(opt).value) {\n                  <button\n                    type=\"button\"\n                    class=\"hover:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors\"\n                    (click)=\"onSelectValueChange(filter, $any(opt)); field.type !== 'multiselect' && close()\">\n                    @if (opt.icon) {\n                      <z-icon [zType]=\"opt.icon\" zSize=\"14\" />\n                    }\n                    <span class=\"truncate\">{{ opt.label }}</span>\n                  </button>\n                }\n\n                @if (\n                  (filter | zFilterSelectedOptions: $any(zFields())).length === 0 &&\n                  (filter | zFilterUnselectedOptions: $any(zFields())).length === 0\n                ) {\n                  <div class=\"text-muted-foreground py-6 text-center text-sm\">\n                    {{ i18n().noResultsFound }}\n                  </div>\n                }\n              </div>\n            </div>\n          </ng-template>\n        }\n      }\n\n      <!-- Remove Button -->\n      <button type=\"button\" [class]=\"getRemoveButtonClasses()\" data-slot=\"filter-remove\" (click)=\"removeFilter(filter)\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    </div>\n  }\n}\n", styles: [":host{display:block}.z-filter-calendar z-calendar{display:contents}.z-filter-calendar z-calendar .z-calendar-wrapper{display:contents}.z-filter-calendar z-calendar .z-calendar-wrapper>.relative{display:contents}.z-filter-calendar z-calendar [z-popover]{display:flex!important;align-items:center!important;height:auto!important;min-height:0!important;width:100%!important;border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;outline:none!important;gap:.375rem!important;cursor:pointer!important}.z-filter-calendar z-calendar [z-popover]:focus-within{border-color:transparent!important;box-shadow:none!important}.z-filter-calendar z-calendar [z-popover]>z-icon{flex-shrink:0}.z-filter-calendar z-calendar [z-popover]>input{flex:1 1 0!important;min-width:0!important;width:0!important}.z-filter-calendar z-calendar [z-popover]>button[tabindex=\"-1\"]{display:none!important}.z-filter-calendar z-calendar .z-calendar-wrapper>p{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZSwitchComponent, selector: "z-switch", inputs: ["class", "zSwitchClass", "zThumbClass", "zSize", "zMode", "zLabel", "zText", "zCheckedText", "zUncheckedText", "zCheckedIcon", "zUncheckedIcon", "zDisabled", "zLoading", "zTextPosition", "zWave", "zChecked"], outputs: ["zChange", "zOnBlur", "zOnFocus", "zEvent", "zCheckedChange"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowEdit", "zShortTime", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "pipe", type: ZFilterFieldPipe, name: "zFilterField" }, { kind: "pipe", type: ZFilterOperatorLabelPipe, name: "zFilterOperatorLabel" }, { kind: "pipe", type: ZFilterOperatorsPipe, name: "zFilterOperators" }, { kind: "pipe", type: ZFilterSelectedOptionsPipe, name: "zFilterSelectedOptions" }, { kind: "pipe", type: ZFilterUnselectedOptionsPipe, name: "zFilterUnselectedOptions" }, { kind: "pipe", type: ZFilterInputPatternPipe, name: "zFilterInputPattern" }, { kind: "pipe", type: ZFilterIsValueHiddenPipe, name: "zFilterIsValueHidden" }, { kind: "pipe", type: ZFilterIsBetweenOperatorPipe, name: "zFilterIsBetweenOperator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZFilterComponent, isStandalone: true, selector: "z-filter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zFilters: { classPropertyName: "zFilters", publicName: "zFilters", isSignal: true, isRequired: true, transformFunction: null }, zFields: { classPropertyName: "zFields", publicName: "zFields", isSignal: true, isRequired: true, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zI18n: { classPropertyName: "zI18n", publicName: "zI18n", isSignal: true, isRequired: false, transformFunction: null }, zShowAddButton: { classPropertyName: "zShowAddButton", publicName: "zShowAddButton", isSignal: true, isRequired: false, transformFunction: null }, zAllowMultiple: { classPropertyName: "zAllowMultiple", publicName: "zAllowMultiple", isSignal: true, isRequired: false, transformFunction: null }, zAddButtonIcon: { classPropertyName: "zAddButtonIcon", publicName: "zAddButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, zAddButtonText: { classPropertyName: "zAddButtonText", publicName: "zAddButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zFiltersChange: "zFiltersChange", zFilterAdd: "zFilterAdd", zFilterRemove: "zFilterRemove", zFilterUpdate: "zFilterUpdate" }, host: { attributes: { "data-slot": "z-filter" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "addButtonTemplate", first: true, predicate: ["addButton"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "addFilterSearchInput", first: true, predicate: ["addFilterSearchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Add Filter Button -->\n@if (zShowAddButton() && selectableFields().length > 0) {\n  @if (addButtonTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"addButtonTemplate()!\" />\n  } @else {\n    <button\n      z-button\n      zType=\"outline\"\n      [zSize]=\"buttonSize()\"\n      z-popover\n      [zPopoverContent]=\"addFilterPopover\"\n      zTrigger=\"click\"\n      zPosition=\"bottom-left\"\n      [zOffset]=\"6\"\n      (zShow)=\"addFilterOpen.set(true); focusSearchInput()\"\n      (zHide)=\"addFilterOpen.set(false); searchQuery.set('')\">\n      <z-icon [zType]=\"zAddButtonIcon()\" zSize=\"14\" />\n      {{ zAddButtonText() || i18n().addFilter }}\n    </button>\n  }\n}\n\n<ng-template #addFilterPopover let-close=\"close\">\n  <div class=\"w-[12.5rem]\">\n    <div class=\"border-border flex items-center border-b px-3\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n      <input\n        #addFilterSearchInput\n        type=\"text\"\n        [placeholder]=\"i18n().searchFields\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none\" />\n    </div>\n    <div class=\"flex max-h-[18.75rem] flex-col gap-0.5 overflow-y-auto p-1\">\n      @for (group of groupedFields(); track group.group; let groupIndex = $index) {\n        @if (group.group) {\n          <div\n            class=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\"\n            [class.border-border]=\"groupIndex > 0\"\n            [class.mt-2]=\"groupIndex > 0\"\n            [class.border-t]=\"groupIndex > 0\"\n            [class.ml-1]=\"groupIndex > 0\">\n            {{ group.group }}\n          </div>\n        }\n        @for (field of group.fields; track trackByFieldKey($index, field)) {\n          <button\n            type=\"button\"\n            class=\"hover:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors\"\n            (click)=\"onFieldSelect(field); close()\">\n            @if (field.icon) {\n              <z-icon [zType]=\"field.icon\" zSize=\"14\" class=\"text-muted-foreground\" />\n            }\n            <span>{{ field.label }}</span>\n          </button>\n        }\n      } @empty {\n        <div class=\"text-muted-foreground py-6 text-center text-sm\">\n          {{ i18n().noFieldsFound }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Filter Items -->\n@for (filter of zFilters(); track trackByFilterId($index, filter)) {\n  @if (filter | zFilterField: $any(zFields()); as field) {\n    <div [class]=\"getItemClasses()\" data-slot=\"filter-item\">\n      <!-- Field Label -->\n      <div [class]=\"getLabelClasses()\">\n        @if (field.icon) {\n          <z-icon [zType]=\"field.icon\" zSize=\"14\" />\n        }\n        {{ field.label }}\n      </div>\n\n      <!-- Operator Dropdown -->\n      <button\n        type=\"button\"\n        z-popover\n        [zPopoverContent]=\"operatorDropdown\"\n        zTrigger=\"click\"\n        zPosition=\"bottom-left\"\n        [zOffset]=\"4\"\n        (zShow)=\"operatorPopoverOpen.set(filter.id)\"\n        (zHide)=\"operatorPopoverOpen.set(null)\"\n        class=\"text-muted-foreground hover:text-foreground hover:bg-muted flex cursor-pointer items-center px-2.5 text-sm transition-colors\"\n        [class.text-foreground]=\"operatorPopoverOpen() === filter.id\"\n        [class.bg-muted]=\"operatorPopoverOpen() === filter.id\">\n        {{ filter | zFilterOperatorLabel: $any(zFields()) : i18n() }}\n        <z-icon zType=\"lucideChevronDown\" zSize=\"12\" class=\"ml-1\" />\n      </button>\n\n      <ng-template #operatorDropdown let-close=\"close\">\n        <div class=\"flex w-fit min-w-32 flex-col gap-0.5 p-1\">\n          @for (op of filter | zFilterOperators: $any(zFields()) : i18n(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-accent flex w-full cursor-pointer items-center justify-between gap-4 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n              (click)=\"updateFilterOperator(filter, op.value); close()\">\n              <span>{{ op.label }}</span>\n              @if (op.value === filter.operator) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary\" />\n              }\n            </button>\n          }\n        </div>\n      </ng-template>\n\n      <!-- Value Selector -->\n      @if (!(filter | zFilterIsValueHidden)) {\n        <!-- Boolean Field -->\n        @if (field.type === 'boolean') {\n          <div class=\"flex items-center gap-2 px-2.5\">\n            <z-switch [zChecked]=\"filter.values[0] === true\" (zChange)=\"onBooleanChange(filter, $event)\" zSize=\"sm\" />\n            @if (field.onLabel && field.offLabel) {\n              <span class=\"text-muted-foreground text-xs\">\n                {{ filter.values[0] === true ? field.onLabel : field.offLabel }}\n              </span>\n            }\n          </div>\n        }\n\n        <!-- Text/Email/URL/Tel Input -->\n        @else if (field.type === 'text' || field.type === 'email' || field.type === 'url' || field.type === 'tel') {\n          <div [class]=\"getInputClasses()\" class=\"w-36\">\n            @if (field.prefix) {\n              <span class=\"text-muted-foreground mr-1\">{{ field.prefix }}</span>\n            }\n            <input\n              type=\"{{\n                field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : field.type === 'tel' ? 'tel' : 'text'\n              }}\"\n              [value]=\"filter.values[0] || ''\"\n              [placeholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [pattern]=\"field | zFilterInputPattern\"\n              class=\"w-full bg-transparent outline-none\"\n              (blur)=\"onInputChange(filter, $event)\" />\n            @if (field.suffix) {\n              <span class=\"text-muted-foreground ml-1\">{{ field.suffix }}</span>\n            }\n          </div>\n        }\n\n        <!-- Number Input -->\n        @else if (field.type === 'number') {\n          @if (filter | zFilterIsBetweenOperator) {\n            <div class=\"flex items-center\">\n              <div [class]=\"getInputClasses()\" class=\"w-20\">\n                @if (field.prefix) {\n                  <span class=\"text-muted-foreground mr-1\">{{ field.prefix }}</span>\n                }\n                <input\n                  type=\"number\"\n                  [value]=\"filter.values[0] || ''\"\n                  [placeholder]=\"i18n().min\"\n                  [min]=\"field.min\"\n                  [max]=\"field.max\"\n                  [step]=\"field.step\"\n                  class=\"w-full bg-transparent outline-none\"\n                  (blur)=\"onInputChange(filter, $event, 0)\" />\n              </div>\n              <div [class]=\"getBetweenClasses()\">{{ i18n().to }}</div>\n              <div [class]=\"getInputClasses()\" class=\"w-20\">\n                <input\n                  type=\"number\"\n                  [value]=\"filter.values[1] || ''\"\n                  [placeholder]=\"i18n().max\"\n                  [min]=\"field.min\"\n                  [max]=\"field.max\"\n                  [step]=\"field.step\"\n                  class=\"w-full bg-transparent outline-none\"\n                  (blur)=\"onInputChange(filter, $event, 1)\" />\n                @if (field.suffix) {\n                  <span class=\"text-muted-foreground ml-1\">{{ field.suffix }}</span>\n                }\n              </div>\n            </div>\n          } @else {\n            <div [class]=\"getInputClasses()\" class=\"w-24\">\n              @if (field.prefix) {\n                <span class=\"text-muted-foreground mr-1\">{{ field.prefix }}</span>\n              }\n              <input\n                type=\"number\"\n                [value]=\"filter.values[0] || ''\"\n                [placeholder]=\"field.placeholder || i18n().placeholders.enterField\"\n                [min]=\"field.min\"\n                [max]=\"field.max\"\n                [step]=\"field.step\"\n                class=\"w-full bg-transparent outline-none\"\n                (blur)=\"onInputChange(filter, $event)\" />\n              @if (field.suffix) {\n                <span class=\"text-muted-foreground ml-1\">{{ field.suffix }}</span>\n              }\n            </div>\n          }\n        }\n\n        <!-- Date Input -->\n        @else if (field.type === 'date') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-40 min-w-0\">\n            <z-calendar\n              zMode=\"single\"\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"YYYY-MM-DD\"\n              [zSize]=\"calendarSize()\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"dateValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onDateValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- Date Range Input -->\n        @else if (field.type === 'daterange') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-56 min-w-0\">\n            <z-calendar\n              zMode=\"range\"\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"YYYY-MM-DD\"\n              [zSize]=\"calendarSize()\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"dateRangeValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onDateRangeValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- Time Input -->\n        @else if (field.type === 'time') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-28 min-w-0\">\n            <z-calendar\n              zMode=\"time\"\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"HH:mm\"\n              [zSize]=\"calendarSize()\"\n              [zShowSecond]=\"false\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"timeValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onTimeValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- DateTime Input -->\n        @else if (field.type === 'datetime') {\n          <div [class]=\"getInputClasses()\" class=\"z-filter-calendar w-52 min-w-0\">\n            <z-calendar\n              zMode=\"single\"\n              zShowTime\n              zAllowClear\n              zValueType=\"date\"\n              zFormat=\"YYYY-MM-DD HH:mm\"\n              [zSize]=\"calendarSize()\"\n              [zShowSecond]=\"false\"\n              [zPlaceholder]=\"field.placeholder || i18n().placeholders.enterField\"\n              [ngModel]=\"dateTimeValueMap()[filter.id] ?? null\"\n              (ngModelChange)=\"onDateTimeValueChange(filter, $event)\"\n              class=\"h-full min-w-0 border-0 bg-transparent px-0 shadow-none ring-0 focus-within:border-transparent focus-within:ring-0\" />\n          </div>\n        }\n\n        <!-- Select/Multiselect -->\n        @else if (field.type === 'select' || field.type === 'multiselect' || field.options) {\n          <button\n            type=\"button\"\n            z-popover\n            [zPopoverContent]=\"selectPopover\"\n            zTrigger=\"click\"\n            zPosition=\"bottom-left\"\n            [zOffset]=\"4\"\n            (zShow)=\"valuePopoverOpen.set(filter.id); focusSelectSearch(filter.id)\"\n            (zHide)=\"valuePopoverOpen.set(null)\"\n            class=\"hover:bg-muted flex cursor-pointer items-center gap-1.5 px-2.5 text-sm transition-colors\"\n            [class.bg-muted]=\"valuePopoverOpen() === filter.id\">\n            @if (filter | zFilterSelectedOptions: $any(zFields()); as selectedOpts) {\n              @if (selectedOpts.length > 0) {\n                <div class=\"flex items-center -space-x-1.5\">\n                  @for (opt of selectedOpts.slice(0, 3); track $any(opt).value) {\n                    @if (opt.icon) {\n                      <z-icon [zType]=\"opt.icon\" zSize=\"14\" />\n                    }\n                  }\n                </div>\n                @if (selectedOpts.length === 1) {\n                  {{ selectedOpts[0].label }}\n                } @else {\n                  {{ selectedOpts.length }} {{ i18n().selectedCount }}\n                }\n              } @else {\n                <span class=\"text-muted-foreground\">{{ i18n().select }}</span>\n              }\n            }\n            <z-icon zType=\"lucideChevronDown\" zSize=\"12\" class=\"text-muted-foreground ml-1\" />\n          </button>\n\n          <ng-template #selectPopover let-close=\"close\">\n            <div class=\"w-[12.5rem]\">\n              @if (field.searchable !== false) {\n                <div class=\"border-border flex items-center border-b px-3\">\n                  <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n                  <input\n                    [id]=\"'select-search-' + filter.id\"\n                    type=\"text\"\n                    [placeholder]=\"i18n().placeholders.searchField\"\n                    class=\"placeholder:text-muted-foreground text-foreground flex h-9 w-full bg-transparent py-2 text-sm outline-none\" />\n                </div>\n              }\n              <div class=\"flex max-h-[12.5rem] flex-col gap-0.5 overflow-y-auto p-1\">\n                <!-- Selected Options -->\n                @for (opt of filter | zFilterSelectedOptions: $any(zFields()); track $any(opt).value) {\n                  <button\n                    type=\"button\"\n                    class=\"hover:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors\"\n                    (click)=\"onSelectValueChange(filter, $any(opt)); field.type !== 'multiselect' && close()\">\n                    @if (opt.icon) {\n                      <z-icon [zType]=\"opt.icon\" zSize=\"14\" />\n                    }\n                    <span class=\"truncate\">{{ opt.label }}</span>\n                    <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto\" />\n                  </button>\n                }\n\n                <!-- Separator -->\n                @if (\n                  (filter | zFilterSelectedOptions: $any(zFields())).length > 0 &&\n                  (filter | zFilterUnselectedOptions: $any(zFields())).length > 0\n                ) {\n                  <div class=\"bg-border my-1 ml-1 h-px\"></div>\n                }\n\n                <!-- Unselected Options -->\n                @for (opt of filter | zFilterUnselectedOptions: $any(zFields()); track $any(opt).value) {\n                  <button\n                    type=\"button\"\n                    class=\"hover:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors\"\n                    (click)=\"onSelectValueChange(filter, $any(opt)); field.type !== 'multiselect' && close()\">\n                    @if (opt.icon) {\n                      <z-icon [zType]=\"opt.icon\" zSize=\"14\" />\n                    }\n                    <span class=\"truncate\">{{ opt.label }}</span>\n                  </button>\n                }\n\n                @if (\n                  (filter | zFilterSelectedOptions: $any(zFields())).length === 0 &&\n                  (filter | zFilterUnselectedOptions: $any(zFields())).length === 0\n                ) {\n                  <div class=\"text-muted-foreground py-6 text-center text-sm\">\n                    {{ i18n().noResultsFound }}\n                  </div>\n                }\n              </div>\n            </div>\n          </ng-template>\n        }\n      }\n\n      <!-- Remove Button -->\n      <button type=\"button\" [class]=\"getRemoveButtonClasses()\" data-slot=\"filter-remove\" (click)=\"removeFilter(filter)\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    </div>\n  }\n}\n", styles: [":host{display:block}.z-filter-calendar z-calendar{display:contents}.z-filter-calendar z-calendar .z-calendar-wrapper{display:contents}.z-filter-calendar z-calendar .z-calendar-wrapper>.relative{display:contents}.z-filter-calendar z-calendar [z-popover]{display:flex!important;align-items:center!important;height:auto!important;min-height:0!important;width:100%!important;border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;outline:none!important;gap:.375rem!important;cursor:pointer!important}.z-filter-calendar z-calendar [z-popover]:focus-within{border-color:transparent!important;box-shadow:none!important}.z-filter-calendar z-calendar [z-popover]>z-icon{flex-shrink:0}.z-filter-calendar z-calendar [z-popover]>input{flex:1 1 0!important;min-width:0!important;width:0!important}.z-filter-calendar z-calendar [z-popover]>button[tabindex=\"-1\"]{display:none!important}.z-filter-calendar z-calendar .z-calendar-wrapper>p{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZSwitchComponent, selector: "z-switch", inputs: ["class", "zSwitchClass", "zThumbClass", "zSize", "zMode", "zLabel", "zText", "zCheckedText", "zUncheckedText", "zCheckedIcon", "zUncheckedIcon", "zDisabled", "zLoading", "zTextPosition", "zWave", "zChecked"], outputs: ["zChange", "zOnBlur", "zOnFocus", "zEvent", "zCheckedChange"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowEdit", "zShortTime", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "pipe", type: ZFilterFieldPipe, name: "zFilterField" }, { kind: "pipe", type: ZFilterOperatorLabelPipe, name: "zFilterOperatorLabel" }, { kind: "pipe", type: ZFilterOperatorsPipe, name: "zFilterOperators" }, { kind: "pipe", type: ZFilterSelectedOptionsPipe, name: "zFilterSelectedOptions" }, { kind: "pipe", type: ZFilterUnselectedOptionsPipe, name: "zFilterUnselectedOptions" }, { kind: "pipe", type: ZFilterInputPatternPipe, name: "zFilterInputPattern" }, { kind: "pipe", type: ZFilterIsValueHiddenPipe, name: "zFilterIsValueHidden" }, { kind: "pipe", type: ZFilterIsBetweenOperatorPipe, name: "zFilterIsBetweenOperator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-filter', imports: [
                         FormsModule,