@shival99/z-ui 1.9.17 → 1.9.18
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.
- package/fesm2022/shival99-z-ui-components-z-accordion.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-button-group.mjs +9 -9
- package/fesm2022/shival99-z-ui-components-z-button.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +42 -42
- package/fesm2022/shival99-z-ui-components-z-card.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-chat.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-checkbox.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-code.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +15 -15
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-editor.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-empty.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-filter.mjs +27 -27
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs +12 -12
- package/fesm2022/shival99-z-ui-components-z-icon.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-input.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-loading.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-menu.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +15 -15
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-popover.mjs +9 -9
- package/fesm2022/shival99-z-ui-components-z-radio.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-select.mjs +20 -20
- package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-skeleton.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-steps.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-switch.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-table.mjs +72 -72
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-tags.mjs +12 -12
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-toast.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-upload.mjs +3 -3
- package/fesm2022/shival99-z-ui-pipes.mjs +18 -18
- package/fesm2022/shival99-z-ui-services.mjs +24 -24
- package/package.json +2 -1
- package/types/shival99-z-ui-providers.d.ts +2 -2
|
@@ -223,10 +223,10 @@ class ZFilterFieldPipe {
|
|
|
223
223
|
const fieldsMap = getFieldsMap(fields);
|
|
224
224
|
return fieldsMap[filter.field];
|
|
225
225
|
}
|
|
226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
227
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
226
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
227
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterFieldPipe, isStandalone: true, name: "zFilterField" });
|
|
228
228
|
}
|
|
229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterFieldPipe, decorators: [{
|
|
230
230
|
type: Pipe,
|
|
231
231
|
args: [{
|
|
232
232
|
name: 'zFilterField',
|
|
@@ -248,10 +248,10 @@ class ZFilterInputPatternPipe {
|
|
|
248
248
|
return field.pattern || '';
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
252
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
251
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterInputPatternPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
252
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterInputPatternPipe, isStandalone: true, name: "zFilterInputPattern" });
|
|
253
253
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterInputPatternPipe, decorators: [{
|
|
255
255
|
type: Pipe,
|
|
256
256
|
args: [{
|
|
257
257
|
name: 'zFilterInputPattern',
|
|
@@ -264,10 +264,10 @@ class ZFilterIsBetweenOperatorPipe {
|
|
|
264
264
|
transform(filter) {
|
|
265
265
|
return filter.operator === 'between' || filter.operator === 'not_between';
|
|
266
266
|
}
|
|
267
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
268
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
267
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
268
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, isStandalone: true, name: "zFilterIsBetweenOperator" });
|
|
269
269
|
}
|
|
270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsBetweenOperatorPipe, decorators: [{
|
|
271
271
|
type: Pipe,
|
|
272
272
|
args: [{
|
|
273
273
|
name: 'zFilterIsBetweenOperator',
|
|
@@ -281,10 +281,10 @@ class ZFilterIsValueHiddenPipe {
|
|
|
281
281
|
const { operator } = filter;
|
|
282
282
|
return operator === 'is_empty' || operator === 'is_not_empty';
|
|
283
283
|
}
|
|
284
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
285
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
284
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsValueHiddenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
285
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsValueHiddenPipe, isStandalone: true, name: "zFilterIsValueHidden" });
|
|
286
286
|
}
|
|
287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterIsValueHiddenPipe, decorators: [{
|
|
288
288
|
type: Pipe,
|
|
289
289
|
args: [{
|
|
290
290
|
name: 'zFilterIsValueHidden',
|
|
@@ -304,10 +304,10 @@ class ZFilterOperatorLabelPipe {
|
|
|
304
304
|
const op = operators.find(o => o.value === filter.operator);
|
|
305
305
|
return op?.label || formatOperator(filter.operator);
|
|
306
306
|
}
|
|
307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
308
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
308
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorLabelPipe, isStandalone: true, name: "zFilterOperatorLabel" });
|
|
309
309
|
}
|
|
310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorLabelPipe, decorators: [{
|
|
311
311
|
type: Pipe,
|
|
312
312
|
args: [{
|
|
313
313
|
name: 'zFilterOperatorLabel',
|
|
@@ -325,10 +325,10 @@ class ZFilterOperatorsPipe {
|
|
|
325
325
|
}
|
|
326
326
|
return getOperatorsForField(field, filter.values, i18n);
|
|
327
327
|
}
|
|
328
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
329
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
328
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
329
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorsPipe, isStandalone: true, name: "zFilterOperators" });
|
|
330
330
|
}
|
|
331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterOperatorsPipe, decorators: [{
|
|
332
332
|
type: Pipe,
|
|
333
333
|
args: [{
|
|
334
334
|
name: 'zFilterOperators',
|
|
@@ -346,10 +346,10 @@ class ZFilterSelectedOptionsPipe {
|
|
|
346
346
|
}
|
|
347
347
|
return field.options.filter(opt => filter.values.includes(opt.value));
|
|
348
348
|
}
|
|
349
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
350
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterSelectedOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
350
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterSelectedOptionsPipe, isStandalone: true, name: "zFilterSelectedOptions" });
|
|
351
351
|
}
|
|
352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterSelectedOptionsPipe, decorators: [{
|
|
353
353
|
type: Pipe,
|
|
354
354
|
args: [{
|
|
355
355
|
name: 'zFilterSelectedOptions',
|
|
@@ -367,10 +367,10 @@ class ZFilterUnselectedOptionsPipe {
|
|
|
367
367
|
}
|
|
368
368
|
return field.options.filter(opt => !filter.values.includes(opt.value));
|
|
369
369
|
}
|
|
370
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
371
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
370
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterUnselectedOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
371
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZFilterUnselectedOptionsPipe, isStandalone: true, name: "zFilterUnselectedOptions" });
|
|
372
372
|
}
|
|
373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterUnselectedOptionsPipe, decorators: [{
|
|
374
374
|
type: Pipe,
|
|
375
375
|
args: [{
|
|
376
376
|
name: 'zFilterUnselectedOptions',
|
|
@@ -907,10 +907,10 @@ class ZFilterComponent {
|
|
|
907
907
|
const minutes = String(value.getMinutes()).padStart(2, '0');
|
|
908
908
|
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
|
909
909
|
}
|
|
910
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
911
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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", "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 });
|
|
910
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
911
|
+
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", "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 });
|
|
912
912
|
}
|
|
913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZFilterComponent, decorators: [{
|
|
914
914
|
type: Component,
|
|
915
915
|
args: [{ selector: 'z-filter', imports: [
|
|
916
916
|
FormsModule,
|
|
@@ -259,8 +259,8 @@ class ZGalleryItemComponent {
|
|
|
259
259
|
event.stopPropagation();
|
|
260
260
|
this.zOnSelect.emit(this.file());
|
|
261
261
|
}
|
|
262
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
262
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryItemComponent, isStandalone: true, selector: "z-gallery-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelected: { classPropertyName: "zSelected", publicName: "zSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zOnSelect: "zOnSelect" }, host: { classAttribute: "z-gallery-item block" }, ngImport: i0, template: `
|
|
264
264
|
@if (zMode() === 'grid') {
|
|
265
265
|
<div
|
|
266
266
|
class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-2xl border shadow-sm transition-all duration-300 hover:shadow-lg"
|
|
@@ -479,7 +479,7 @@ class ZGalleryItemComponent {
|
|
|
479
479
|
}
|
|
480
480
|
`, isInline: true, dependencies: [{ 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: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
481
481
|
}
|
|
482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryItemComponent, decorators: [{
|
|
483
483
|
type: Component,
|
|
484
484
|
args: [{
|
|
485
485
|
selector: 'z-gallery-item',
|
|
@@ -850,8 +850,8 @@ class ZGalleryPreviewComponent {
|
|
|
850
850
|
this.close();
|
|
851
851
|
}
|
|
852
852
|
}
|
|
853
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
854
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
853
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
854
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview" }, ngImport: i0, template: `
|
|
855
855
|
<div
|
|
856
856
|
class="animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200"
|
|
857
857
|
(click)="onBackdropClick($event)"
|
|
@@ -1038,7 +1038,7 @@ class ZGalleryPreviewComponent {
|
|
|
1038
1038
|
</div>
|
|
1039
1039
|
`, isInline: true, dependencies: [{ 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: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: ZSafeResourceUrlPipe, name: "zSafeResourceUrl" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1040
1040
|
}
|
|
1041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1041
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, decorators: [{
|
|
1042
1042
|
type: Component,
|
|
1043
1043
|
args: [{
|
|
1044
1044
|
selector: 'z-gallery-preview',
|
|
@@ -1501,8 +1501,8 @@ class ZGalleryComponent {
|
|
|
1501
1501
|
this.zOnAction.emit({ type: 'download', files: selectedFiles });
|
|
1502
1502
|
selectedFiles.forEach(file => this.onDownload(file));
|
|
1503
1503
|
}
|
|
1504
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1505
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
|
|
1506
1506
|
<div [class]="containerClasses()">
|
|
1507
1507
|
@if (showHeader()) {
|
|
1508
1508
|
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
|
|
@@ -1654,7 +1654,7 @@ class ZGalleryComponent {
|
|
|
1654
1654
|
</div>
|
|
1655
1655
|
`, isInline: true, 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: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { 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: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1656
1656
|
}
|
|
1657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, decorators: [{
|
|
1658
1658
|
type: Component,
|
|
1659
1659
|
args: [{
|
|
1660
1660
|
selector: 'z-gallery',
|
|
@@ -1862,8 +1862,8 @@ class ZGalleryFileIconComponent {
|
|
|
1862
1862
|
const img = event.target;
|
|
1863
1863
|
img.style.display = 'none';
|
|
1864
1864
|
}
|
|
1865
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1866
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1865
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryFileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1866
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryFileIconComponent, isStandalone: true, selector: "z-gallery-file-icon", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-gallery-file-icon block" }, ngImport: i0, template: `
|
|
1867
1867
|
<div [class]="containerClasses()" class="group/icon overflow-hidden">
|
|
1868
1868
|
@if (showThumbnail()) {
|
|
1869
1869
|
@if (isLoading()) {
|
|
@@ -1887,7 +1887,7 @@ class ZGalleryFileIconComponent {
|
|
|
1887
1887
|
</div>
|
|
1888
1888
|
`, isInline: true, dependencies: [{ kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1889
1889
|
}
|
|
1890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryFileIconComponent, decorators: [{
|
|
1891
1891
|
type: Component,
|
|
1892
1892
|
args: [{
|
|
1893
1893
|
selector: 'z-gallery-file-icon',
|
|
@@ -155,10 +155,10 @@ class ZIconComponent {
|
|
|
155
155
|
return svg;
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
159
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZIconComponent, isStandalone: true, selector: "z-icon, [z-icon]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidth: { classPropertyName: "zStrokeWidth", publicName: "zStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, zSvg: { classPropertyName: "zSvg", publicName: "zSvg", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "zClasses()", "style.width": "normalizedSize() + \"px\"", "style.height": "normalizedSize() + \"px\"" } }, ngImport: i0, template: "@if (resolvedSvg()) {\n <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n", dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
160
160
|
}
|
|
161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIconComponent, decorators: [{
|
|
162
162
|
type: Component,
|
|
163
163
|
args: [{ selector: 'z-icon, [z-icon]', imports: [NgIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
164
164
|
'[class]': 'zClasses()',
|
|
@@ -917,17 +917,17 @@ class ZInputComponent {
|
|
|
917
917
|
}
|
|
918
918
|
return generated.slice(0, safeCount);
|
|
919
919
|
}
|
|
920
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
920
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
921
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZInputComponent, isStandalone: true, selector: "z-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zAlign: { classPropertyName: "zAlign", publicName: "zAlign", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zMin: { classPropertyName: "zMin", publicName: "zMin", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zStep: { classPropertyName: "zStep", publicName: "zStep", isSignal: true, isRequired: false, transformFunction: null }, zShowArrows: { classPropertyName: "zShowArrows", publicName: "zShowArrows", isSignal: true, isRequired: false, transformFunction: null }, zMask: { classPropertyName: "zMask", publicName: "zMask", isSignal: true, isRequired: false, transformFunction: null }, zDecimalPlaces: { classPropertyName: "zDecimalPlaces", publicName: "zDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, zAllowNegative: { classPropertyName: "zAllowNegative", publicName: "zAllowNegative", isSignal: true, isRequired: false, transformFunction: null }, zThousandSeparator: { classPropertyName: "zThousandSeparator", publicName: "zThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, zDecimalMarker: { classPropertyName: "zDecimalMarker", publicName: "zDecimalMarker", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zShowPasswordToggle: { classPropertyName: "zShowPasswordToggle", publicName: "zShowPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAutofocus: { classPropertyName: "zAutofocus", publicName: "zAutofocus", isSignal: true, isRequired: false, transformFunction: null }, zAutoComplete: { classPropertyName: "zAutoComplete", publicName: "zAutoComplete", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zAutoSizeContent: { classPropertyName: "zAutoSizeContent", publicName: "zAutoSizeContent", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zResize: { classPropertyName: "zResize", publicName: "zResize", isSignal: true, isRequired: false, transformFunction: null }, zMaxLength: { classPropertyName: "zMaxLength", publicName: "zMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zAutoSuggest: { classPropertyName: "zAutoSuggest", publicName: "zAutoSuggest", isSignal: true, isRequired: false, transformFunction: null }, zColorConfig: { classPropertyName: "zColorConfig", publicName: "zColorConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnChange: "zOnChange", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zOnKeydown: "zOnKeydown", zOnEnter: "zOnEnter", zOnColorCollapse: "zOnColorCollapse", zControl: "zControl", zEvent: "zEvent" }, providers: [
|
|
922
922
|
provideNgxMask(),
|
|
923
923
|
{
|
|
924
924
|
provide: NG_VALUE_ACCESSOR,
|
|
925
925
|
useExisting: forwardRef(() => ZInputComponent),
|
|
926
926
|
multi: true,
|
|
927
927
|
},
|
|
928
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() | translate }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n @if (typeConfig().isTextarea) {\n <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n <textarea\n #inputEl\n [id]=\"inputId\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n [class.field-sizing-content]=\"zAutoSizeContent()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n [autocomplete]=\"zAutoComplete()\"\n [rows]=\"zRows()\"\n [attr.maxlength]=\"zMaxLength()\"\n [ngModel]=\"displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"></textarea>\n @if (zMaxLength()) {\n <div class=\"flex justify-end pr-1 pb-1\">\n <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n </div>\n }\n @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n <svg\n class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\">\n <path d=\"M10 2L2 10\" />\n <path d=\"M10 6L6 10\" />\n </svg>\n }\n </div>\n } @else {\n <div class=\"relative w-full\">\n <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n <!-- Color picker square (prefix for color type) -->\n @if (typeConfig().isColor) {\n <div class=\"z-[10] shrink-0\">\n <blossom-color-picker\n class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n [value]=\"blossomColor()\"\n [defaultValue]=\"blossomOptions().defaultValue\"\n [colors]=\"blossomColors()\"\n [disabled]=\"isDisabled() || zReadonly()\"\n [openOnHover]=\"blossomOptions().openOnHover\"\n [initialExpanded]=\"blossomOptions().initialExpanded\"\n [animationDuration]=\"blossomOptions().animationDuration\"\n [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n [coreSize]=\"blossomOptions().coreSize\"\n [petalSize]=\"blossomOptions().petalSize\"\n [showCoreColor]=\"blossomOptions().showCoreColor\"\n [sliderPosition]=\"blossomOptions().sliderPosition\"\n [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n (colorChange)=\"onBlossomColorChange($event)\"\n (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n </div>\n }\n\n @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n @if (zSearch()) {\n <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n } @else if (slotConfig().isPrefixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n } @else {\n {{ zPrefix() }}\n }\n </div>\n }\n\n <input\n #inputEl\n [id]=\"inputId\"\n [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n [attr.min]=\"zMin()\"\n [attr.max]=\"zMax()\"\n [attr.step]=\"zStep()\"\n [autocomplete]=\"zAutoComplete()\"\n [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n [mask]=\"maskConfig().effectiveMask\"\n [thousandSeparator]=\"zThousandSeparator()\"\n [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n [allowNegativeNumbers]=\"zAllowNegative()\"\n [dropSpecialCharacters]=\"false\" />\n\n @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n @if (slotConfig().isSuffixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n } @else {\n {{ zSuffix() }}\n }\n </div>\n }\n\n <!-- Async validation loading indicator -->\n @if (isValidating()) {\n <div class=\"text-muted-foreground flex items-center justify-center\">\n <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n </div>\n }\n\n <!-- Clear button -->\n @if (showClearButton()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clearValue($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n\n <!-- Copy button for color type -->\n @if (typeConfig().isColor) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"copyColorToClipboard()\">\n <span class=\"relative flex size-4 items-center justify-center\">\n <z-icon\n zType=\"lucideCopy\"\n [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n <z-icon\n zType=\"lucideCheck\"\n [class]=\"\n uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n \"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n </span>\n </button>\n }\n\n @if (showArrows() && !isDisabled()) {\n <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'up')\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'down')\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n </button>\n </div>\n }\n\n @if (typeConfig().isPassword && zShowPasswordToggle()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"togglePasswordVisibility()\">\n @if (uiState().passwordVisible) {\n <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n } @else {\n <z-icon zType=\"lucideEye\" zSize=\"16\" />\n }\n </button>\n }\n </div>\n\n @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n <div\n class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n @for (item of filteredSuggestHistory(); track item; let i = $index) {\n <button\n type=\"button\"\n class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n [class.text-primary]=\"suggestActiveIndex() === i\"\n (mousedown)=\"selectSuggestItem(item)\">\n <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n <span class=\"truncate\">{{ item }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (hasError()) {\n <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n {{ errorMessage() }}\n </p>\n }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"], dependencies: [{ kind: "component", type: BlossomColorPickerComponent, selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
928
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() | translate }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n @if (typeConfig().isTextarea) {\n <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n <textarea\n #inputEl\n [id]=\"inputId\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n [class.field-sizing-content]=\"zAutoSizeContent()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n [autocomplete]=\"zAutoComplete()\"\n [rows]=\"zRows()\"\n [attr.maxlength]=\"zMaxLength()\"\n [ngModel]=\"displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"></textarea>\n @if (zMaxLength()) {\n <div class=\"flex justify-end pr-1 pb-1\">\n <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n </div>\n }\n @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n <svg\n class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\">\n <path d=\"M10 2L2 10\" />\n <path d=\"M10 6L6 10\" />\n </svg>\n }\n </div>\n } @else {\n <div class=\"relative w-full\">\n <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n <!-- Color picker square (prefix for color type) -->\n @if (typeConfig().isColor) {\n <div class=\"z-[10] shrink-0\">\n <blossom-color-picker\n class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n [value]=\"blossomColor()\"\n [defaultValue]=\"blossomOptions().defaultValue\"\n [colors]=\"blossomColors()\"\n [disabled]=\"isDisabled() || zReadonly()\"\n [openOnHover]=\"blossomOptions().openOnHover\"\n [initialExpanded]=\"blossomOptions().initialExpanded\"\n [animationDuration]=\"blossomOptions().animationDuration\"\n [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n [coreSize]=\"blossomOptions().coreSize\"\n [petalSize]=\"blossomOptions().petalSize\"\n [showCoreColor]=\"blossomOptions().showCoreColor\"\n [sliderPosition]=\"blossomOptions().sliderPosition\"\n [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n (colorChange)=\"onBlossomColorChange($event)\"\n (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n </div>\n }\n\n @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n @if (zSearch()) {\n <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n } @else if (slotConfig().isPrefixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n } @else {\n {{ zPrefix() }}\n }\n </div>\n }\n\n <input\n #inputEl\n [id]=\"inputId\"\n [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n [attr.min]=\"zMin()\"\n [attr.max]=\"zMax()\"\n [attr.step]=\"zStep()\"\n [autocomplete]=\"zAutoComplete()\"\n [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n [mask]=\"maskConfig().effectiveMask\"\n [thousandSeparator]=\"zThousandSeparator()\"\n [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n [allowNegativeNumbers]=\"zAllowNegative()\"\n [dropSpecialCharacters]=\"false\" />\n\n @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n @if (slotConfig().isSuffixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n } @else {\n {{ zSuffix() }}\n }\n </div>\n }\n\n <!-- Async validation loading indicator -->\n @if (isValidating()) {\n <div class=\"text-muted-foreground flex items-center justify-center\">\n <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n </div>\n }\n\n <!-- Clear button -->\n @if (showClearButton()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clearValue($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n\n <!-- Copy button for color type -->\n @if (typeConfig().isColor) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"copyColorToClipboard()\">\n <span class=\"relative flex size-4 items-center justify-center\">\n <z-icon\n zType=\"lucideCopy\"\n [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n <z-icon\n zType=\"lucideCheck\"\n [class]=\"\n uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n \"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n </span>\n </button>\n }\n\n @if (showArrows() && !isDisabled()) {\n <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'up')\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'down')\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n </button>\n </div>\n }\n\n @if (typeConfig().isPassword && zShowPasswordToggle()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"togglePasswordVisibility()\">\n @if (uiState().passwordVisible) {\n <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n } @else {\n <z-icon zType=\"lucideEye\" zSize=\"16\" />\n }\n </button>\n }\n </div>\n\n @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n <div\n class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n @for (item of filteredSuggestHistory(); track item; let i = $index) {\n <button\n type=\"button\"\n class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n [class.text-primary]=\"suggestActiveIndex() === i\"\n (mousedown)=\"selectSuggestItem(item)\">\n <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n <span class=\"truncate\">{{ item }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (hasError()) {\n <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n {{ errorMessage() }}\n </p>\n }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"], dependencies: [{ kind: "component", type: BlossomColorPickerComponent, selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
929
929
|
}
|
|
930
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
930
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZInputComponent, decorators: [{
|
|
931
931
|
type: Component,
|
|
932
932
|
args: [{ selector: 'z-input', imports: [
|
|
933
933
|
BlossomColorPickerComponent,
|