@shival99/z-ui 1.9.16 → 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 +21 -16
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +1 -1
- 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-components-z-autocomplete.d.ts +2 -1
- package/types/shival99-z-ui-providers.d.ts +2 -2
|
@@ -187,10 +187,10 @@ class ZAccordionItemComponent {
|
|
|
187
187
|
}
|
|
188
188
|
this._accordion.toggleItem(this.zId());
|
|
189
189
|
}
|
|
190
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
191
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
190
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ZAccordionItemComponent, isStandalone: true, selector: "z-accordion-item", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zId: { classPropertyName: "zId", publicName: "zId", isSignal: true, isRequired: true, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: true, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "itemClasses()" } }, ngImport: i0, template: "<div\n [class]=\"triggerClasses()\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"isOpen()\">\n <span [class]=\"titleWrapperClasses()\">\n <ng-content select=\"[zAccordionIcon]\" />\n <span>{{ zTitle() }}</span>\n </span>\n <z-icon [zType]=\"iconType()\" zSize=\"16\" [class]=\"iconClasses()\" />\n</div>\n\n<div [class]=\"contentClasses()\" class=\"z-accordion-content\" [class.z-accordion-content-open]=\"isOpen()\">\n <div class=\"z-accordion-content-inner\">\n <div [class]=\"contentInnerClasses()\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".z-accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}.z-accordion-content.z-accordion-content-open{grid-template-rows:1fr}.z-accordion-content>.z-accordion-content-inner{overflow:hidden;min-height:0}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
192
192
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAccordionItemComponent, decorators: [{
|
|
194
194
|
type: Component,
|
|
195
195
|
args: [{ selector: 'z-accordion-item', imports: [ZIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
196
196
|
'[class]': 'itemClasses()',
|
|
@@ -247,10 +247,10 @@ class ZAccordionComponent {
|
|
|
247
247
|
}
|
|
248
248
|
this._openItems.set(new Set());
|
|
249
249
|
}
|
|
250
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
251
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.
|
|
250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
251
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.9", type: ZAccordionComponent, isStandalone: true, selector: "z-accordion", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zMultiple: { classPropertyName: "zMultiple", publicName: "zMultiple", isSignal: true, isRequired: false, transformFunction: null }, zCollapsible: { classPropertyName: "zCollapsible", publicName: "zCollapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "zClasses()" } }, queries: [{ propertyName: "items", predicate: ZAccordionItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".z-accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}.z-accordion-content.z-accordion-content-open{grid-template-rows:1fr}.z-accordion-content>.z-accordion-content-inner{overflow:hidden;min-height:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
252
252
|
}
|
|
253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAccordionComponent, decorators: [{
|
|
254
254
|
type: Component,
|
|
255
255
|
args: [{ selector: 'z-accordion', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
256
256
|
'[class]': 'zClasses()',
|
|
@@ -16,10 +16,10 @@ import { cva } from 'class-variance-authority';
|
|
|
16
16
|
|
|
17
17
|
class ZAutocompleteOptionDirective {
|
|
18
18
|
templateRef = inject((TemplateRef));
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
20
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZAutocompleteOptionDirective, isStandalone: true, selector: "[z-autocomplete-option], [zAutocompleteOption]", ngImport: i0 });
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteOptionDirective, decorators: [{
|
|
23
23
|
type: Directive,
|
|
24
24
|
args: [{
|
|
25
25
|
selector: '[z-autocomplete-option], [zAutocompleteOption]',
|
|
@@ -160,6 +160,7 @@ class ZAutocompleteComponent {
|
|
|
160
160
|
_loadMoreObserver = null;
|
|
161
161
|
_virtualScrollListener = null;
|
|
162
162
|
_lastFilteredOptionsLength = 0;
|
|
163
|
+
_shouldScrollActiveOption = false;
|
|
163
164
|
/** Stores input value before keyboard navigation for ESC revert */
|
|
164
165
|
_valueBeforeNavigation = null;
|
|
165
166
|
virtualizer = injectVirtualizer(() => ({
|
|
@@ -333,16 +334,18 @@ class ZAutocompleteComponent {
|
|
|
333
334
|
if (!isOpen || idx < 0) {
|
|
334
335
|
return;
|
|
335
336
|
}
|
|
336
|
-
if (!this.shouldUseVirtualScroll()
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
337
|
+
if (!this._shouldScrollActiveOption || this.shouldUseVirtualScroll() || this.zEnableLoadMore()) {
|
|
338
|
+
return;
|
|
339
|
+
}
|
|
340
|
+
this._shouldScrollActiveOption = false;
|
|
341
|
+
const container = this.optionsContainerRef()?.nativeElement;
|
|
342
|
+
if (!container) {
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
345
|
+
const options = container.querySelectorAll('.z-autocomplete-option');
|
|
346
|
+
const activeOption = options[idx];
|
|
347
|
+
if (activeOption) {
|
|
348
|
+
activeOption.scrollIntoView({ block: 'nearest' });
|
|
346
349
|
}
|
|
347
350
|
});
|
|
348
351
|
effect(onCleanup => {
|
|
@@ -478,6 +481,7 @@ class ZAutocompleteComponent {
|
|
|
478
481
|
if (this._valueBeforeNavigation === null) {
|
|
479
482
|
this._valueBeforeNavigation = currentValue;
|
|
480
483
|
}
|
|
484
|
+
this._shouldScrollActiveOption = true;
|
|
481
485
|
this.activeIndex.update(i => (i < options.length - 1 ? i + 1 : 0));
|
|
482
486
|
if (isAddressBarMode) {
|
|
483
487
|
this._fillInputFromActiveOption();
|
|
@@ -488,6 +492,7 @@ class ZAutocompleteComponent {
|
|
|
488
492
|
if (this._valueBeforeNavigation === null) {
|
|
489
493
|
this._valueBeforeNavigation = currentValue;
|
|
490
494
|
}
|
|
495
|
+
this._shouldScrollActiveOption = true;
|
|
491
496
|
this.activeIndex.update(i => (i > 0 ? i - 1 : options.length - 1));
|
|
492
497
|
if (isAddressBarMode) {
|
|
493
498
|
this._fillInputFromActiveOption();
|
|
@@ -804,8 +809,8 @@ class ZAutocompleteComponent {
|
|
|
804
809
|
state: this.state,
|
|
805
810
|
});
|
|
806
811
|
}
|
|
807
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
808
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
812
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZAutocompleteComponent, isStandalone: true, selector: "z-autocomplete", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", 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 }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", 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 }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zDynamicSize: { classPropertyName: "zDynamicSize", publicName: "zDynamicSize", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zHeightExpand: { classPropertyName: "zHeightExpand", publicName: "zHeightExpand", isSignal: true, isRequired: false, transformFunction: null }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zResetOnSelect: { classPropertyName: "zResetOnSelect", publicName: "zResetOnSelect", 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 }, zNoDataText: { classPropertyName: "zNoDataText", publicName: "zNoDataText", isSignal: true, isRequired: false, transformFunction: null }, zNoDataIcon: { classPropertyName: "zNoDataIcon", publicName: "zNoDataIcon", isSignal: true, isRequired: false, transformFunction: null }, zAllowCustomValue: { classPropertyName: "zAllowCustomValue", publicName: "zAllowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, zDebounceTime: { classPropertyName: "zDebounceTime", publicName: "zDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, zLoadingMore: { classPropertyName: "zLoadingMore", publicName: "zLoadingMore", isSignal: true, isRequired: false, transformFunction: null }, zEnableLoadMore: { classPropertyName: "zEnableLoadMore", publicName: "zEnableLoadMore", isSignal: true, isRequired: false, transformFunction: null }, zScrollDistance: { classPropertyName: "zScrollDistance", publicName: "zScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, zOptionTemplate: { classPropertyName: "zOptionTemplate", publicName: "zOptionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnLoadMore: "zOnLoadMore", zOnSelect: "zOnSelect", zOnEnter: "zOnEnter", zOnCommit: "zOnCommit", zValueChange: "zValueChange", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, providers: [
|
|
809
814
|
{
|
|
810
815
|
provide: NG_VALUE_ACCESSOR,
|
|
811
816
|
useExisting: forwardRef(() => ZAutocompleteComponent),
|
|
@@ -813,7 +818,7 @@ class ZAutocompleteComponent {
|
|
|
813
818
|
},
|
|
814
819
|
], queries: [{ propertyName: "customOptionDirective", first: true, predicate: (ZAutocompleteOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zAutocomplete"], ngImport: i0, template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"autocompleteId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n <div\n #triggerEl\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n [zOffset]=\"0\"\n [zDisabled]=\"isInteractionDisabled()\"\n zTrigger=\"manual\"\n zPosition=\"bottom\"\n zClass=\"border-0 shadow-none bg-transparent p-0\"\n (zControl)=\"onPopoverControl($event)\"\n (zShow)=\"onPopoverShow()\"\n (zHideStart)=\"onPopoverHideStart()\"\n (zHide)=\"onPopoverHideEnd()\"\n (zPositionChange)=\"onPositionChange($event)\"\n class=\"z-autocomplete-trigger\"\n [class]=\"inputClasses()\"\n [class.z-autocomplete-open]=\"uiState().isOpen\"\n [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"uiState().isOpen\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"dropdownId\">\n @if (zPrefix()) {\n <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n\n <input\n #inputEl\n [id]=\"autocompleteId\"\n type=\"text\"\n class=\"z-autocomplete-input min-w-0 flex-1 bg-transparent outline-none\"\n [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n [placeholder]=\"zPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"isReadonly()\"\n [value]=\"inputValue()\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"onInputClick()\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n spellcheck=\"false\" />\n\n @if (zLoading() || isLoadingState() || zLoadingMore()) {\n <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n } @else {\n @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n <button\n type=\"button\"\n class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n (mousedown)=\"clearInput($event)\"\n tabindex=\"-1\">\n <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n </button>\n }\n\n @if (zSuffix()) {\n <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n }\n </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n [id]=\"dropdownId\"\n class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-lg\"\n [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n [class.rounded-b-sm]=\"!isPositionTop()\"\n [class.rounded-t-sm]=\"isPositionTop()\"\n [class.border-t-0]=\"!isPositionTop()\"\n [class.border-b-0]=\"isPositionTop()\"\n [style.width.px]=\"dropdownWidth()\"\n role=\"listbox\"\n (mousedown)=\"$event.preventDefault()\">\n @if (zLoading() || isLoadingState()) {\n <div\n class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n [style.minHeight.px]=\"effectiveHeightExpand()\">\n <z-loading [zLoading]=\"true\" zSize=\"default\" />\n </div>\n } @else {\n @if (filteredOptions().length === 0) {\n <!-- Empty State -->\n <div\n class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n [style.minHeight.px]=\"effectiveHeightExpand()\">\n @if (inputValue().trim() !== '') {\n <!-- Searched but no results -->\n <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n } @else {\n <!-- No data initially -->\n <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n }\n </div>\n } @else if (shouldUseVirtualScroll()) {\n <!-- Virtual Scroll Mode -->\n <div\n #virtualScrollElement\n class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n [style.height.px]=\"effectiveHeightExpand()\">\n <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n @let opt = filteredOptions()[virtualItem.index];\n @let isActive = activeIndex() === virtualItem.index;\n <div\n #virtualOptionEl\n class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n [class.items-start]=\"hasCustomOptionTemplate()\"\n [attr.data-index]=\"virtualItem.index\"\n [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n [attr.aria-selected]=\"isActive\"\n role=\"option\"\n (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n (click)=\"selectOption(opt)\">\n @if (effectiveOptionTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n } @else {\n @if (opt.icon) {\n <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n <div class=\"min-w-0 flex-1\">\n <span\n class=\"block min-w-0 truncate\"\n z-tooltip\n [zContent]=\"opt.label\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"virtualOptionEl\"\n [innerHTML]=\"\n config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n \"></span>\n @if (opt.description) {\n <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n } @else {\n <!-- Normal Scroll Mode -->\n <div\n #optionsContainer\n class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n [style.minHeight.px]=\"effectiveHeightExpand()\"\n [style.maxHeight.px]=\"effectiveHeightExpand()\">\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n @let isActive = activeIndex() === i;\n <div\n #optionEl2\n class=\"z-autocomplete-option relative min-w-0\"\n [ngClass]=\"getOptionClasses(opt, i)\"\n [class.items-start]=\"hasCustomOptionTemplate()\"\n [style.minHeight.px]=\"effectiveOptionHeight()\"\n [attr.aria-selected]=\"isActive\"\n role=\"option\"\n (mouseenter)=\"activeIndex.set(i)\"\n (click)=\"selectOption(opt)\">\n @if (effectiveOptionTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n } @else {\n @if (opt.icon) {\n <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n }\n <div class=\"min-w-0 flex-1\">\n <span\n class=\"block min-w-0 truncate\"\n z-tooltip\n [zContent]=\"opt.label\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"optionEl2\"\n [innerHTML]=\"\n config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n \"></span>\n @if (opt.description) {\n <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n }\n </div>\n }\n </div>\n }\n @if (zEnableLoadMore()) {\n <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n }\n </div>\n }\n\n @if (zLoadingMore()) {\n <div class=\"z-autocomplete-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n </div>\n }\n }\n </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { 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: "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: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
815
820
|
}
|
|
816
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteComponent, decorators: [{
|
|
817
822
|
type: Component,
|
|
818
823
|
args: [{ selector: 'z-autocomplete', imports: [
|
|
819
824
|
FormsModule,
|