integra-ng 20.1.18 → 20.1.19

package/fesm2022/integra-ng.mjs

@@ -1992,11 +1992,11 @@ class IChipsComponent {
         this.closedAll.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n      <i-chip\n        [label]=\"chip.label\"\n        [icon]=\"chip.icon\"\n        [removable]=\"chip.removable ?? removable\"\n        [disabled]=\"disabled || !!chip.disabled\"\n        (onRemove)=\"onChipRemove(chip, $event)\"\n      ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n    <div class=\"i-chips-actions\">\n      <i-button\n        [text]=\"true\"\n        [size]=\"'xtra-small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"onCloseAllClicked($event)\"\n      ></i-button>\n    </div>\n    } @if (collapseOnOverflow && chipsOverflow) {\n    <div class=\"i-chips-summary\">\n      {{ overflowText }}\n    </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n  <label\n    class=\"i-chips-label\"\n    [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n    [class.i-chips-label--error]=\"showError\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-20px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-20px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n      <i-chip\n        [label]=\"chip.label\"\n        [icon]=\"chip.icon\"\n        [removable]=\"chip.removable ?? removable\"\n        [disabled]=\"disabled || !!chip.disabled\"\n        (onRemove)=\"onChipRemove(chip, $event)\"\n      ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n    <div class=\"i-chips-actions\">\n      <i-button\n        [text]=\"true\"\n        [size]=\"'xtra-small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"onCloseAllClicked($event)\"\n      ></i-button>\n    </div>\n    } @if (collapseOnOverflow && chipsOverflow) {\n    <div class=\"i-chips-summary\">\n      {{ overflowText }}\n    </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n  <label\n    class=\"i-chips-label\"\n    [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n    [class.i-chips-label--error]=\"showError\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-20px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-20px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-chips', standalone: true, imports: [CommonModule, IChip, IButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n      <i-chip\n        [label]=\"chip.label\"\n        [icon]=\"chip.icon\"\n        [removable]=\"chip.removable ?? removable\"\n        [disabled]=\"disabled || !!chip.disabled\"\n        (onRemove)=\"onChipRemove(chip, $event)\"\n      ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n    <div class=\"i-chips-actions\">\n      <i-button\n        [text]=\"true\"\n        [size]=\"'xtra-small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"onCloseAllClicked($event)\"\n      ></i-button>\n    </div>\n    } @if (collapseOnOverflow && chipsOverflow) {\n    <div class=\"i-chips-summary\">\n      {{ overflowText }}\n    </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n  <label\n    class=\"i-chips-label\"\n    [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n    [class.i-chips-label--error]=\"showError\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-20px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-20px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"] }]
+            args: [{ selector: 'i-chips', standalone: true, imports: [CommonModule, IChip, IButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n      <i-chip\n        [label]=\"chip.label\"\n        [icon]=\"chip.icon\"\n        [removable]=\"chip.removable ?? removable\"\n        [disabled]=\"disabled || !!chip.disabled\"\n        (onRemove)=\"onChipRemove(chip, $event)\"\n      ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n    <div class=\"i-chips-actions\">\n      <i-button\n        [text]=\"true\"\n        [size]=\"'xtra-small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"onCloseAllClicked($event)\"\n      ></i-button>\n    </div>\n    } @if (collapseOnOverflow && chipsOverflow) {\n    <div class=\"i-chips-summary\">\n      {{ overflowText }}\n    </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n  <label\n    class=\"i-chips-label\"\n    [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n    [class.i-chips-label--error]=\"showError\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:transparent}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-20px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-20px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chips: [{
                 type: Input
             }], removable: [{
@@ -3518,7 +3518,7 @@ class IListbox {
                 useExisting: forwardRef(() => IListbox),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && hasValue()) {\n    <i-chips\n      class=\"i-listbox-chips\"\n      [chips]=\"getSelectedChipItems()\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [collapseOnOverflow]=\"true\"\n      [overflowLabel]=\"getDisplayLabel()\"\n      (removeChip)=\"onChipRemove($event)\"\n    ></i-chips>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionLeftIcon(option)) {\n        <i\n          [class]=\"getOptionLeftIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right icon -->\n        @if (getOptionRightIcon(option)) {\n        <i\n          [class]=\"getOptionRightIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:12px 16px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }] });
+        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && hasValue()) {\n    <i-chips\n      class=\"i-listbox-chips\"\n      [chips]=\"getSelectedChipItems()\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [collapseOnOverflow]=\"true\"\n      [overflowLabel]=\"getDisplayLabel()\"\n      (removeChip)=\"onChipRemove($event)\"\n    ></i-chips>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"\n          !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n        \"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionLeftIcon(option)) {\n        <i\n          [class]=\"getOptionLeftIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right icon -->\n        @if (getOptionRightIcon(option)) {\n        <i\n          [class]=\"getOptionRightIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IListbox, decorators: [{
             type: Component,
@@ -3535,7 +3535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                             useExisting: forwardRef(() => IListbox),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && hasValue()) {\n    <i-chips\n      class=\"i-listbox-chips\"\n      [chips]=\"getSelectedChipItems()\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [collapseOnOverflow]=\"true\"\n      [overflowLabel]=\"getDisplayLabel()\"\n      (removeChip)=\"onChipRemove($event)\"\n    ></i-chips>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionLeftIcon(option)) {\n        <i\n          [class]=\"getOptionLeftIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right icon -->\n        @if (getOptionRightIcon(option)) {\n        <i\n          [class]=\"getOptionRightIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:12px 16px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"] }]
+                    ], template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && hasValue()) {\n    <i-chips\n      class=\"i-listbox-chips\"\n      [chips]=\"getSelectedChipItems()\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [collapseOnOverflow]=\"true\"\n      [overflowLabel]=\"getDisplayLabel()\"\n      (removeChip)=\"onChipRemove($event)\"\n    ></i-chips>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"\n          !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n        \"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionLeftIcon(option)) {\n        <i\n          [class]=\"getOptionLeftIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right icon -->\n        @if (getOptionRightIcon(option)) {\n        <i\n          [class]=\"getOptionRightIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--right\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips{padding:4px 0}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary);margin-left:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
                 type: Input
             }], label: [{