@shival99/z-ui 2.0.18 → 2.0.20

package/fesm2022/shival99-z-ui-components-z-select.mjs

@@ -1294,7 +1294,7 @@ class ZSelectComponent {
                 useExisting: forwardRef(() => ZSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" 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 class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\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() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                    [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  class=\"z-select-option relative min-w-0\"\n                  [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-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\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { 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"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { 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: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" 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 class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\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() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                    [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  class=\"z-select-option relative min-w-0\"\n                  [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-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\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { 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: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,