@ardium-ui/ui 5.0.0-alpha.25 → 5.0.0-alpha.27

package/fesm2022/ardium-ui-ui.mjs

@@ -2,10 +2,10 @@ import 'first-last';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { signal, computed, InjectionToken, input, Directive, Input, HostBinding, output, ViewChildren, inject, Injector, runInInjectionContext, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, linkedSignal, contentChildren, Renderer2, Injectable } from '@angular/core';
+import { signal, computed, InjectionToken, input, Directive, Input, HostBinding, output, ViewChildren, inject, Injector, runInInjectionContext, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, linkedSignal, contentChildren, Renderer2, Injectable } from '@angular/core';
 import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i5 from '@ardium-ui/devkit';
-import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateProperty, ArdiumHoldModule } from '@ardium-ui/devkit';
+import { arraySignal, coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateProperty, ArdiumHoldModule } from '@ardium-ui/devkit';
 import { isDefined, any, isPrimitive, isAnyString, isNull, isNumber, isString, isArray, isFunction, isRegExp, evaluate, isObject, isPromise } from 'simple-bool';
 import { resolvePath } from 'resolve-object-path';
 import { toObservable } from '@angular/core/rxjs-interop';
@@ -22,7 +22,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 class SimplestItemStorage {
     constructor(_ardParentComp) {
         this._ardParentComp = _ardParentComp;
-        this._items = signal([]);
+        this._items = arraySignal([]);
         this._highlightedItem = signal(null);
         /**
          * Gets all items.
@@ -58,12 +58,12 @@ class SimplestItemStorage {
     _setItemsMapFn(rawItemData, index, areItemsPrimitive) {
         if (areItemsPrimitive) {
             return {
-                itemData: signal(rawItemData),
+                itemData: rawItemData,
                 index: index,
-                value: signal(rawItemData.value),
-                label: signal(rawItemData.value?.toString?.() ?? String(rawItemData.value)),
-                selected: signal(false),
-                highlighted: signal(false),
+                value: rawItemData.value,
+                label: rawItemData.value?.toString?.() ?? String(rawItemData.value),
+                selected: false,
+                highlighted: false,
             };
         }
         //get value
@@ -74,12 +74,12 @@ class SimplestItemStorage {
         const label = resolvePath(rawItemData, labelPath) ?? value;
         //return
         return {
-            itemData: signal(rawItemData),
+            itemData: rawItemData,
             index: index,
-            value: signal(value),
-            label: signal(label?.toString?.() ?? String(label)),
-            selected: signal(false),
-            highlighted: signal(false),
+            value: value,
+            label: label?.toString?.() ?? String(label),
+            selected: false,
+            highlighted: false,
         };
     }
     /**
@@ -102,7 +102,10 @@ class SimplestItemStorage {
     unhighlightCurrent() {
         const hi = this._highlightedItem();
         if (hi) {
-            hi.highlighted.set(false);
+            this._items.setAt(hi.index, {
+                ...hi,
+                highlighted: false,
+            });
         }
         this._highlightedItem.set(null);
     }
@@ -112,7 +115,10 @@ class SimplestItemStorage {
      */
     highlightItem(item) {
         this.unhighlightCurrent();
-        item.highlighted.set(true);
+        this._items.setAt(item.index, {
+            ...item,
+            highlighted: true,
+        });
         this._highlightedItem.set(item);
     }
     /**
@@ -120,7 +126,10 @@ class SimplestItemStorage {
      * @param item The item to be unhighlighted.
      */
     unhighlightItem(item) {
-        item.highlighted.set(false);
+        this._items.setAt(item.index, {
+            ...item,
+            highlighted: false,
+        });
         if (this._highlightedItem()?.index === item.index)
             this._highlightedItem.set(null);
     }
@@ -1245,6 +1254,16 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
         //! suggestions overlay
         this.dropdownHost = viewChild('suggestionsHost');
         this.dropdownTemplate = viewChild('suggestionsTemplate', { read: TemplateRef });
+        this.optionContextGenerator = computed(() => item => ({
+            $implicit: item,
+            item,
+            index: item.index,
+            value: item.value,
+            label: item.label,
+            selected: item.selected,
+            highlighted: item.highlighted,
+            itemData: item.itemData,
+        }));
         //! suggestion-highligh-related
         this._isMouseBeingUsed = false;
         //! suggestion appearance
@@ -1302,13 +1321,6 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
         const rect = this.dropdownHost()?.nativeElement.getBoundingClientRect();
         this.dropdownOverlay.updateSize({ width: rect?.width });
     }
-    getOptionContext(item) {
-        return {
-            $implicit: item,
-            item,
-            itemData: item.itemData,
-        };
-    }
     onMouseMove() {
         this._isMouseBeingUsed = true;
     }
@@ -1415,7 +1427,7 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumAutocompleteInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdAutocompleteInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdAutocompleteInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdAutocompleteInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdAutocompleteInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdAutocompleteInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdAutocompleteInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdAutocompleteInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdAutocompleteInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdAutocompleteInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdAutocompleteInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected\"\r\n        [class.ard-option-highlighted]=\"item.highlighted\"\r\n        [attr.aria-selected]=\"item.selected\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumAutocompleteInputComponent, decorators: [{
             type: Component,
@@ -1429,7 +1441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumAutocompleteInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected\"\r\n        [class.ard-option-highlighted]=\"item.highlighted\"\r\n        [attr.aria-selected]=\"item.selected\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_AUTOCOMPLETE_INPUT_DEFAULTS]
@@ -2657,43 +2669,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class ItemStorage {
+    _updateItems(updateFn) {
+        this._items.map(updateFn);
+    }
+    _updateItemsFromArray(updateFn, itemsToUpdate) {
+        this._items.update(items => {
+            for (const itemToUpdate of itemsToUpdate) {
+                const item = items[itemToUpdate.index];
+                if (item) {
+                    items[itemToUpdate.index] = updateFn(item);
+                }
+            }
+            return items;
+        });
+    }
     constructor(_ardParentComp) {
         this._ardParentComp = _ardParentComp;
-        this._groups = signal(this._createEmptyGroupMap());
-        this._items = signal([]);
-        this._filteredItems = signal([]);
-        this._highlightedItems = signal([]);
-        this._highlightedGroups = signal([]);
+        this._items = arraySignal([]);
+        this.filteredItems = computed(() => this.items().filter(item => item.filtered));
+        this.selectedItems = computed(() => this.items().filter(item => item.selected));
+        this.highlightedItems = computed(() => this.items().filter(item => item.highlighted));
+        this._lastHighlightedItem = signal(undefined);
         this._recentlyHighlightedItem = signal(undefined);
-        this._selectedItems = signal([]);
-        this.groups = computed(() => Array.from(this._groups().entries())
-            .map(([, group]) => group)
-            .filter(group => group.children().length));
-        this.items = this._items.asReadonly();
-        this.filteredItems = this._filteredItems.asReadonly();
-        this.highlightedItems = this._highlightedItems.asReadonly();
-        this.selectedItems = computed(() => {
-            if (this._ardParentComp.sortMultipleValues()) {
-                return [...this._selectedItems()].sort((a, b) => {
-                    return a.index - b.index;
-                });
+        this._groups = computed(() => {
+            const groupMap = this._createEmptyGroupMap();
+            for (const item of this.filteredItems()) {
+                if (this._ardParentComp.hideSelected() && item.selected)
+                    continue;
+                let group = groupMap.get(item.group);
+                if (!group) {
+                    group = {
+                        label: item.group?.toString?.() ?? String(item.group),
+                        children: [],
+                        disabled: false,
+                    };
+                    groupMap.set(item.group, group);
+                }
+                group.children.push(item);
             }
-            return this._selectedItems();
+            return groupMap;
         });
-        this.lastSelectedItem = computed(() => this._filteredItems().last(1, item => !item.disabled()));
+        this.groups = computed(() => Array.from(this._groups().entries())
+            .map(([, group]) => group)
+            .filter(group => group.children.length));
+        this.items = computed(() => [...this._items()]);
+        this.lastSelectedItem = computed(() => this.selectedItems().last(1, item => !item.disabled));
         this.value = computed(() => this._itemsToValue(this.selectedItems()));
-        this.isNoItemsToSelect = computed(() => this._items().length === this._selectedItems().length);
-        this.isNoItemsFound = computed(() => this._filteredItems().length === 0);
-        this.isAnyItemSelected = computed(() => this._selectedItems().length > 0);
-        this.isAnyItemHighlighted = computed(() => this._highlightedItems().length > 0);
-        this.isItemLimitReached = computed(() => this._ardParentComp.multiselectable() &&
-            isDefined(this._ardParentComp.maxSelectedItems()) &&
-            this._ardParentComp.maxSelectedItems() <= this.selectedItems().length);
-        this._valueToWriteAfterItemsLoad = signal(undefined);
-        this._wasValueWriteDeferred = signal(false);
+        this.isNoItemsToSelect = computed(() => this.items().length === this.selectedItems().length);
+        this.isNoItemsFound = computed(() => this.filteredItems().length === 0);
+        this.isAnyItemSelected = computed(() => this.selectedItems().length > 0);
+        this.isAnyItemHighlighted = computed(() => this.highlightedItems().length > 0);
+        this.itemsLeftUntilLimit = computed(() => this._ardParentComp.multiselectable() && isDefined(this._ardParentComp.maxSelectedItems())
+            ? this._ardParentComp.maxSelectedItems() - this.selectedItems().length
+            : 1);
+        this.isItemLimitReached = computed(() => this.itemsLeftUntilLimit() <= 0);
+        this._highlightableItems = computed(() => this.filteredItems().filter(item => !item.disabled && (this._ardParentComp.hideSelected() ? !item.selected : this.isItemLimitReached() ? item.selected : true)));
+        this._valueToWriteAfterItemsLoad = null;
+        this._wasValueWriteDeferred = false;
     }
     _itemsToValue(items) {
-        return items.map(item => item.value());
+        return items.map(item => item.value);
     }
     setItems(items) {
         let areItemsPrimitive = false;
@@ -2713,16 +2748,18 @@ class ItemStorage {
         this._items.set(items.map((item, index) => {
             return this._setItemsMapFn(item, index, areItemsPrimitive);
         }));
-        //add all items to filter array
-        this._filteredItems.set(this._items());
-        //add items to groups
-        this._populateGroups();
-        //write value if it was
-        const toWrite = this._valueToWriteAfterItemsLoad();
-        if (toWrite !== undefined) {
-            this.handleWriteValue(toWrite);
+        // write value if it was deferred
+        if (isDefined(this._valueToWriteAfterItemsLoad)) {
+            this.handleWriteValue(this._valueToWriteAfterItemsLoad);
         }
     }
+    updateItemFromOptionComponent(itemValue, updatedItem) {
+        const item = this.findItemByValue(itemValue);
+        if (!item)
+            return;
+        const index = item.index;
+        this._items.setAt(index, { ...item, ...updatedItem });
+    }
     _addSingleItem(item) {
         const isItemPrimitive = isPrimitive(item);
         //map a primitive item to a usable object
@@ -2730,13 +2767,11 @@ class ItemStorage {
             item = this._primitiveItemsMapFn(item);
         }
         //map the item to create data bindings
-        const ardOption = this._setItemsMapFn(item, (this._items().last()?.index ?? 0) + 1, isItemPrimitive);
+        const ardOption = this._setItemsMapFn(item, (this.items().last()?.index ?? 0) + 1, isItemPrimitive);
         //push the item into all items
-        this._items.update(v => [...v, ardOption]);
+        this._items.push(ardOption);
         //add all items to filter array
-        this._filteredItems.set(this._items());
-        //add item to groups
-        this._populateGroups();
+        this._updateItems(item => ({ ...item, filtered: true }));
         return ardOption;
     }
     _primitiveItemsMapFn(item) {
@@ -2775,15 +2810,16 @@ class ItemStorage {
     _setItemsMapFn(rawItemData, index, areItemsPrimitive) {
         if (areItemsPrimitive) {
             return {
-                itemData: signal(rawItemData),
+                itemData: rawItemData,
                 index: index,
-                value: signal(rawItemData.value),
-                label: signal(rawItemData.value?.toString?.() ?? String(rawItemData.value)),
-                disabled: signal(false),
-                selected: signal(false),
-                highlighted: signal(false),
+                value: rawItemData.value,
+                label: rawItemData.value?.toString?.() ?? String(rawItemData.value),
+                disabled: false,
+                filtered: true,
+                selected: false,
+                highlighted: false,
                 group: undefined,
-                highlighted_recently: signal(false),
+                highlighted_recently: false,
             };
         }
         //get value
@@ -2815,55 +2851,28 @@ class ItemStorage {
             }
         }
         return {
-            itemData: signal(rawItemData),
+            itemData: rawItemData,
             index: index,
-            value: signal(value),
-            label: signal(label?.toString?.() ?? String(label)),
-            disabled: signal(disabled),
+            value: value,
+            label: label?.toString?.() ?? String(label),
+            disabled: disabled,
             group: group,
-            selected: signal(false),
-            highlighted: signal(false),
-            highlighted_recently: signal(false),
+            filtered: true,
+            selected: false,
+            highlighted: false,
+            highlighted_recently: false,
         };
     }
-    _populateGroups() {
-        this._groups.set(this._createEmptyGroupMap());
-        for (const item of this._filteredItems()) {
-            if (this._ardParentComp.hideSelected() && item.selected())
-                continue;
-            this._addToGroup(item);
-        }
-    }
-    _addToGroup(item) {
-        const groupKey = item.group;
-        const targetGroup = this._groups().get(groupKey);
-        //create new group if no such group exists
-        if (!targetGroup) {
-            this._groups.update(v => {
-                const map = new Map(v);
-                map.set(groupKey, {
-                    label: signal(String(groupKey ?? '')),
-                    children: signal([item]),
-                    disabled: signal(false),
-                    selected: signal(false),
-                    highlighted: signal(false),
-                });
-                return map;
-            });
-            return;
-        }
-        targetGroup.children.update(v => [...v, item]);
-    }
     _createEmptyGroupMap() {
         return new Map([
             [
                 undefined,
                 {
-                    label: signal(''),
-                    children: signal([]),
-                    disabled: signal(false),
-                    selected: signal(false),
-                    highlighted: signal(false),
+                    label: '',
+                    children: [],
+                    disabled: false,
+                    selected: false,
+                    highlighted: false,
                 },
             ],
         ]);
@@ -2879,8 +2888,9 @@ class ItemStorage {
     }
     handleWriteValue(ngModel) {
         //defer writing the value if no options are yet loaded
-        if (!this._wasValueWriteDeferred() && this._items().length === 0) {
-            this._valueToWriteAfterItemsLoad.set(ngModel);
+        if (!this._wasValueWriteDeferred && this._items().length === 0) {
+            this._valueToWriteAfterItemsLoad = ngModel;
+            this._wasValueWriteDeferred = true;
             return;
         }
         // if null or undefined clear selection
@@ -2892,11 +2902,12 @@ class ItemStorage {
         if (!isArray(ngModel)) {
             ngModel = [ngModel];
         }
+        const ngModelArray = ngModel;
         // check value validity
-        if (!this._isWriteValueValid(ngModel)) {
+        if (!this._isWriteValueValid(ngModelArray)) {
             return;
         }
-        const itemsToSelect = ngModel
+        const itemsToSelect = ngModelArray
             .map(v => {
             const item = this.findItemByValue(v);
             if (item) {
@@ -2911,12 +2922,12 @@ class ItemStorage {
     findItemByValue(valueToFind) {
         let findBy;
         if (this._ardParentComp.compareWith()) {
-            findBy = item => this._ardParentComp.compareWith()(valueToFind, item.value());
+            findBy = item => this._ardParentComp.compareWith()(valueToFind, item.value);
         }
         else {
-            findBy = item => item.value() === valueToFind;
+            findBy = item => item.value === valueToFind;
         }
-        return this._items().find(item => findBy(item));
+        return this.items().find(item => findBy(item));
     }
     async addCustomOption(value, fn) {
         const fnResult = fn(value);
@@ -2933,20 +2944,13 @@ class ItemStorage {
         const newOptionObj = this._addSingleItem(optionValue);
         return newOptionObj;
     }
-    clearAllSelected(repopulateGroups = false) {
-        for (const item of this._selectedItems()) {
-            item.selected.set(false);
-        }
-        const removedItemValues = this._itemsToValue(this._selectedItems());
-        if (this._selectedItems().length) {
-            this._selectedItems.set([]);
-        }
-        if (repopulateGroups && this._ardParentComp.hideSelected())
-            this._populateGroups();
+    clearAllSelected() {
+        const removedItemValues = this._itemsToValue(this.selectedItems());
+        this._updateItems(item => ({ ...item, selected: false }));
         return removedItemValues;
     }
     clearLastSelected() {
-        const item = this._selectedItems().last();
+        const item = this.selectedItems().last();
         if (!item)
             return item;
         this.unselectItem(item);
@@ -2956,120 +2960,94 @@ class ItemStorage {
         if (this.isItemLimitReached()) {
             return [[], [], this._itemsToValue(items)];
         }
+        const itemsLeftUntilLimit = this.itemsLeftUntilLimit();
         let itemsSelectedCount = 0;
+        const newItemsArray = [...this.items()];
         for (const item of items) {
             itemsSelectedCount++;
-            if (item.selected())
+            if (item.selected)
                 continue;
-            if (this.isItemLimitReached()) {
+            if (itemsSelectedCount > itemsLeftUntilLimit) {
                 break;
             }
-            item.selected.set(true);
-        }
-        if (this._ardParentComp.hideSelected()) {
-            this._populateGroups();
+            newItemsArray[item.index] = { ...item, selected: true };
         }
         const itemsUnselected = this._ardParentComp.multiselectable()
             ? []
-            : this._selectedItems().filter(item => !items.find(v => v.value === item.value));
+            : this.selectedItems().filter(item => !items.find(v => v.value === item.value));
+        for (const item of itemsUnselected) {
+            newItemsArray[item.index] = { ...item, selected: false };
+        }
         const itemsSelected = items.slice(0, itemsSelectedCount);
         const itemsFailedToSelect = items.slice(itemsSelectedCount);
-        const isAnyNewItemToBeSelected = !!itemsSelected.find(item => !this._selectedItems().find(v => v.value === item.value));
+        const isAnyNewItemToBeSelected = !!itemsSelected.find(item => !this.selectedItems().find(v => v.value === item.value));
         if (isAnyNewItemToBeSelected) {
-            if (this._ardParentComp.multiselectable()) {
-                this._selectedItems.update(v => [...v, ...itemsSelected]);
-            }
-            else {
-                this._selectedItems.set(itemsSelected);
-            }
+            this._items.set(newItemsArray);
         }
-        return [this._itemsToValue(itemsSelected), itemsUnselected, this._itemsToValue(itemsFailedToSelect)];
+        if (!this._lastHighlightedItem()) {
+            this._lastHighlightedItem.set(itemsFailedToSelect.first() || itemsSelected.last());
+        }
+        return [this._itemsToValue(itemsSelected), this._itemsToValue(itemsUnselected), this._itemsToValue(itemsFailedToSelect)];
     }
     unselectItem(...items) {
-        for (const item of items) {
-            if (!item.selected())
-                continue;
-            item.selected.set(false);
-        }
-        this._selectedItems.update(v => v.filter(v => v.selected()));
-        if (this._ardParentComp.hideSelected()) {
-            this._populateGroups();
+        this._updateItemsFromArray(item => ({ ...item, selected: false }), items);
+        if (!this._lastHighlightedItem()) {
+            this._lastHighlightedItem.set(items.last());
         }
         return this._itemsToValue(items);
     }
-    clearAllHighlights() {
-        for (const item of this._highlightedItems()) {
-            item.highlighted.set(false);
-        }
-        for (const group of this._highlightedGroups()) {
-            group.highlighted.set(false);
+    toggleItem(item) {
+        if (item.selected) {
+            this.unselectItem(item);
+            return;
         }
-        this._highlightedItems.set([]);
-        this._highlightedGroups.set([]);
+        this.selectItem(item);
+    }
+    clearAllHighlights() {
+        this._updateItems(item => ({ ...item, highlighted: false }));
     }
     highlightGroup(group) {
-        this.clearAllHighlights();
-        group.highlighted.set(true);
-        this.highlightItem(...group.children());
-        return group.children().first();
+        const childrenIndexes = new Set(group.children.map(item => item.index));
+        this._updateItems(item => ({ ...item, highlighted: childrenIndexes.has(item.index) }));
+        return group.children.first();
     }
     highlightSingleItem(item) {
-        if (!item || item.disabled())
+        if (!item || item.disabled)
             return null;
         this.clearAllHighlights();
         return this.highlightItem(item);
     }
     highlightItem(...items) {
-        for (const item of items) {
-            item.highlighted.set(true);
-        }
-        this._highlightedItems.update(v => [...v, ...items]);
+        this._updateItemsFromArray(item => ({ ...item, highlighted: true }), items);
+        this._lastHighlightedItem.set(items.last());
         return items.last();
     }
     unhighlightItem(...items) {
-        for (const item of items) {
-            if (!item || !item.highlighted)
-                return;
-            item.highlighted.set(false);
-        }
-        this._highlightedItems.update(v => v.filter(v => v.highlighted()));
+        this._updateItemsFromArray(item => ({ ...item, highlighted: false }), items);
     }
     highlightFirstItem() {
         this.clearAllHighlights();
-        const itemsToHighlight = this._getHiglightableItems();
+        const itemsToHighlight = this._highlightableItems();
         return this.highlightSingleItem(itemsToHighlight.first());
     }
     highlightLastItem() {
         this.clearAllHighlights();
-        const itemsToHighlight = this._getHiglightableItems();
+        const itemsToHighlight = this._highlightableItems();
         return this.highlightSingleItem(itemsToHighlight.last());
     }
-    _getHiglightableItems() {
-        let itemsToHighlight = this._filteredItems().filter(item => !item.disabled());
-        if (this._ardParentComp.hideSelected()) {
-            itemsToHighlight = itemsToHighlight.filter(item => !item.selected());
-        }
-        return itemsToHighlight;
-    }
     highlightAllItems() {
-        this.highlightItem(...this._getHiglightableItems());
-    }
-    _clearRecentlyHighlighted() {
-        if (this._recentlyHighlightedItem()) {
-            this._recentlyHighlightedItem().highlighted_recently.set(false);
-        }
+        this.highlightItem(...this._highlightableItems());
     }
-    setRecentlyHighlighted(item) {
-        this._clearRecentlyHighlighted();
-        item.highlighted_recently.set(true);
-        this._recentlyHighlightedItem.set(item);
+    setRecentlyHighlighted(itemToSet) {
+        this._updateItemsFromArray(item => ({ ...item, highlighted_recently: itemToSet.index === item.index }), [itemToSet]);
+        this._recentlyHighlightedItem.set(itemToSet);
     }
     highlightNextItem(offset, hasShift) {
         if (!this.isAnyItemHighlighted()) {
             return this.highlightFirstItem();
         }
-        const currentItem = this.highlightedItems().last();
-        const highlightableItems = this._getHiglightableItems();
+        const currentItem = this._lastHighlightedItem() ?? this._highlightableItems().first();
+        const highlightableItems = this._highlightableItems();
         const currentIndexInFiltered = highlightableItems.findIndex(item => item.index === currentItem.index);
         let nextItemIndex = currentIndexInFiltered + offset;
         if (nextItemIndex >= highlightableItems.length) {
@@ -3080,7 +3058,7 @@ class ItemStorage {
         }
         const itemToHighlight = highlightableItems[nextItemIndex];
         if (hasShift && this._ardParentComp.multiselectable()) {
-            if (itemToHighlight.highlighted()) {
+            if (itemToHighlight.highlighted) {
                 this.unhighlightItem(currentItem);
             }
             return this.highlightItem(itemToHighlight);
@@ -3095,24 +3073,18 @@ class ItemStorage {
             filterTerm = filterTerm.toLocaleLowerCase();
         }
         const searchFn = this._ardParentComp.searchFn();
-        const newFilteredItems = this._items().filter(item => searchFn(filterTerm, item));
-        this._filteredItems.set(newFilteredItems);
-        this._populateGroups();
+        this._updateItems(item => ({ ...item, filtered: searchFn(filterTerm, item) }));
         if (!this.isNoItemsFound)
             this.highlightFirstItem();
         else
             this.clearAllHighlights();
-        return this._itemsToValue(newFilteredItems);
+        return this._itemsToValue(this.filteredItems());
     }
     resetFiltered() {
-        if (this._filteredItems().length === this._items().length)
-            return this._items();
-        let newFilteredItems = this._items();
-        if (this._ardParentComp.hideSelected() && this.isAnyItemSelected()) {
-            newFilteredItems = newFilteredItems.filter(item => !item.selected());
-        }
-        this._populateGroups();
-        return newFilteredItems;
+        if (this.filteredItems().length === this.items().length)
+            return this.items();
+        this._updateItems(item => ({ ...item, filtered: true }));
+        return this.items();
     }
 }
 
@@ -3129,7 +3101,7 @@ const searchFunctions = {
      * @returns `true` if the item matches the search term, otherwise `false`.
      */
     byLabel: (searchTerm, item) => {
-        return searchInString(searchTerm, item.label());
+        return searchInString(searchTerm, item.label);
     },
     /**
      * Determines if the item should appear in the search results, based on the value only.
@@ -3138,7 +3110,7 @@ const searchFunctions = {
      * @returns `true` if the item matches the search term, otherwise `false`.
      */
     byValue: (searchTerm, item) => {
-        return searchInString(searchTerm, item.value());
+        return searchInString(searchTerm, item.value);
     },
     /**
      * Determines if the item should appear in the search results, based on the group only.
@@ -3156,7 +3128,7 @@ const searchFunctions = {
      * @returns `true` if the item matches the search term, otherwise `false`.
      */
     byLabelAndGroup: (searchTerm, item) => {
-        return (searchFunctions.byLabel(searchTerm, item) || (item.label() !== item.value() && searchFunctions.byValue(searchTerm, item)));
+        return (searchFunctions.byLabel(searchTerm, item) || (item.label !== item.value && searchFunctions.byValue(searchTerm, item)));
     },
     /**
      * Determines if the item should appear in the search results, based on the label and value.
@@ -3175,7 +3147,7 @@ const searchFunctions = {
      */
     byLabelAndGroupAndValue: (searchTerm, item) => {
         return (searchFunctions.byLabel(searchTerm, item) ||
-            (item.label() !== item.value() && searchFunctions.byValue(searchTerm, item)) ||
+            (item.label !== item.value && searchFunctions.byValue(searchTerm, item)) ||
             searchFunctions.byGroup(searchTerm, item));
     },
 };
@@ -3587,16 +3559,19 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.itemsAlreadyGrouped = input(this._DEFAULTS.itemsAlreadyGrouped, {
             transform: v => coerceBooleanProperty(v),
         });
-        this.invertDisabled = input(this._DEFAULTS.invertDisabled, { transform: v => coerceBooleanProperty(v) });
-        this.noGroupActions = input(this._DEFAULTS.noGroupActions, { transform: v => coerceBooleanProperty(v) });
+        this.invertDisabled = input(this._DEFAULTS.invertDisabled, {
+            transform: v => coerceBooleanProperty(v),
+        });
+        this.noGroupActions = input(this._DEFAULTS.noGroupActions, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.autoHighlightFirst = input(this._DEFAULTS.autoHighlightFirst, {
             transform: v => coerceBooleanProperty(v),
         });
         this.autoFocus = input(this._DEFAULTS.autoFocus, { transform: v => coerceBooleanProperty(v) });
         this.keepOpen = input(this._DEFAULTS.keepOpen, { transform: v => coerceBooleanProperty(v) });
         this.hideSelected = input(this._DEFAULTS.hideSelected, { transform: v => coerceBooleanProperty(v) });
-        this.noBackspaceClear = input(this._DEFAULTS.noBackspaceClear, { transform: v => coerceBooleanProperty(v) });
-        this.sortMultipleValues = input(this._DEFAULTS.sortMultipleValues, {
+        this.noBackspaceClear = input(this._DEFAULTS.noBackspaceClear, {
             transform: v => coerceBooleanProperty(v),
         });
         this.searchCaseSensitive = input(this._DEFAULTS.searchCaseSensitive, {
@@ -3649,7 +3624,9 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
             return variant;
         });
         //! attribute and/or class setters/getters
-        this.multiselectable = input(this._DEFAULTS.multiselectable, { transform: v => coerceBooleanProperty(v) });
+        this.multiselectable = input(this._DEFAULTS.multiselectable, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.clearable = input(this._DEFAULTS.clearable, { transform: v => coerceBooleanProperty(v) });
         this.searchable = input(this._DEFAULTS.searchable, { transform: v => coerceBooleanProperty(v) });
         this.filtered = computed(() => this.searchable() && this.searchTerm() !== '');
@@ -3669,7 +3646,6 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.shouldShowAddCustom = computed(() => this.addCustom() !== false && this.searchTerm().length > 0 && this.itemStorage.isNoItemsFound());
         this.valueChange = output();
         //! output events
-        this.changeEvent = output({ alias: 'change' });
         this.addEvent = output({ alias: 'add' });
         this.failedToAddEvent = output({ alias: 'failedToAdd' });
         this.removeEvent = output({ alias: 'remove' });
@@ -3699,6 +3675,34 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.itemDisplayLimitTemplate = contentChild(ArdItemDisplayLimitTemplateDirective);
         this.prefixTemplate = contentChild(ArdSelectPrefixTemplateDirective);
         this.suffixTemplate = contentChild(ArdSelectSuffixTemplateDirective);
+        //! context providers
+        this.optionContextGenerator = computed(() => item => ({
+            $implicit: item,
+            item,
+            index: item.index,
+            value: item.value,
+            label: item.label,
+            selected: item.selected,
+            highlighted: item.highlighted,
+            itemData: item.itemData,
+            group: item.group,
+            disabled: item.disabled,
+            highlighted_recently: item.highlighted_recently,
+        }));
+        this.valueContextGenerator = computed(() => item => ({
+            ...this.optionContextGenerator()(item),
+            unselect: () => {
+                this.unselectItem(item);
+            },
+        }));
+        this.groupContextGenerator = computed(() => group => ({
+            $implicit: group,
+            group,
+            label: group.label,
+            disabled: group.disabled,
+            selectedChildrenCount: group.children.filter(v => v.selected).length,
+            totalChildrenCount: group.children.length,
+        }));
         this.getStatsContext = computed(() => ({
             totalItems: this.totalItems(),
             foundItems: this.foundItems(),
@@ -3739,6 +3743,9 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.overlay = inject(Overlay);
         this.viewContainerRef = inject(ViewContainerRef);
         this.scrollStrategyOpts = inject(ScrollStrategyOptions);
+        //! dropdown overlay
+        this.dropdownHost = viewChild.required('dropdownHost');
+        this.dropdownTemplate = viewChild.required('dropdownTemplate');
         this.dropdownPanelWidth = input(this._DEFAULTS.dropdownPanelWidth, {
             transform: transformDropdownPanelSize,
         });
@@ -3798,18 +3805,16 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 .pipe(takeUntil(changedOrDestroyed))
                 .subscribe(option => {
                 setTimeout(() => {
-                    const item = this.itemStorage.findItemByValue(option.oldValue ?? option.value);
-                    if (item) {
-                        item.disabled.set(option.disabled);
-                        item.label.set(option.label || item.label());
-                        item.value.set(option.value);
-                        item.itemData.set({
-                            label: option.label || item.label(),
+                    this.itemStorage.updateItemFromOptionComponent(option.oldValue ?? option.value, {
+                        disabled: option.disabled,
+                        label: option.label || undefined,
+                        value: option.value,
+                        itemData: {
+                            label: option.label,
                             value: option.value,
                             disabled: option.disabled,
-                        });
-                    }
-                    this.detectChanges();
+                        },
+                    });
                 }, 0);
             });
         };
@@ -3854,7 +3859,6 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     _emitChange() {
         const value = this.multiselectable() ? this.itemStorage.value() : this.itemStorage.value()[0];
         this._onChangeRegistered?.(value);
-        this.changeEvent.emit(value);
         this.valueChange.emit(value);
     }
     _onTouched() {
@@ -3874,36 +3878,10 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     get value() {
         return this.itemStorage.value;
     }
-    //! context providers
-    getValueContext(item) {
-        return {
-            $implicit: item,
-            item,
-            itemData: item.itemData(),
-            unselect: () => {
-                this.unselectItem(item);
-            },
-        };
-    }
-    getGroupContext(group) {
-        return {
-            $implicit: group,
-            group,
-            selectedChildren: group.children().filter(v => v.selected()).length,
-            totalChildren: group.children().length,
-        };
-    }
-    getOptionContext(item) {
-        return {
-            $implicit: item,
-            item,
-            itemData: item.itemData(),
-        };
-    }
     _createOverlay() {
         const strategy = this.overlay
             .position()
-            .flexibleConnectedTo(this.dropdownHost)
+            .flexibleConnectedTo(this.dropdownHost())
             .withFlexibleDimensions(false)
             .withPositions([
             {
@@ -3943,7 +3921,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
             maxHeight: this.dropdownPanelMaxHeight() ?? undefined,
         });
         this.dropdownOverlay = this.overlay.create(config);
-        const portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
+        const portal = new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef);
         this.dropdownOverlay.attach(portal);
         this.setOverlaySize();
     }
@@ -3956,7 +3934,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     setOverlaySize() {
         if (!this.dropdownOverlay)
             return;
-        const rect = this.dropdownHost.nativeElement.getBoundingClientRect();
+        const rect = this.dropdownHost().nativeElement.getBoundingClientRect();
         this.dropdownOverlay.updateSize({ width: rect.width });
     }
     onWindowResize() {
@@ -4017,7 +3995,8 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     }
     //! item selection handlers
     toggleItem(item) {
-        if (item.selected()) {
+        // don't use itemStorage.toggleItem() - we need to emit different events for select/unselect
+        if (item.selected) {
             this.unselectItem(item);
             return;
         }
@@ -4056,14 +4035,14 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         }
     }
     _clearAllItems() {
-        const cleared = this.itemStorage.clearAllSelected(true);
+        const cleared = this.itemStorage.clearAllSelected();
         this.focus();
         this.clearEvent.emit();
         this.removeEvent.emit(cleared);
         this._emitChange();
     }
     _clearLastItem() {
-        const clearedValue = this.itemStorage.clearLastSelected().value();
+        const clearedValue = this.itemStorage.clearLastSelected().value;
         this.focus();
         this.removeEvent.emit([clearedValue]);
         this._emitChange();
@@ -4094,7 +4073,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     }
     onItemClick(option, event) {
         event.stopPropagation();
-        if (this.clearable())
+        if (this.clearable() || this.multiselectable())
             this.toggleItem(option);
         else
             this.selectItem(option);
@@ -4103,11 +4082,11 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     onGroupClick(group) {
         if (!this.multiselectable() || this.noGroupActions())
             return;
-        if (group.children().every(o => o.selected)) {
-            this.unselectItem(...group.children());
+        if (group.children.every(o => o.selected)) {
+            this.unselectItem(...group.children);
             return;
         }
-        this.selectItem(...group.children());
+        this.selectItem(...group.children);
         this._isClickedWithin.set(true);
     }
     handleClearButtonClick(event) {
@@ -4248,9 +4227,10 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     async _onEnterPress(event) {
         event.preventDefault();
         let shouldClose = true;
+        console.log('enter pressed', this.itemStorage.highlightedItems());
         //select the currently highlighted option
         if (this.isOpen() && this.firstHighlightedItem()) {
-            if (this.clearable() && this.itemStorage.highlightedItems().every(item => item.selected)) {
+            if ((this.clearable() || this.multiselectable()) && this.itemStorage.highlightedItems().every(item => item.selected)) {
                 this.unselectItem(...this.itemStorage.highlightedItems());
             }
             else {
@@ -4262,8 +4242,9 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
             await this.addCustomOption(this.searchTerm());
         }
         //in case of no action, open the dropdown (or keep it open)
-        else
+        else {
             shouldClose = false;
+        }
         if (!this.keepOpen() && shouldClose) {
             this.itemStorage.clearAllHighlights();
             this.close();
@@ -4338,7 +4319,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.itemStorage.highlightAllItems();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectComponent, deps: [{ token: ARD_SELECT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumSelectComponent, isStandalone: false, selector: "ard-select", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, groupLabelFrom: { classPropertyName: "groupLabelFrom", publicName: "groupLabelFrom", isSignal: true, isRequired: false, transformFunction: null }, groupDisabledFrom: { classPropertyName: "groupDisabledFrom", publicName: "groupDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, childrenFrom: { classPropertyName: "childrenFrom", publicName: "childrenFrom", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, noItemsFoundText: { classPropertyName: "noItemsFoundText", publicName: "noItemsFoundText", isSignal: true, isRequired: false, transformFunction: null }, addCustomOptionText: { classPropertyName: "addCustomOptionText", publicName: "addCustomOptionText", isSignal: true, isRequired: false, transformFunction: null }, loadingPlaceholderText: { classPropertyName: "loadingPlaceholderText", publicName: "loadingPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, searchInputId: { classPropertyName: "searchInputId", publicName: "searchInputId", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsAlreadyGrouped: { classPropertyName: "itemsAlreadyGrouped", publicName: "itemsAlreadyGrouped", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, noGroupActions: { classPropertyName: "noGroupActions", publicName: "noGroupActions", isSignal: true, isRequired: false, transformFunction: null }, autoHighlightFirst: { classPropertyName: "autoHighlightFirst", publicName: "autoHighlightFirst", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, noBackspaceClear: { classPropertyName: "noBackspaceClear", publicName: "noBackspaceClear", isSignal: true, isRequired: false, transformFunction: null }, sortMultipleValues: { classPropertyName: "sortMultipleValues", publicName: "sortMultipleValues", isSignal: true, isRequired: false, transformFunction: null }, searchCaseSensitive: { classPropertyName: "searchCaseSensitive", publicName: "searchCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, keepSearchAfterSelect: { classPropertyName: "keepSearchAfterSelect", publicName: "keepSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemDisplayLimit: { classPropertyName: "itemDisplayLimit", publicName: "itemDisplayLimit", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, addCustom: { classPropertyName: "addCustom", publicName: "addCustom", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelWidth: { classPropertyName: "dropdownPanelWidth", publicName: "dropdownPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelHeight: { classPropertyName: "dropdownPanelHeight", publicName: "dropdownPanelHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMinWidth: { classPropertyName: "dropdownPanelMinWidth", publicName: "dropdownPanelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMinHeight: { classPropertyName: "dropdownPanelMinHeight", publicName: "dropdownPanelMinHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMaxWidth: { classPropertyName: "dropdownPanelMaxWidth", publicName: "dropdownPanelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMaxHeight: { classPropertyName: "dropdownPanelMaxHeight", publicName: "dropdownPanelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", failedToAddEvent: "failedToAdd", removeEvent: "remove", clearEvent: "clear", openEvent: "open", closeEvent: "close", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd", searchEvent: "search", isOpen: "isOpenChange" }, host: { listeners: { "window:resize": "onWindowResize()", "mouseup": "onMouseup()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-group-items": "this._groupItemsHostAttribute" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumSelectComponent, isStandalone: false, selector: "ard-select", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, groupLabelFrom: { classPropertyName: "groupLabelFrom", publicName: "groupLabelFrom", isSignal: true, isRequired: false, transformFunction: null }, groupDisabledFrom: { classPropertyName: "groupDisabledFrom", publicName: "groupDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, childrenFrom: { classPropertyName: "childrenFrom", publicName: "childrenFrom", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, noItemsFoundText: { classPropertyName: "noItemsFoundText", publicName: "noItemsFoundText", isSignal: true, isRequired: false, transformFunction: null }, addCustomOptionText: { classPropertyName: "addCustomOptionText", publicName: "addCustomOptionText", isSignal: true, isRequired: false, transformFunction: null }, loadingPlaceholderText: { classPropertyName: "loadingPlaceholderText", publicName: "loadingPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, searchInputId: { classPropertyName: "searchInputId", publicName: "searchInputId", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsAlreadyGrouped: { classPropertyName: "itemsAlreadyGrouped", publicName: "itemsAlreadyGrouped", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, noGroupActions: { classPropertyName: "noGroupActions", publicName: "noGroupActions", isSignal: true, isRequired: false, transformFunction: null }, autoHighlightFirst: { classPropertyName: "autoHighlightFirst", publicName: "autoHighlightFirst", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, noBackspaceClear: { classPropertyName: "noBackspaceClear", publicName: "noBackspaceClear", isSignal: true, isRequired: false, transformFunction: null }, searchCaseSensitive: { classPropertyName: "searchCaseSensitive", publicName: "searchCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, keepSearchAfterSelect: { classPropertyName: "keepSearchAfterSelect", publicName: "keepSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemDisplayLimit: { classPropertyName: "itemDisplayLimit", publicName: "itemDisplayLimit", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, addCustom: { classPropertyName: "addCustom", publicName: "addCustom", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelWidth: { classPropertyName: "dropdownPanelWidth", publicName: "dropdownPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelHeight: { classPropertyName: "dropdownPanelHeight", publicName: "dropdownPanelHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMinWidth: { classPropertyName: "dropdownPanelMinWidth", publicName: "dropdownPanelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMinHeight: { classPropertyName: "dropdownPanelMinHeight", publicName: "dropdownPanelMinHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMaxWidth: { classPropertyName: "dropdownPanelMaxWidth", publicName: "dropdownPanelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMaxHeight: { classPropertyName: "dropdownPanelMaxHeight", publicName: "dropdownPanelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", addEvent: "add", failedToAddEvent: "failedToAdd", removeEvent: "remove", clearEvent: "clear", openEvent: "open", closeEvent: "close", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd", searchEvent: "search", isOpen: "isOpenChange" }, host: { listeners: { "window:resize": "onWindowResize()", "mouseup": "onMouseup()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-group-items": "this._groupItemsHostAttribute" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSelectComponent),
@@ -4348,7 +4329,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumSelectComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownArrowTemplate", first: true, predicate: ArdSelectDropdownArrowTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n      <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n    </ng-template>\r\n\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i5.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownArrowTemplate", first: true, predicate: ArdSelectDropdownArrowTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"valueContextGenerator()(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-label=\"label\"\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (!!group.label) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"groupContextGenerator()(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children; track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled || (itemStorage.isItemLimitReached() && !option.selected)\"\r\n          [class.ard-option-selected]=\"option.selected\"\r\n          [class.ard-option-highlighted]=\"option.highlighted\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n          [attr.aria-selected]=\"option.selected\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-label=\"label\"\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i5.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
             type: Component,
@@ -4362,7 +4343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumSelectComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n      <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n    </ng-template>\r\n\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"valueContextGenerator()(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-label=\"label\"\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (!!group.label) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"groupContextGenerator()(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children; track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled || (itemStorage.isItemLimitReached() && !option.selected)\"\r\n          [class.ard-option-selected]=\"option.selected\"\r\n          [class.ard-option-highlighted]=\"option.highlighted\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n          [attr.aria-selected]=\"option.selected\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-label=\"label\"\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECT_DEFAULTS]
@@ -4376,12 +4357,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: [ArdiumOptionComponent]
             }], value: [{
                 type: Input
-            }], dropdownHost: [{
-                type: ViewChild,
-                args: ['dropdownHost', { read: ElementRef }]
-            }], dropdownTemplate: [{
-                type: ViewChild,
-                args: ['dropdownTemplate', { read: TemplateRef }]
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -9110,46 +9085,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class SimpleItemStorage {
     constructor(_ardParentComp) {
         this._ardParentComp = _ardParentComp;
-        this._items = signal([]);
-        this._highlightedItems = signal([]);
-        this._selectedItems = signal([]);
+        this._items = arraySignal([]);
         /**
          * Gets all items.
          */
-        this.items = this._items.asReadonly();
+        this.items = computed(() => [...this._items()]);
         /**
-         * Gets all currently highlighted items.
+         * Gets all currently selected items.
          */
-        this.highlightedItems = this._highlightedItems.asReadonly();
+        this.selectedItems = computed(() => this.items().filter(item => item.selected));
         /**
-         * Gets all currently selected items.
+         * Gets all currently highlighted items.
          */
-        this.selectedItems = this._selectedItems.asReadonly();
+        this.highlightedItems = computed(() => this.items().filter(item => item.highlighted));
         /**
          * Gets the values of the currently selected items.
          */
-        this.value = computed(() => this._itemsToValue(this._selectedItems()));
+        this.value = computed(() => this._itemsToValue(this.selectedItems()));
         /**
          * Returns true if at least one item is highlighted, otherwise false.
          */
-        this.isAnyItemHighlighted = computed(() => this._highlightedItems().length > 0);
+        this.isAnyItemHighlighted = computed(() => this.highlightedItems().length > 0);
+        /**
+         * Finds all highlightable items. An item is considered highlightable if it is **not** disabled.
+         * @returns An array of all highlightable items.
+         */
+        this._highlightableItems = computed(() => this.items().filter(item => !item.disabled && (this.isItemLimitReached() ? item.selected : true)));
+        this.itemsLeftUntilLimit = computed(() => this._ardParentComp.multiselectable() && isDefined(this._ardParentComp.maxSelectedItems())
+            ? this._ardParentComp.maxSelectedItems() - this.selectedItems().length
+            : 1);
         /**
          * Returns true if the parent component defines the limit of concurrently selectable items and the amount of currently selected items matches that limit. Otherwise returns false.
          *
          * **TLDR**: true if `maxSelectedItems` is defined and the number of selected items matches that value.
          */
-        this.isItemLimitReached = computed(() => {
-            const msi = this._ardParentComp.maxSelectedItems();
-            if (!this._ardParentComp.multiselectable() || !isDefined(msi)) {
-                return false;
-            }
-            return msi <= this.selectedItems().length;
-        });
-        /**
-         * Finds all highlightable items. An item is considered highlightable if it is **not** disabled.
-         * @returns An array of all highlightable items.
-         */
-        this.highlightableItems = computed(() => this._items().filter(item => !item.disabled()));
+        this.isItemLimitReached = computed(() => this.itemsLeftUntilLimit() <= 0);
+        this._areItemsInitialized = false;
+        this._valueBeforeItemsSet = null;
     }
     /**
      * Maps an array of items into their values.
@@ -9157,7 +9129,21 @@ class SimpleItemStorage {
      * @returns An array of item values.
      */
     _itemsToValue(items) {
-        return items.map(item => item.value());
+        return items.map(item => item.value);
+    }
+    _updateItems(updateFn) {
+        this._items.map(updateFn);
+    }
+    _updateItemsFromArray(updateFn, itemsToUpdate) {
+        this._items.update(items => {
+            for (const itemToUpdate of itemsToUpdate) {
+                const item = items[itemToUpdate.index];
+                if (item) {
+                    items[itemToUpdate.index] = updateFn(item);
+                }
+            }
+            return items;
+        });
     }
     /**
      * Sets the component's items. Takes into account the values defined by the parent component for `valueFrom`, `labelFrom`, and `disabledFrom`.
@@ -9165,6 +9151,7 @@ class SimpleItemStorage {
      * @returns true if at least one of the items is of primitive type, otherwise false.
      */
     setItems(items) {
+        this._areItemsInitialized = true;
         let areItemsPrimitive = false;
         if (items.some(isPrimitive)) {
             items = items.map(this._primitiveItemsMapFn);
@@ -9173,6 +9160,10 @@ class SimpleItemStorage {
         this._items.set(items.map((item, index) => {
             return this._setItemsMapFn(item, index, areItemsPrimitive);
         }));
+        if (this._valueBeforeItemsSet !== null) {
+            this.writeValue(this._valueBeforeItemsSet);
+            this._valueBeforeItemsSet = null;
+        }
     }
     _primitiveItemsMapFn(item) {
         return { value: item };
@@ -9180,13 +9171,13 @@ class SimpleItemStorage {
     _setItemsMapFn(rawItemData, index, areItemsPrimitive) {
         if (areItemsPrimitive) {
             return {
-                itemData: signal(rawItemData),
+                itemData: rawItemData,
                 index: index,
-                value: signal(rawItemData.value),
-                label: signal(rawItemData.value?.toString?.() ?? String(rawItemData.value)),
-                disabled: signal(false),
-                selected: signal(false),
-                highlighted: signal(false),
+                value: rawItemData.value,
+                label: rawItemData.value?.toString?.() ?? String(rawItemData.value),
+                disabled: false,
+                selected: false,
+                highlighted: false,
             };
         }
         //get value
@@ -9203,13 +9194,13 @@ class SimpleItemStorage {
         }
         //return
         return {
-            itemData: signal(rawItemData),
+            itemData: rawItemData,
             index: index,
-            value: signal(value),
-            label: signal(label?.toString?.() ?? String(label)),
-            disabled: signal(disabled),
-            selected: signal(false),
-            highlighted: signal(false),
+            value: value,
+            label: label?.toString?.() ?? String(label),
+            disabled: disabled,
+            selected: false,
+            highlighted: false,
         };
     }
     /**
@@ -9217,6 +9208,10 @@ class SimpleItemStorage {
      * @param ngModel The value of the ngModel to set.
      */
     writeValue(ngModel) {
+        if (!this._areItemsInitialized) {
+            this._valueBeforeItemsSet = ngModel;
+            return;
+        }
         this._forceUnselectAll();
         if (!this._validateWriteValue(ngModel))
             return;
@@ -9282,12 +9277,12 @@ class SimpleItemStorage {
         let findBy;
         const cmpFn = this._ardParentComp.compareWith();
         if (isDefined(cmpFn)) {
-            findBy = item => cmpFn(valueToFind, item.value());
+            findBy = item => cmpFn(valueToFind, item.value);
         }
         else {
-            findBy = item => item.value() === valueToFind;
+            findBy = item => item.value === valueToFind;
         }
-        return this._items().find(item => findBy(item));
+        return this.items().find(item => findBy(item));
     }
     /**
      * Unselects all selected items.
@@ -9296,27 +9291,15 @@ class SimpleItemStorage {
      * @returns An array of items cleared, mapped to only their values.
      */
     unselectAll() {
-        for (const item of this._selectedItems()) {
-            item.selected.set(false);
-        }
-        const ret = this.value();
-        if (this._ardParentComp.isValueRequired() && this._selectedItems().length > 0) {
-            this._selectedItems().first().selected.set(true);
-            ret.splice(0, 1);
-        }
-        this._selectedItems.set([]);
-        return ret;
+        return this.unselectItem(...this.selectedItems());
     }
     /**
      * Unselects all selected items, no matter what the component settings are.
      * @returns An array of items cleared, mapped to only their values.
      */
     _forceUnselectAll() {
-        for (const item of this._selectedItems()) {
-            item.selected.set(false);
-        }
-        const ret = this._itemsToValue(this._selectedItems());
-        this._selectedItems.set([]);
+        const ret = this.value();
+        this._updateItems(item => ({ ...item, selected: false }));
         return ret;
     }
     /**
@@ -9333,25 +9316,31 @@ class SimpleItemStorage {
         if (this.isItemLimitReached()) {
             return [[], [], this._itemsToValue(items)];
         }
-        let unselected = [];
-        if (!this._ardParentComp.multiselectable()) {
-            unselected = this._forceUnselectAll();
-        }
+        const itemsLeftUntilLimit = this.itemsLeftUntilLimit();
         let itemsSelectedCount = 0;
-        const itemsSelected = [];
+        const newItemsArray = [...this.items()];
         for (const item of items) {
             itemsSelectedCount++;
-            if (item.selected())
+            if (item.selected)
                 continue;
-            if (this.isItemLimitReached()) {
+            if (itemsSelectedCount > itemsLeftUntilLimit) {
                 break;
             }
-            item.selected.set(true);
-            itemsSelected.push(item);
+            newItemsArray[item.index] = { ...item, selected: true };
         }
-        this._selectedItems.update(v => [...v, ...itemsSelected]);
-        const itemsFailedToSelect = items.slice(itemsSelectedCount - 1);
-        return [this._itemsToValue(itemsSelected), unselected, this._itemsToValue(itemsFailedToSelect)];
+        const itemsUnselected = this._ardParentComp.multiselectable()
+            ? []
+            : this.selectedItems().filter(item => !items.find(v => v.value === item.value));
+        for (const item of itemsUnselected) {
+            newItemsArray[item.index] = { ...item, selected: false };
+        }
+        const itemsSelected = items.slice(0, itemsSelectedCount);
+        const itemsFailedToSelect = items.slice(itemsSelectedCount);
+        const isAnyNewItemToBeSelected = !!itemsSelected.find(item => !this.selectedItems().find(v => v.value === item.value));
+        if (isAnyNewItemToBeSelected) {
+            this._items.set(newItemsArray);
+        }
+        return [this._itemsToValue(itemsSelected), this._itemsToValue(itemsUnselected), this._itemsToValue(itemsFailedToSelect)];
     }
     /**
      *
@@ -9359,27 +9348,28 @@ class SimpleItemStorage {
      * @returns An array of items unselected, mapped to only their values.
      */
     unselectItem(...items) {
-        let skippedItem = false;
-        for (const item of items) {
-            if (this._ardParentComp.isValueRequired() && !skippedItem) {
-                skippedItem = true;
-                continue;
+        let shouldKeepFirstSelected = this._ardParentComp.isValueRequired();
+        const unselectedItems = [];
+        this._updateItemsFromArray(item => {
+            if (item.selected && shouldKeepFirstSelected) {
+                shouldKeepFirstSelected = false;
+                return item;
             }
-            if (!item.selected())
-                continue;
-            item.selected.set(false);
-        }
-        this._selectedItems.update(v => v.filter(v => v.selected()));
-        return this._itemsToValue(items);
+            if (item.selected) {
+                unselectedItems.push(item);
+            }
+            return {
+                ...item,
+                selected: false,
+            };
+        }, items);
+        return this._itemsToValue(unselectedItems);
     }
     /**
      * Unhighlights all currently highlighted items.
      */
     unhighlightAll() {
-        for (const item of this._highlightedItems()) {
-            item.highlighted.set(false);
-        }
-        this._highlightedItems.set([]);
+        this._updateItems(item => ({ ...item, highlighted: false }));
     }
     /**
      * Highlights the given item, while unhighlighting all other items. Does nothing when the item is disabled.
@@ -9387,7 +9377,7 @@ class SimpleItemStorage {
      * @returns The highlighted item.
      */
     highlightSingleItem(item) {
-        if (!item || item.disabled())
+        if (!item || item.disabled)
             return null;
         this.unhighlightAll();
         return this.highlightItem(item);
@@ -9398,10 +9388,7 @@ class SimpleItemStorage {
      * @returns The last highlighted item.
      */
     highlightItem(...items) {
-        for (const item of items) {
-            item.highlighted.set(true);
-        }
-        this._highlightedItems.update(v => [...v, ...items]);
+        this._updateItemsFromArray(item => ({ ...item, highlighted: true }), items);
         return items.last();
     }
     /**
@@ -9409,12 +9396,7 @@ class SimpleItemStorage {
      * @param items A rest operator array of items to be unhighlighted.
      */
     unhighlightItem(...items) {
-        for (const item of items) {
-            if (!item || !item.highlighted())
-                return;
-            item.highlighted.set(false);
-        }
-        this._highlightedItems.update(v => v.filter(v => v.highlighted()));
+        this._updateItemsFromArray(item => ({ ...item, highlighted: false }), items);
     }
     /**
      * Highlights the first item out of all items.
@@ -9422,7 +9404,7 @@ class SimpleItemStorage {
      */
     highlightFirstItem() {
         this.unhighlightAll();
-        const itemToHighlight = this.highlightableItems().first();
+        const itemToHighlight = this._highlightableItems().first();
         return this.highlightItem(itemToHighlight);
     }
     /**
@@ -9431,14 +9413,14 @@ class SimpleItemStorage {
      */
     highlightLastItem() {
         this.unhighlightAll();
-        const itemToHighlight = this.highlightableItems().last();
+        const itemToHighlight = this._highlightableItems().last();
         return this.highlightItem(itemToHighlight);
     }
     /**
      * Highlights all non-disabled items.
      */
     highlightAllItems() {
-        const itemsToHighlight = this.highlightableItems();
+        const itemsToHighlight = this._highlightableItems();
         this.highlightItem(...itemsToHighlight);
     }
     /**
@@ -9454,7 +9436,7 @@ class SimpleItemStorage {
             return this.highlightFirstItem();
         }
         const currentItem = this.highlightedItems().last();
-        const itemsWithoutDisabled = this._items().filter(item => !item.disabled() && (!this.isItemLimitReached() || item.selected()));
+        const itemsWithoutDisabled = this._items().filter(item => !item.disabled && (!this.isItemLimitReached() || item.selected));
         const currentIndexInItems = itemsWithoutDisabled.findIndex(item => item.index === currentItem.index);
         let nextItemIndex = currentIndexInItems + offset;
         if (nextItemIndex >= itemsWithoutDisabled.length) {
@@ -9465,7 +9447,7 @@ class SimpleItemStorage {
         }
         const itemToHighlight = itemsWithoutDisabled[nextItemIndex];
         if (hasShift && this._ardParentComp.multiselectable()) {
-            if (itemToHighlight.highlighted()) {
+            if (itemToHighlight.highlighted) {
                 this.unhighlightItem(currentItem);
             }
             return this.highlightItem(itemToHighlight);
@@ -9498,13 +9480,17 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         this.disabledFrom = input(this._DEFAULTS.disabledFrom);
         this.compareWith = input(this._DEFAULTS.compareWith);
         //! multiselectable
-        this.multiselectable = input(this._DEFAULTS.multiselectable, { transform: v => coerceBooleanProperty(v) });
+        this.multiselectable = input(this._DEFAULTS.multiselectable, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.singleselectable = computed(() => !this.multiselectable());
         //! require value
         this.requireValue = input(this._DEFAULTS.requireValue, { transform: v => coerceBooleanProperty(v) });
         this.isValueRequired = computed(() => this.requireValue() || !this.multiselectable());
         //! coerced properties
-        this.invertDisabled = input(this._DEFAULTS.invertDisabled, { transform: v => coerceBooleanProperty(v) });
+        this.invertDisabled = input(this._DEFAULTS.invertDisabled, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.maxSelectedItems = input(this._DEFAULTS.maxSelectedItems, {
             transform: v => coerceNumberProperty(v, undefined),
         });
@@ -9516,9 +9502,20 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         this.highlightedItems = computed(() => this.itemStorage.highlightedItems());
         this.firstHighlightedItem = computed(() => this.highlightedItems()?.first());
         this.isItemLimitReached = computed(() => this.itemStorage.isItemLimitReached());
+        //! context providers
+        this.optionContextGenerator = computed(() => item => ({
+            $implicit: item,
+            item,
+            index: item.index,
+            value: item.value,
+            label: item.label,
+            selected: item.selected,
+            highlighted: item.highlighted,
+            itemData: item.itemData,
+            disabled: item.disabled,
+        }));
         this.valueChange = output();
         //! output events
-        this.changeEvent = output({ alias: 'change' });
         this.addEvent = output({ alias: 'add' });
         this.removeEvent = output({ alias: 'remove' });
         //! highligh-related
@@ -9555,7 +9552,6 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
     _emitChange() {
         const value = this.singleselectable() ? this.itemStorage.value()[0] : this.itemStorage.value();
         this._onChangeRegistered?.(value);
-        this.changeEvent.emit(value);
         this.valueChange.emit(value);
     }
     _onTouched() {
@@ -9577,14 +9573,6 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         if (!this.touched())
             this.lastBlurTimestamp.set(Date.now());
     }
-    //! context providers
-    getOptionContext(item) {
-        return {
-            $implicit: item,
-            item,
-            itemData: item.itemData(),
-        };
-    }
     //! value input & output
     set value(newValue) {
         if (this.multiselectable() && !Array.isArray(newValue))
@@ -9593,7 +9581,7 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
     }
     //! item selection handlers
     toggleItem(item) {
-        if (item.selected()) {
+        if (item.selected) {
             if (this.singleselectable())
                 return;
             this.unselectItem(item);
@@ -9712,7 +9700,7 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         this.itemStorage.highlightAllItems();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _SelectableListComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _SelectableListComponentBase, isStandalone: true, inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, requireValue: { classPropertyName: "requireValue", publicName: "requireValue", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", removeEvent: "remove" }, host: { listeners: { "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" }, properties: { "attr.multiple": "this._multiselectableHostAttribute", "class.ard-multiselect": "this._multiselectableHostAttribute", "class.ard-require-value": "this._requireValueHostAttribute", "class.ard-touched": "this._touchedHostAttribute" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _SelectableListComponentBase, isStandalone: true, inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, requireValue: { classPropertyName: "requireValue", publicName: "requireValue", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", addEvent: "add", removeEvent: "remove" }, host: { listeners: { "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" }, properties: { "attr.multiple": "this._multiselectableHostAttribute", "class.ard-multiselect": "this._multiselectableHostAttribute", "class.ard-require-value": "this._requireValueHostAttribute", "class.ard-touched": "this._touchedHostAttribute" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _SelectableListComponentBase, decorators: [{
             type: Directive
@@ -9881,7 +9869,7 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumSegmentComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n      [class.ard-option-selected]=\"option.selected()\"\r\n      [class.ard-option-highlighted]=\"option.highlighted()\"\r\n      [ariaSelected]=\"option.selected()\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
@@ -9895,7 +9883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumSegmentComponent,
                         },
-                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n      [class.ard-option-selected]=\"option.selected()\"\r\n      [class.ard-option-highlighted]=\"option.highlighted()\"\r\n      [ariaSelected]=\"option.selected()\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
+                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SEGMENT_DEFAULTS]
@@ -11138,9 +11126,9 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this._componentId = '300';
         this._componentName = 'checkbox-list';
         this._itemStorage = new SimpleItemStorage(this);
-        this.valueFrom = input(this.DEFAULTS.valueFrom);
-        this.labelFrom = input(this.DEFAULTS.labelFrom);
-        this.disabledFrom = input(this.DEFAULTS.disabledFrom);
+        this.valueFrom = input(this._DEFAULTS.valueFrom);
+        this.labelFrom = input(this._DEFAULTS.labelFrom);
+        this.disabledFrom = input(this._DEFAULTS.disabledFrom);
         this.compareWith = input(this._DEFAULTS.compareWith);
         this.invertDisabled = input(this._DEFAULTS.invertDisabled, {
             transform: v => coerceBooleanProperty(v),
@@ -11154,11 +11142,21 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [`ard-color-${this.color()}`, `ard-align-${this.align()}`, this.compact() ? 'ard-compact' : ''].join(' '));
         this.valueChange = output();
-        this.changeEvent = output({ alias: 'change' });
         this._isViewInit = false;
         //! templates
         this.checkboxTemplate = contentChild(ArdCheckboxListCheckboxTemplateDirective);
         this.labelTemplate = contentChild(ArdCheckboxListLabelTemplateDirective);
+        this.labelContextGenerator = computed(() => item => ({
+            $implicit: item,
+            item,
+            index: item.index,
+            value: item.value,
+            label: item.label,
+            selected: item.selected,
+            highlighted: item.highlighted,
+            itemData: item.itemData,
+            disabled: item.disabled,
+        }));
     }
     get _htmlIdHostAttribute() {
         return this.htmlId();
@@ -11192,7 +11190,6 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     _emitChange() {
         const v = this.value;
         this._onChangeRegistered?.(v);
-        this.changeEvent.emit(v);
         this.valueChange.emit(v);
     }
     onItemHighlight(v) {
@@ -11213,25 +11210,18 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this._emitChange();
     }
     toggleItem(v) {
-        if (v.selected()) {
+        if (v.selected) {
             this.unselectItem(v);
             return;
         }
         this.selectItem(v);
     }
-    getLabelContext(item) {
-        return {
-            $implicit: item,
-            item,
-            itemData: item.itemData(),
-        };
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListComponent, deps: [{ token: ARD_CHECKBOX_LIST_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxListComponent, isStandalone: false, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxListCheckboxTemplateDirective, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdCheckboxListLabelTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      [class.ard-item-selected]=\"item.selected()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n      </ard-checkbox>\r\n      <label [for]=\"htmlId() + item.index\">\r\n        <ng-template #defaultLabelTemplate let-labelItem>\r\n          {{ labelItem.label() }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n          [ngTemplateOutletContext]=\"getLabelContext(item)\"\r\n        />\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "directive", type: _CheckboxTemplateRepositoryDirective, selector: "ard-checkbox > ng-template[_ard-tmp-repository]", inputs: ["checkboxTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxListComponent, isStandalone: false, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxListCheckboxTemplateDirective, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdCheckboxListLabelTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n  <div\r\n    class=\"ard-checkbox-list__item\"\r\n    [class.ard-item-highlighted]=\"item.highlighted\"\r\n    [class.ard-item-disabled]=\"item.disabled\"\r\n    [class.ard-item-selected]=\"item.selected\"\r\n    (mouseover)=\"onItemHighlight(item)\"\r\n    (mouseleave)=\"onItemBlur()\"\r\n    (click)=\"toggleItem(item)\"\r\n  >\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <ard-checkbox\r\n      [selected]=\"item.selected\"\r\n      [disabled]=\"item.disabled\"\r\n      [color]=\"color()\"\r\n      [htmlId]=\"htmlId() + item.index\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (focus)=\"onFocus($event)\"\r\n      (focus)=\"onItemFocus(item)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (blur)=\"onItemBlur()\"\r\n      (select)=\"selectItem(item)\"\r\n      (unselect)=\"unselectItem(item)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [checkboxTmp]=\"checkboxTemplate()\"\r\n      />\r\n    </ard-checkbox>\r\n    <label [for]=\"htmlId() + item.index\">\r\n      <ng-template\r\n        #defaultLabelTemplate\r\n        let-label=\"label\"\r\n      >\r\n        {{ label }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n        [ngTemplateOutletContext]=\"labelContextGenerator()(item)\"\r\n      />\r\n    </label>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "directive", type: _CheckboxTemplateRepositoryDirective, selector: "ard-checkbox > ng-template[_ard-tmp-repository]", inputs: ["checkboxTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      [class.ard-item-selected]=\"item.selected()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n      </ard-checkbox>\r\n      <label [for]=\"htmlId() + item.index\">\r\n        <ng-template #defaultLabelTemplate let-labelItem>\r\n          {{ labelItem.label() }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n          [ngTemplateOutletContext]=\"getLabelContext(item)\"\r\n        />\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n  <div\r\n    class=\"ard-checkbox-list__item\"\r\n    [class.ard-item-highlighted]=\"item.highlighted\"\r\n    [class.ard-item-disabled]=\"item.disabled\"\r\n    [class.ard-item-selected]=\"item.selected\"\r\n    (mouseover)=\"onItemHighlight(item)\"\r\n    (mouseleave)=\"onItemBlur()\"\r\n    (click)=\"toggleItem(item)\"\r\n  >\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <ard-checkbox\r\n      [selected]=\"item.selected\"\r\n      [disabled]=\"item.disabled\"\r\n      [color]=\"color()\"\r\n      [htmlId]=\"htmlId() + item.index\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (focus)=\"onFocus($event)\"\r\n      (focus)=\"onItemFocus(item)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (blur)=\"onItemBlur()\"\r\n      (select)=\"selectItem(item)\"\r\n      (unselect)=\"unselectItem(item)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [checkboxTmp]=\"checkboxTemplate()\"\r\n      />\r\n    </ard-checkbox>\r\n    <label [for]=\"htmlId() + item.index\">\r\n      <ng-template\r\n        #defaultLabelTemplate\r\n        let-label=\"label\"\r\n      >\r\n        {{ label }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n        [ngTemplateOutletContext]=\"labelContextGenerator()(item)\"\r\n      />\r\n    </label>\r\n  </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_LIST_DEFAULTS]
@@ -13055,7 +13045,7 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
         this._emitPageEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTablePaginationComponent, deps: [{ token: ARD_TABLE_PAGINATION_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTablePaginationComponent, isStandalone: false, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "addCustomOptionText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen", "dropdownPanelWidth", "dropdownPanelHeight", "dropdownPanelMinWidth", "dropdownPanelMinHeight", "dropdownPanelMaxWidth", "dropdownPanelMaxHeight"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTablePaginationComponent, isStandalone: false, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "addCustomOptionText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen", "dropdownPanelWidth", "dropdownPanelHeight", "dropdownPanelMinWidth", "dropdownPanelMinHeight", "dropdownPanelMaxWidth", "dropdownPanelMaxHeight"], outputs: ["valueChange", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTablePaginationComponent, decorators: [{
             type: Component,