@shival99/z-ui 2.0.46 → 2.0.47
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-autocomplete.mjs +18 -3
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-command.mjs +302 -0
- package/fesm2022/shival99-z-ui-components-z-command.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-popover.mjs +13 -13
- package/fesm2022/shival99-z-ui-components-z-popover.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-select.mjs +18 -3
- package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-table.mjs +877 -14
- package/fesm2022/shival99-z-ui-components-z-table.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-i18n.mjs +22 -0
- package/fesm2022/shival99-z-ui-i18n.mjs.map +1 -1
- package/package.json +5 -1
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +1 -0
- package/types/shival99-z-ui-components-z-command.d.ts +86 -0
- package/types/shival99-z-ui-components-z-select.d.ts +1 -0
- package/types/shival99-z-ui-components-z-table.d.ts +166 -7
|
@@ -617,6 +617,7 @@ class ZAutocompleteComponent {
|
|
|
617
617
|
}
|
|
618
618
|
onPopoverShow() {
|
|
619
619
|
this.uiState.update(s => ({ ...s, isOpen: true }));
|
|
620
|
+
this._resetOptionsScrollTop();
|
|
620
621
|
this._loadAsyncOptionsOnFocus();
|
|
621
622
|
setTimeout(() => {
|
|
622
623
|
this.inputRef()?.nativeElement.focus();
|
|
@@ -844,7 +845,11 @@ class ZAutocompleteComponent {
|
|
|
844
845
|
this._asyncOptions.set(mergedOptions);
|
|
845
846
|
this._asyncPage.set(page);
|
|
846
847
|
this._asyncHasMore.set(append && !hasNewItems ? false : zResolveAsyncOptionsHasMore(response, pageSize, mergedOptions.length));
|
|
847
|
-
|
|
848
|
+
if (append) {
|
|
849
|
+
this._restoreAsyncOptionsScrollTop(scrollTopBeforeAppend);
|
|
850
|
+
return;
|
|
851
|
+
}
|
|
852
|
+
this._resetOptionsScrollTop();
|
|
848
853
|
},
|
|
849
854
|
error: error => {
|
|
850
855
|
if (requestId !== this._asyncRequestId) {
|
|
@@ -883,6 +888,16 @@ class ZAutocompleteComponent {
|
|
|
883
888
|
}
|
|
884
889
|
});
|
|
885
890
|
}
|
|
891
|
+
_resetOptionsScrollTop() {
|
|
892
|
+
requestAnimationFrame(() => {
|
|
893
|
+
const scrollElement = this.shouldUseVirtualScroll()
|
|
894
|
+
? this.virtualScrollRef()?.nativeElement
|
|
895
|
+
: this.optionsContainerRef()?.nativeElement;
|
|
896
|
+
if (scrollElement) {
|
|
897
|
+
scrollElement.scrollTop = 0;
|
|
898
|
+
}
|
|
899
|
+
});
|
|
900
|
+
}
|
|
886
901
|
_resetAsyncOptions() {
|
|
887
902
|
this._asyncLoadSubscription?.unsubscribe();
|
|
888
903
|
this._asyncRequestId++;
|
|
@@ -999,7 +1014,7 @@ class ZAutocompleteComponent {
|
|
|
999
1014
|
useExisting: forwardRef(() => ZAutocompleteComponent),
|
|
1000
1015
|
multi: true,
|
|
1001
1016
|
},
|
|
1002
|
-
], 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 zPopoverWidth=\"trigger\"\n zPopoverTrigger=\"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 z-tooltip\n [zContent]=\"inputValue()\"\n zTooltipTrigger=\"hover\"\n zTooltipPosition=\"top\"\n [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n [zTriggerElement]=\"inputEl\"\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 placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n [placeholder]=\"zPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"isReadonly()\"\n [value]=\"inputValue()\"\n (mousedown)=\"isReadonly() && $event.preventDefault()\"\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 (isLoading() || isLoadingState() || isLoadingMore()) {\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 (isLoading() || 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 (item of optionViews(); track item.trackKey) {\n @let opt = item.option;\n @let i = item.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 (canLoadMore()) {\n <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n }\n </div>\n }\n\n @if (isLoadingMore()) {\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", "zAnimatedType", "zAnimate", "zAnimationTrigger", "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", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "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 });
|
|
1017
|
+
], 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 zPopoverWidth=\"trigger\"\n zPopoverTrigger=\"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 z-tooltip\n [zContent]=\"inputValue()\"\n zTooltipTrigger=\"hover\"\n zTooltipPosition=\"top\"\n [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n [zTriggerElement]=\"inputEl\"\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 placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n [placeholder]=\"zPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"isReadonly()\"\n [value]=\"inputValue()\"\n (mousedown)=\"isReadonly() && $event.preventDefault()\"\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 (isLoading() || isLoadingState() || isLoadingMore()) {\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-[var(--z-popover-shadow)]\"\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 (isLoading() || 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 (item of optionViews(); track item.trackKey) {\n @let opt = item.option;\n @let i = item.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 (canLoadMore()) {\n <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n }\n </div>\n }\n\n @if (isLoadingMore()) {\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", "zAnimatedType", "zAnimate", "zAnimationTrigger", "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", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "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 });
|
|
1003
1018
|
}
|
|
1004
1019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteComponent, decorators: [{
|
|
1005
1020
|
type: Component,
|
|
@@ -1020,7 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
1020
1035
|
useExisting: forwardRef(() => ZAutocompleteComponent),
|
|
1021
1036
|
multi: true,
|
|
1022
1037
|
},
|
|
1023
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', 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 zPopoverWidth=\"trigger\"\n zPopoverTrigger=\"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 z-tooltip\n [zContent]=\"inputValue()\"\n zTooltipTrigger=\"hover\"\n zTooltipPosition=\"top\"\n [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n [zTriggerElement]=\"inputEl\"\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 placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n [placeholder]=\"zPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"isReadonly()\"\n [value]=\"inputValue()\"\n (mousedown)=\"isReadonly() && $event.preventDefault()\"\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 (isLoading() || isLoadingState() || isLoadingMore()) {\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 (isLoading() || 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 (item of optionViews(); track item.trackKey) {\n @let opt = item.option;\n @let i = item.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 (canLoadMore()) {\n <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n }\n </div>\n }\n\n @if (isLoadingMore()) {\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"] }]
|
|
1038
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', 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 zPopoverWidth=\"trigger\"\n zPopoverTrigger=\"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 z-tooltip\n [zContent]=\"inputValue()\"\n zTooltipTrigger=\"hover\"\n zTooltipPosition=\"top\"\n [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n [zTriggerElement]=\"inputEl\"\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 placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n [placeholder]=\"zPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"isReadonly()\"\n [value]=\"inputValue()\"\n (mousedown)=\"isReadonly() && $event.preventDefault()\"\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 (isLoading() || isLoadingState() || isLoadingMore()) {\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-[var(--z-popover-shadow)]\"\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 (isLoading() || 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 (item of optionViews(); track item.trackKey) {\n @let opt = item.option;\n @let i = item.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 (canLoadMore()) {\n <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n }\n </div>\n }\n\n @if (isLoadingMore()) {\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"] }]
|
|
1024
1039
|
}], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], virtualOptionElements: [{ type: i0.ViewChildren, args: ['virtualOptionEl', { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZAutocompleteOptionDirective), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zDynamicSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDynamicSize", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zHeightExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeightExpand", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zResetOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResetOnSelect", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zNoDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataText", required: false }] }], zNoDataIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataIcon", required: false }] }], zAllowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowCustomValue", required: false }] }], zDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounceTime", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnCommit: [{ type: i0.Output, args: ["zOnCommit"] }], zValueChange: [{ type: i0.Output, args: ["zValueChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }] } });
|
|
1025
1040
|
|
|
1026
1041
|
/**
|