npm - @shival99/z-ui - Versions diffs - 2.0.6 → 2.0.8 - Mend

@shival99/z-ui 2.0.6 → 2.0.8

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

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

@@ -119,7 +119,7 @@ class ZEmptyComponent {
         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", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZEmptyComponent, decorators: [{
             type: Component,

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":";;;;;;;;AAEO,MAAM,uBAAuB,GAAG,GAAG,CAAC,8DAA8D,EAAE;AACzG,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,EAAE,EAAE,OAAO;AACZ,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,KAAK,EAAE,0DAA0D;AAClE,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACF,CAAA;AAEM,MAAM,kBAAkB,GAAG,GAAG,CAAC,aAAa,EAAE;AACnD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,EAAE,EAAE,MAAM;AACX,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,0BAA0B;AACjC,YAAA,KAAK,EAAE,qBAAqB;AAC7B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACF,CAAA;AAEM,MAAM,qBAAqB,GAAG,GAAG,CAAC,yBAAyB,EAAE;AAClE,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,EAAE,EAAE,WAAW;AAChB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,uBAAuB;AAC9B,YAAA,KAAK,EAAE,kBAAkB;AAC1B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACF,CAAA;AAEM,MAAM,yBAAyB,GAAG,GAAG,CAAC,oBAAoB,EAAE;AACjE,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,EAAE,EAAE,SAAS;AACd,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,0BAA0B;AACjC,YAAA,KAAK,EAAE,qBAAqB;AAC7B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACF,CAAA;;ACxDD,MAAM,UAAU,GAAU,mBAAmB;AAC7C,MAAM,iBAAiB,GAAG,+BAA+B;AACzD,MAAM,qBAAqB,GAAG,mCAAmC;MAcpD,eAAe,CAAA;AACT,IAAA,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEvC,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC;AAC7B,IAAA,KAAK,GAAG,KAAK,CAAa,OAAO,iDAAC;AAClC,IAAA,KAAK,GAAG,KAAK,CAAQ,mBAAmB,iDAAC;AACzC,IAAA,SAAS,GAAG,KAAK,CAAiB,IAAI,qDAAC;AACvC,IAAA,KAAK,GAAG,KAAK,CAA0B,SAAS,iDAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,oDAAC;AAC5B,IAAA,YAAY,GAAG,KAAK,CAAS,EAAE,wDAAC;AAE7B,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAC7C,aAAa,CAAC,uBAAuB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,4DACnG;IAEkB,WAAW,GAAG,QAAQ,CAAC,MAAM,kBAAkB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;IAC9F,cAAc,GAAG,QAAQ,CAAC,MAC3C,qBAAqB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACpE;IAEkB,kBAAkB,GAAG,QAAQ,CAAC,MAC/C,yBAAyB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACxE;AAEkB,IAAA,WAAW,GAAG,QAAQ,CAAQ,MAAK;AACpD,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,OAAO,EAAE;AAC5B,YAAA,OAAO,UAAU;QACnB;AACA,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;AACrB,IAAA,CAAC,uDAAC;AAEiB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAChD,QAAA,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE;AAC7B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE;AACzB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE/B,QAAA,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC;QACnD;QAEA,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,OAAO;QAChB;QACA,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,yBAAyB,CAAC;AAC3D,IAAA,CAAC,0DAAC;AAEiB,IAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAK;AACpD,QAAA,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE;AAC7B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE;AACzB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE;AAEvC,QAAA,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,qBAAqB,CAAC;QACvD;AAEA,QAAA,OAAO,WAAW;AACpB,IAAA,CAAC,8DAAC;uGAxDS,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,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChC5B,+VAQA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDcY,cAAc,uKAAE,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU5B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAZ3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,WACV,CAAC,cAAc,EAAE,aAAa,CAAC,EAAA,UAAA,EAC5B,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,SAAS;AACjB,qBAAA,EAAA,QAAA,EAAA,+VAAA,EAAA;;;AE9BH;;AAEG;;;;"}

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

@@ -908,7 +908,7 @@ class ZFilterComponent {
         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", "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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "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 ɵ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", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "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: [{
             type: Component,