@ardium-ui/ui 5.0.0-alpha.3 → 5.0.0-alpha.30

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);
     }
@@ -688,6 +697,8 @@ class NumberInputModel {
             v = this._applyNumberConstraint(v);
             v = this._applyMinMaxConstraints(v);
         }
+        if (v === '')
+            v = null;
         //update view
         const oldVal = this._value();
         this.setValue(v);
@@ -783,6 +794,7 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
         this.maxLength = input(this._DEFAULTS.maxLength, {
             transform: v => coerceNumberProperty(v, this._DEFAULTS.maxLength),
         });
+        this.maxLengthAsInt = computed(() => this.maxLength() ?? 2_147_483_647);
         //! no-value attribute setters/getters
         this.clearable = input(this._DEFAULTS.clearable, { transform: v => coerceBooleanProperty(v) });
         //! value two-way binding
@@ -1025,7 +1037,7 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
             this.compact() ? 'ard-compact' : '',
             this.hasError() ? 'ard-has-error' : '',
             this.isSuccess() ? 'ard-is-success' : '',
-            this.isFocused() ? 'ard-focused' : 'ard-unfocused',
+            this.isFocused() && !this.readonly() ? 'ard-focused' : 'ard-unfocused',
         ].join(' '));
         //! prefix & suffix
         this.prefixTemplateInput = input(undefined, { alias: 'prefixTemplate' });
@@ -1242,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
@@ -1299,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;
     }
@@ -1412,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  [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        (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,
@@ -1426,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  [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        (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]
@@ -2186,7 +2201,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, 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  [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-input\"\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 (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\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        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($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", 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}\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: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, 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-input\"\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 (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\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)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($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", 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}\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: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
@@ -2200,7 +2215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\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-input\"\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 (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\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        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($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", 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}\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-input\"\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 (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\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)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($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", 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}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SIMPLE_INPUT_DEFAULTS]
@@ -2519,7 +2534,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumPasswordInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, 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  [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-password-input\"\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 (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      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\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: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, 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-password-input\"\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 (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      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\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: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { 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: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -2533,7 +2548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumPasswordInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\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-password-input\"\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 (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      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\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-password-input\"\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 (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      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_PASSWORD_INPUT_DEFAULTS]
@@ -2654,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;
@@ -2710,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
@@ -2727,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) {
@@ -2772,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
@@ -2812,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,
                 },
             ],
         ]);
@@ -2875,43 +2887,47 @@ class ItemStorage {
         });
     }
     handleWriteValue(ngModel) {
-        if (!isArray(ngModel)) {
-            ngModel = [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;
         }
-        this.clearAllSelected();
-        if (!this._isWriteValueValid(ngModel)) {
+        // if null or undefined clear selection
+        if (!isDefined(ngModel)) {
+            this.clearAllSelected();
             return;
         }
-        const selectItemByValue = (value) => {
-            if (value === null || value === undefined) {
-                this.unselectItem(...this._selectedItems());
-                return;
-            }
-            const item = this.findItemByValue(value);
+        // convert from single item to items array
+        if (!isArray(ngModel)) {
+            ngModel = [ngModel];
+        }
+        const ngModelArray = ngModel;
+        // check value validity
+        if (!this._isWriteValueValid(ngModelArray)) {
+            return;
+        }
+        const itemsToSelect = ngModelArray
+            .map(v => {
+            const item = this.findItemByValue(v);
             if (item) {
-                this.selectItem(item);
-                return;
+                return item;
             }
-            console.warn(`ARD-WA${this._ardParentComp._componentId}1: Couldn't find an item with value ${value?.toString?.() || String(value)} when trying to select it.`);
-        };
-        for (const modelValue of ngModel) {
-            selectItemByValue(modelValue);
-        }
+            console.warn(`ARD-WA${this._ardParentComp._componentId}1: Couldn't find an item with value ${v?.toString?.() || String(v)} when trying to select it.`);
+            return null;
+        })
+            .filter(Boolean);
+        this.selectItem(...itemsToSelect);
     }
     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);
@@ -2928,18 +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());
-        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);
@@ -2949,114 +2960,94 @@ class ItemStorage {
         if (this.isItemLimitReached()) {
             return [[], [], this._itemsToValue(items)];
         }
-        let unselected = [];
-        if (!this._ardParentComp.multiselectable()) {
-            unselected = this.clearAllSelected(false);
-        }
+        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);
-            this._selectedItems.update(v => [...v, item]);
-            itemsSelected.push(item);
+            newItemsArray[item.index] = { ...item, selected: true };
+        }
+        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);
         }
-        if (this._ardParentComp.hideSelected()) {
-            this._populateGroups();
+        if (!this._lastHighlightedItem()) {
+            this._lastHighlightedItem.set(itemsFailedToSelect.first() || itemsSelected.last());
         }
-        const itemsFailedToSelect = items.slice(itemsSelectedCount - 1);
-        return [this._itemsToValue(itemsSelected), unselected, this._itemsToValue(itemsFailedToSelect)];
+        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) {
@@ -3067,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);
@@ -3082,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();
     }
 }
 
@@ -3116,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.
@@ -3125,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.
@@ -3143,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.
@@ -3162,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));
     },
 };
@@ -3184,6 +3169,7 @@ const _selectDefaults = {
     searchFn: searchFunctions.byLabel,
     clearButtonTitle: 'Clear',
     noItemsFoundText: 'No items found.',
+    addCustomOptionText: 'Add option',
     loadingPlaceholderText: 'Loading...',
     placeholder: 'Select item',
     searchPlaceholder: 'Search...',
@@ -3207,6 +3193,12 @@ const _selectDefaults = {
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     compact: false,
+    dropdownPanelWidth: undefined,
+    dropdownPanelHeight: undefined,
+    dropdownPanelMinWidth: 'max-content',
+    dropdownPanelMinHeight: undefined,
+    dropdownPanelMaxWidth: undefined,
+    dropdownPanelMaxHeight: undefined,
     dropdownAppearance: undefined,
     dropdownVariant: undefined,
     multiselectable: false,
@@ -3299,6 +3291,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Directive,
             args: [{ standalone: false, selector: 'ard-select > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdSelectDropdownArrowTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdSelectDropdownArrowTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ArdSelectDropdownArrowTemplateDirective, isStandalone: false, selector: "ard-select > ng-template[ard-dropdown-arrow-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdSelectDropdownArrowTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ standalone: false, selector: 'ard-select > ng-template[ard-dropdown-arrow-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class ArdLoadingSpinnerTemplateDirective {
     constructor(template) {
         this.template = template;
@@ -3391,6 +3394,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ standalone: false, selector: 'ard-select > ng-template[ard-item-display-limit-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+const NUMBER_REGEX = /^\d+$/;
+function transformDropdownPanelSize(v) {
+    if (typeof v === 'string' && NUMBER_REGEX.test(v)) {
+        return Number(v);
+    }
+    return v;
+}
+
 /**
  * The color of the component.
  *
@@ -3537,6 +3548,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.dropdownPosition = input(this._DEFAULTS.dropdownPosition);
         //! template-related settings
         this.noItemsFoundText = input(this._DEFAULTS.noItemsFoundText);
+        this.addCustomOptionText = input(this._DEFAULTS.addCustomOptionText);
         this.loadingPlaceholderText = input(this._DEFAULTS.loadingPlaceholderText);
         //! search-related options
         this.searchInputId = input(undefined);
@@ -3547,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, {
@@ -3589,7 +3604,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
             this.touched() ? 'ard-touched' : '',
             this.isOpen() ? 'ard-dropdown-open' : '',
             this._searchBarFocused() ? 'ard-select-focused' : '',
-            this._searchBarFocused() ? 'ard-select-focused' : '',
+            this.disabled() || this.readonly() ? 'ard-touch-disabled' : 'ard-touch-enabled',
         ].join(' '));
         this.dropdownAppearance = input(this._DEFAULTS.dropdownAppearance);
         this.dropdownAppearanceOrDefault = computed(() => {
@@ -3609,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() !== '');
@@ -3629,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' });
@@ -3648,6 +3664,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.optgroupTemplate = contentChild(ArdOptgroupTemplateDirective);
         this.valueTemplate = contentChild(ArdValueTemplateDirective);
         this.placeholderTemplate = contentChild(ArdSelectPlaceholderTemplateDirective);
+        this.dropdownArrowTemplate = contentChild(ArdSelectDropdownArrowTemplateDirective);
         this.loadingSpinnerTemplate = contentChild(ArdLoadingSpinnerTemplateDirective);
         this.loadingPlaceholderTemplate = contentChild(ArdLoadingPlaceholderTemplateDirective);
         this.dropdownHeaderTemplate = contentChild(ArdDropdownHeaderTemplateDirective);
@@ -3658,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(),
@@ -3698,11 +3743,27 @@ 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,
+        });
+        this.dropdownPanelHeight = input(this._DEFAULTS.dropdownPanelHeight, {
+            transform: transformDropdownPanelSize,
+        });
+        this.dropdownPanelMinWidth = input(this._DEFAULTS.dropdownPanelMinWidth, { transform: transformDropdownPanelSize });
+        this.dropdownPanelMinHeight = input(this._DEFAULTS.dropdownPanelMinHeight, { transform: transformDropdownPanelSize });
+        this.dropdownPanelMaxWidth = input(this._DEFAULTS.dropdownPanelMaxWidth, { transform: transformDropdownPanelSize });
+        this.dropdownPanelMaxHeight = input(this._DEFAULTS.dropdownPanelMaxHeight, { transform: transformDropdownPanelSize });
         //! getters
         this.firstHighlightedItem = computed(() => this.itemStorage.highlightedItems()?.first());
         this.shouldDisplayPlaceholder = computed(() => !this.itemStorage.isAnyItemSelected() && !this.searchTerm());
         this.shouldDisplayValue = computed(() => this.itemStorage.isAnyItemSelected() && (!this.searchTerm() || this.multiselectable()));
-        this.shouldShowClearButton = computed(() => this.clearable() && !this.disabled() && (this.itemStorage.isAnyItemSelected() || this.searchTerm() !== ''));
+        this.shouldShowClearButton = computed(() => this.clearable() &&
+            !this.disabled() &&
+            !this.readonly() &&
+            (this.itemStorage.isAnyItemSelected() || this.searchTerm() !== ''));
         this.itemsToDisplay = computed(() => this.itemStorage.groups().values());
         this.shouldShowNoItemsFound = computed(() => this.itemStorage.isNoItemsFound() && !this.isLoading() && !this.shouldShowAddCustom());
         this.totalItems = computed(() => this.itemStorage.items().length);
@@ -3744,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);
             });
         };
@@ -3800,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() {
@@ -3820,36 +3878,11 @@ 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([
             {
                 originX: 'start',
@@ -3863,14 +3896,32 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 overlayX: 'start',
                 overlayY: 'bottom',
             },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
         ]);
         const config = new OverlayConfig({
             positionStrategy: strategy,
             scrollStrategy: this.scrollStrategyOpts.block(),
             hasBackdrop: false,
+            width: this.dropdownPanelWidth() ?? undefined,
+            height: this.dropdownPanelHeight() ?? undefined,
+            minWidth: this.dropdownPanelMinWidth() ?? undefined,
+            minHeight: this.dropdownPanelMinHeight() ?? undefined,
+            maxWidth: this.dropdownPanelMaxWidth() ?? undefined,
+            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();
     }
@@ -3883,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() {
@@ -3944,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;
         }
@@ -3983,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();
@@ -4021,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);
@@ -4030,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) {
@@ -4064,7 +4116,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
             event.preventDefault();
         }
         this._isClickedWithin.set(true);
-        if (!this._searchBarFocused()) {
+        if (!this._searchBarFocused() && !this.readonly()) {
             this.focus();
         }
         if (this.searchable()) {
@@ -4086,7 +4138,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.open();
     }
     open() {
-        if (this.disabled() || this.isOpen())
+        if (this.disabled() || this.readonly() || this.isOpen())
             return;
         this.isOpen.set(true);
         if (this.autoHighlightFirst())
@@ -4175,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 {
@@ -4189,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();
@@ -4265,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 }, 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 } }, 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),
@@ -4275,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: "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  [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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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-strong\"\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      }\r\n\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        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\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      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\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}.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,
@@ -4289,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  [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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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-strong\"\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      }\r\n\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        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\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      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\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}.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]
@@ -4303,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']
@@ -4534,7 +4582,8 @@ class ArdiumSelectModule {
             ArdItemDisplayLimitTemplateDirective,
             ArdAddCustomTemplateDirective,
             ArdSelectPrefixTemplateDirective,
-            ArdSelectSuffixTemplateDirective], imports: [CommonModule,
+            ArdSelectSuffixTemplateDirective,
+            ArdSelectDropdownArrowTemplateDirective], imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
             ArdiumChipModule,
@@ -4556,7 +4605,8 @@ class ArdiumSelectModule {
             ArdItemDisplayLimitTemplateDirective,
             ArdAddCustomTemplateDirective,
             ArdSelectPrefixTemplateDirective,
-            ArdSelectSuffixTemplateDirective] }); }
+            ArdSelectSuffixTemplateDirective,
+            ArdSelectDropdownArrowTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectModule, imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
@@ -4586,6 +4636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdAddCustomTemplateDirective,
                         ArdSelectPrefixTemplateDirective,
                         ArdSelectSuffixTemplateDirective,
+                        ArdSelectDropdownArrowTemplateDirective,
                     ],
                     imports: [
                         CommonModule,
@@ -4614,6 +4665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdAddCustomTemplateDirective,
                         ArdSelectPrefixTemplateDirective,
                         ArdSelectSuffixTemplateDirective,
+                        ArdSelectDropdownArrowTemplateDirective,
                     ],
                 }]
         }] });
@@ -4893,7 +4945,6 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
     }
     onFileInputChange() {
         this._isFilePickerOpen = false;
-        console.log('onFileInputChange');
         const files = Array.from(this.fileInputEl()?.nativeElement.files ?? []);
         this._writeFilesToValue(files);
     }
@@ -5493,7 +5544,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-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      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;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"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { 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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-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  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-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      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;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"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { 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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -5507,7 +5558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                         },
-                    ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-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      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-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  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-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      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FILE_INPUT_DEFAULTS]
@@ -7693,7 +7744,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
-        ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, 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  [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-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\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        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\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-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [selected]=\"value()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display: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: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { 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"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, 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-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\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        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\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-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [selected]=\"value()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display: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: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { 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"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -7707,7 +7758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumDateInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\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-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\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        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\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-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [selected]=\"value()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display: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-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\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        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\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-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [selected]=\"value()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -8063,6 +8114,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
         this.maxDigits = input(this._DEFAULTS.maxDigits, {
             transform: v => coerceNumberProperty(v, this._DEFAULTS.maxDigits),
         });
+        this.maxDigitsAsInt = computed(() => this.maxDigits() ?? 2_147_483_647);
         this.hideHash = input(this._DEFAULTS.hideHash, { transform: v => coerceBooleanProperty(v) });
         this.showHash = computed(() => !this.hideHash());
         //! clear button
@@ -8184,7 +8236,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => ArdiumHexInputComponent),
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, 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  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-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\"></ng-template>\r\n      }\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        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\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", 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}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, 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  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-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\"></ng-template>\r\n      }\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]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\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", 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}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
@@ -8198,7 +8250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => ArdiumHexInputComponent),
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-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\"></ng-template>\r\n      }\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        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\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", 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}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-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\"></ng-template>\r\n      }\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]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\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", 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}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_HEX_INPUT_DEFAULTS]
@@ -8249,6 +8301,7 @@ const _numberInputDefaults = {
     allowFloat: false,
     noButtons: false,
     stepSize: 1,
+    keepFocusOnQuickChangeButton: true,
 };
 const ARD_NUMBER_INPUT_DEFAULTS = new InjectionToken('ard-number-input-defaults', {
     factory: () => ({
@@ -8280,14 +8333,14 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         this._wasViewInit = false;
         this.inputId = input();
         //! placeholder
-        this.placeholder = input();
+        this.placeholder = input(this._DEFAULTS.placeholder);
         this.placeholderTemplate = contentChild(ArdNumberInputPlaceholderTemplateDirective);
         this.shouldDisplayPlaceholder = computed(() => !!this.placeholder() && !this.inputModel.stringValue());
         //! appearance
-        this.appearance = input(FormElementAppearance.Outlined);
-        this.variant = input(FormElementVariant.Rounded);
-        this.alignText = input(OneAxisAlignment.Middle);
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.variant = input(this._DEFAULTS.variant);
+        this.alignText = input(this._DEFAULTS.alignText);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => {
             return [
                 `ard-appearance-${this.appearance()}`,
@@ -8315,7 +8368,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         //! other inputs
         this.inputAttrs = input({});
         //! value two-way binding
-        this._valueBeforeInit = '0';
+        this._valueBeforeInit = null;
         this.valueChange = output();
         //! event emitters
         this.inputEvent = output({ alias: 'input' });
@@ -8323,13 +8376,15 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         this.clearEvent = output({ alias: 'clear' });
         this.quickChangeEvent = output({ alias: 'quickChange' });
         //! min/max and number type
-        this.min = input(0, { transform: v => coerceNumberProperty(v, 0) });
-        this.max = input(999999, { transform: v => coerceNumberProperty(v, 999999) });
-        this.allowFloat = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.min = input(this._DEFAULTS.min, { transform: v => coerceNumberProperty(v, this._DEFAULTS.min) });
+        this.max = input(this._DEFAULTS.max, { transform: v => coerceNumberProperty(v, this._DEFAULTS.max) });
+        this.allowFloat = input(this._DEFAULTS.allowFloat, { transform: v => coerceBooleanProperty(v) });
         //! incerement/decrement buttons
-        this.noButtons = input(false, { transform: v => coerceBooleanProperty(v) });
-        this.keepFocusOnQuickChangeButton = input(true, { transform: v => coerceBooleanProperty(v) });
-        this.stepSize = input(1, {
+        this.noButtons = input(this._DEFAULTS.noButtons, { transform: v => coerceBooleanProperty(v) });
+        this.keepFocusOnQuickChangeButton = input(this._DEFAULTS.keepFocusOnQuickChangeButton, {
+            transform: v => coerceBooleanProperty(v),
+        });
+        this.stepSize = input(this._DEFAULTS.stepSize, {
             transform: v => {
                 const newValue = coerceNumberProperty(v, 1);
                 if (newValue === 0)
@@ -8339,11 +8394,11 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 return newValue;
             },
         });
-        effect(() => {
-            const v = this.inputModel.numberValue();
-            this.valueChange.emit(v);
-            this._onChangeRegistered?.(v);
-        });
+        // effect(() => {
+        //   const v = this.inputModel.numberValue();
+        //   this.valueChange.emit(v);
+        //   this._onChangeRegistered?.(v);
+        // });
     }
     ngAfterViewInit() {
         this._setInputAttributes();
@@ -8437,6 +8492,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     _emitChange() {
         const v = this.inputModel.numberValue();
         this.changeEvent.emit(v);
+        this._onChangeRegistered?.(v);
     }
     //smart focus
     onMouseup() {
@@ -8538,7 +8594,7 @@ class ArdiumFabComponent extends _ButtonBase {
         super(defaults);
         //! appearance
         this.size = input(FabSize.Standard);
-        // readonly extended = input<boolean, any>(false, { transform: v => coerceBooleanProperty(v) });
+        // readonly extended = input<boolean, BooleanLike>(false, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [
             `ard-appearance-${this.appearance()}`,
             `ard-color-${this.color()}`,
@@ -9029,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.
@@ -9076,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`.
@@ -9084,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);
@@ -9092,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 };
@@ -9099,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
@@ -9122,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,
         };
     }
     /**
@@ -9136,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;
@@ -9201,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.
@@ -9215,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;
     }
     /**
@@ -9252,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)];
     }
     /**
      *
@@ -9278,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.
@@ -9306,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);
@@ -9317,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();
     }
     /**
@@ -9328,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.
@@ -9341,7 +9404,7 @@ class SimpleItemStorage {
      */
     highlightFirstItem() {
         this.unhighlightAll();
-        const itemToHighlight = this.highlightableItems().first();
+        const itemToHighlight = this._highlightableItems().first();
         return this.highlightItem(itemToHighlight);
     }
     /**
@@ -9350,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);
     }
     /**
@@ -9373,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) {
@@ -9384,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);
@@ -9417,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),
         });
@@ -9435,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
@@ -9474,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() {
@@ -9496,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))
@@ -9512,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);
@@ -9631,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
@@ -9800,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,
@@ -9814,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]
@@ -9960,26 +10029,45 @@ class _AbstractSlider extends _NgModelComponentBase {
         this.noTooltip = input(this._DEFAULTS.noTooltip, { transform: v => coerceBooleanProperty(v) });
         this.tooltipFormatFn = input(this._DEFAULTS.formatTooltipFn);
         //! min, max, step sizes
-        this.min = input(this._DEFAULTS.min, { transform: v => coerceNumberProperty(v, this._DEFAULTS.min) });
-        this.max = input(this._DEFAULTS.max, { transform: v => coerceNumberProperty(v, this._DEFAULTS.max) });
+        this.min = input(this._DEFAULTS.min, {
+            transform: v => coerceNumberProperty(v, this._DEFAULTS.min),
+        });
+        this.max = input(this._DEFAULTS.max, {
+            transform: v => coerceNumberProperty(v, this._DEFAULTS.max),
+        });
         this.step = input(this._DEFAULTS.step, {
             transform: v => {
                 const step = coerceNumberProperty(v, this._DEFAULTS.step);
                 if (step === 0) {
-                    throw new Error(`ARD-FT${this.componentId}0a: Cannot set <ard-${this.componentName}>'s [step] to 0.`);
+                    throw new Error(`ARD-FT${this.componentId}1a: Cannot set <ard-${this.componentName}>'s [step] to 0.`);
                 }
                 if (step < 0) {
-                    throw new Error(`ARD-FT${this.componentId}0b: Cannot set <ard-${this.componentName}>'s [step] to a negative value, got ${step}.`);
+                    throw new Error(`ARD-FT${this.componentId}1b: Cannot set <ard-${this.componentName}>'s [step] to a negative value, got ${step}.`);
                 }
                 return step;
             },
         });
+        this.minMaxStepValueCleanup = effect(() => {
+            this.min();
+            this.max();
+            this.step();
+            this.cleanupValueAfterMinMaxStepChange();
+        });
+        this.minMaxErrorCheck = effect(() => {
+            const min = this.min();
+            const max = this.max();
+            if (min >= max) {
+                throw new Error(`ARD-FT${this.componentId}0: Cannot set <ard-${this.componentName}>'s [min] to a value greater than or equal to [max], got min=${min} and max=${max}.`);
+            }
+        });
         this.shiftMultiplier = input(this._DEFAULTS.shiftMultiplier, {
             transform: v => coerceNumberProperty(v, this._DEFAULTS.shiftMultiplier),
         });
         this._stepSizeComputed = computed(() => this.step() / Math.abs(this.min() - this.max()));
         //! value ticks
-        this.showValueTicks = input(this._DEFAULTS.showValueTicks, { transform: v => coerceBooleanProperty(v) });
+        this.showValueTicks = input(this._DEFAULTS.showValueTicks, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.percentStepSize = computed(() => this._stepSizeComputed() * 100);
         this._tickArray = computed(() => {
             const newArr = [];
@@ -10155,7 +10243,7 @@ class _AbstractSlider extends _NgModelComponentBase {
         this._offset(+steps, event.shiftKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractSlider, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractSlider, isStandalone: true, inputs: { noTooltip: { classPropertyName: "noTooltip", publicName: "noTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatFn: { classPropertyName: "tooltipFormatFn", publicName: "tooltipFormatFn", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, shiftMultiplier: { classPropertyName: "shiftMultiplier", publicName: "shiftMultiplier", isSignal: true, isRequired: false, transformFunction: null }, showValueTicks: { classPropertyName: "showValueTicks", publicName: "showValueTicks", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipBehavior: { classPropertyName: "tooltipBehavior", publicName: "tooltipBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:pointerup": "onPointerUp($event)", "document:touchend": "onPointerUp($event)", "keydown": "onKeyPress($event)" } }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ArdSliderTooltipDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractSlider, isStandalone: true, inputs: { noTooltip: { classPropertyName: "noTooltip", publicName: "noTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatFn: { classPropertyName: "tooltipFormatFn", publicName: "tooltipFormatFn", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, shiftMultiplier: { classPropertyName: "shiftMultiplier", publicName: "shiftMultiplier", isSignal: true, isRequired: false, transformFunction: null }, showValueTicks: { classPropertyName: "showValueTicks", publicName: "showValueTicks", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipBehavior: { classPropertyName: "tooltipBehavior", publicName: "tooltipBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:pointerup": "onPointerUp()", "document:touchend": "onPointerUp()", "keydown": "onKeyPress($event)" } }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ArdSliderTooltipDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractSlider, decorators: [{
             type: Directive
@@ -10163,10 +10251,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], onPointerUp: [{
                 type: HostListener,
-                args: ['document:pointerup', ['$event']]
+                args: ['document:pointerup']
             }, {
                 type: HostListener,
-                args: ['document:touchend', ['$event']]
+                args: ['document:touchend']
             }], onKeyPress: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -10189,7 +10277,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         super(defaults);
         this.componentId = '106';
         this.componentName = 'range-slider';
-        this._value = { low: -Infinity, high: Infinity };
+        this._value = { from: -Infinity, to: Infinity };
         //! tooltip updater
         this._tooltipValue = this.value;
         //! handle focus monitors
@@ -10197,7 +10285,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
     }
     ngOnInit() {
         super.ngOnInit();
-        if (this._value.low !== -Infinity && this._value.high !== Infinity)
+        if (this._value.from !== -Infinity && this._value.to !== Infinity)
             return;
         this.writeValue({ low: this.min(), high: this.max() });
     }
@@ -10209,30 +10297,30 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         return Array.isArray(v) && isNumber(v[0]) && isNumber(v[1]) && v.length === 2;
     }
     _arrayValueToObjectValue(v) {
-        return { low: v[0], high: v[1] };
+        return { from: v[0], to: v[1] };
     }
     _normalizeSliderRange(v) {
-        if (v.low <= v.high)
+        if (v.from <= v.to)
             return v;
-        return { low: v.high, high: v.low };
+        return { from: v.to, to: v.from };
     }
     writeValue(v) {
         if (!this._isValidObject(v) && !this._isValidTuple(v)) {
             this.reset();
             return;
         }
-        let low = -Infinity;
-        let high = Infinity;
+        let from = -Infinity;
+        let to = Infinity;
         if (this._isValidObject(v)) {
-            low = v.low;
-            high = v.high;
+            from = v.from;
+            to = v.to;
         }
         else if (this._isValidTuple(v)) {
-            low = v[0];
-            high = v[1];
+            from = v[0];
+            to = v[1];
         }
-        const lowClamped = this._clampValue(low);
-        const highClamped = this._clampValue(high);
+        const lowClamped = this._clampValue(from);
+        const highClamped = this._clampValue(to);
         const value = this._arrayValueToObjectValue([lowClamped, highClamped]);
         this._value = value;
         this._positionPercent[0] = this._valueToPercent(lowClamped);
@@ -10245,12 +10333,19 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
     set value(v) {
         this.writeValue(v);
     }
+    cleanupValueAfterMinMaxStepChange() {
+        const prevValue = this._value;
+        this.writeValue(this._value);
+        if (prevValue.from !== this._value.from || prevValue.to !== this._value.to) {
+            this._emitChange();
+        }
+    }
     _updateTooltipValue() {
         const v = Object.create(this._value);
         const formatFn = this.tooltipFormatFn();
         if (formatFn) {
-            v.low = formatFn(v.low);
-            v.high = formatFn(v.high);
+            v.from = formatFn(v.from);
+            v.to = formatFn(v.to);
         }
         this._tooltipValue = v;
     }
@@ -10262,7 +10357,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
     }
     //! methods for programmatic manipulation
     reset() {
-        this._value = { low: -Infinity, high: Infinity };
+        this._value = { from: -Infinity, to: Infinity };
         this._positionPercent[0] = 0;
         this._positionPercent[1] = 1;
     }
@@ -10294,12 +10389,12 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         //round to 9 decimal places to avoid floating point arithmetic errors
         //9 is an arbitrary number that just works well. ¯\_(ツ)_/¯
         newVal = roundToPrecision(newVal, 9);
-        const newValObj = { low: this._value.low, high: this._value.high };
+        const newValObj = { from: this._value.from, to: this._value.to };
         if (handleId === 1) {
-            newValObj.low = newVal;
+            newValObj.from = newVal;
         }
         else {
-            newValObj.high = newVal;
+            newValObj.to = newVal;
         }
         return newValObj;
     }
@@ -10312,11 +10407,11 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         this.currentHandle.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeSliderComponent, deps: [{ token: ARD_SLIDER_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRangeSliderComponent, isStandalone: false, selector: "ard-range-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-range-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{\r\n          left: trackOverlayLeft,\r\n          width: trackOverlayWidth\r\n        }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n        <div class=\"ard-value-tick-container\">\r\n          @for (tick of _tickArray(); track tick) {\r\n            <div\r\n              class=\"ard-value-tick\"\r\n              [style]=\"{ left: tick }\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n      (focus)=\"onHandleFocus($event, 1)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(1) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('low')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(2) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('high')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    <div\r\n      class=\"ard-slider-label-container\"\r\n      *ngIf=\"labelObjects.length\"\r\n    >\r\n      @for (label of labelObjects(); track $index) {\r\n        <div\r\n          class=\"ard-slider-label\"\r\n          [style]=\"{ left: label.positionPercent }\"\r\n        >\r\n          {{ label.label }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRangeSliderComponent, isStandalone: false, selector: "ard-range-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-range-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{\r\n          left: trackOverlayLeft,\r\n          width: trackOverlayWidth\r\n        }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n        <div class=\"ard-value-tick-container\">\r\n          @for (tick of _tickArray(); track tick) {\r\n            <div\r\n              class=\"ard-value-tick\"\r\n              [style]=\"{ left: tick }\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n      (focus)=\"onHandleFocus($event, 1)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(1) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('from')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(2) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('to')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    <div\r\n      class=\"ard-slider-label-container\"\r\n      *ngIf=\"labelObjects.length\"\r\n    >\r\n      @for (label of labelObjects(); track $index) {\r\n        <div\r\n          class=\"ard-slider-label\"\r\n          [style]=\"{ left: label.positionPercent }\"\r\n        >\r\n          {{ label.label }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ArdiumRangeSliderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-range-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{\r\n          left: trackOverlayLeft,\r\n          width: trackOverlayWidth\r\n        }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n        <div class=\"ard-value-tick-container\">\r\n          @for (tick of _tickArray(); track tick) {\r\n            <div\r\n              class=\"ard-value-tick\"\r\n              [style]=\"{ left: tick }\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n      (focus)=\"onHandleFocus($event, 1)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(1) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('low')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(2) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('high')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    <div\r\n      class=\"ard-slider-label-container\"\r\n      *ngIf=\"labelObjects.length\"\r\n    >\r\n      @for (label of labelObjects(); track $index) {\r\n        <div\r\n          class=\"ard-slider-label\"\r\n          [style]=\"{ left: label.positionPercent }\"\r\n        >\r\n          {{ label.label }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
+            args: [{ standalone: false, selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-range-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{\r\n          left: trackOverlayLeft,\r\n          width: trackOverlayWidth\r\n        }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n        <div class=\"ard-value-tick-container\">\r\n          @for (tick of _tickArray(); track tick) {\r\n            <div\r\n              class=\"ard-value-tick\"\r\n              [style]=\"{ left: tick }\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n      (focus)=\"onHandleFocus($event, 1)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(1) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('from')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(2) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('to')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    <div\r\n      class=\"ard-slider-label-container\"\r\n      *ngIf=\"labelObjects.length\"\r\n    >\r\n      @for (label of labelObjects(); track $index) {\r\n        <div\r\n          class=\"ard-slider-label\"\r\n          [style]=\"{ left: label.positionPercent }\"\r\n        >\r\n          {{ label.label }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SLIDER_DEFAULTS]
@@ -10377,6 +10472,13 @@ class ArdiumSliderComponent extends _AbstractSlider {
         this._positionPercent[0] = this._valueToPercent(v);
         this._updateTooltipValue();
     }
+    cleanupValueAfterMinMaxStepChange() {
+        const prevValue = this._value;
+        this.writeValue(this._value);
+        if (prevValue !== this._value) {
+            this._emitChange();
+        }
+    }
     //! methods for programmatic manipulation
     reset() {
         this._value = 0;
@@ -11035,6 +11137,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Directive,
             args: [{ standalone: false, selector: 'ard-checkbox-list > ng-template[ard-checkbox-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCheckboxListLabelTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdCheckboxListLabelTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ArdCheckboxListLabelTemplateDirective, isStandalone: false, selector: "ard-checkbox-list > ng-template[ard-label-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdCheckboxListLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ standalone: false, selector: 'ard-checkbox-list > ng-template[ard-label-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     constructor(defaults) {
@@ -11046,11 +11159,13 @@ 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) });
+        this.invertDisabled = input(this._DEFAULTS.invertDisabled, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.maxSelectedItems = input(this._DEFAULTS.maxSelectedItems, {
             transform: v => coerceNumberProperty(v, this._DEFAULTS.maxSelectedItems),
         });
@@ -11060,10 +11175,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();
@@ -11097,7 +11223,6 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     _emitChange() {
         const v = this.value;
         this._onChangeRegistered?.(v);
-        this.changeEvent.emit(v);
         this.valueChange.emit(v);
     }
     onItemHighlight(v) {
@@ -11118,18 +11243,18 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this._emitChange();
     }
     toggleItem(v) {
-        if (v.selected()) {
+        if (v.selected) {
             this.unselectItem(v);
             return;
         }
         this.selectItem(v);
     }
     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 }], 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      (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        {{ item.label() }}\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: "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      (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        {{ item.label() }}\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]
@@ -11144,15 +11269,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ArdiumCheckboxListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListModule, declarations: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective], imports: [CommonModule, ArdiumCheckboxModule, _CheckboxTemplateRepositoryDirective], exports: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListModule, declarations: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective], imports: [CommonModule, ArdiumCheckboxModule, _CheckboxTemplateRepositoryDirective], exports: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListModule, imports: [CommonModule, ArdiumCheckboxModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective],
+                    declarations: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective],
                     imports: [CommonModule, ArdiumCheckboxModule, _CheckboxTemplateRepositoryDirective],
-                    exports: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective],
+                    exports: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective],
                 }]
         }] });
 
@@ -11546,8 +11671,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class ArdiumErrorDirective {
+    constructor() {
+        this.left = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.right = input(false, { transform: v => coerceBooleanProperty(v) });
+        effect(() => {
+            if (this.left() && this.right()) {
+                console.error(`ARD-NF5140: Cannot align a form field error to both left and right.`);
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ArdiumErrorDirective, isStandalone: true, selector: "[ard-error]", host: { properties: { "class.ard-error": "true" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumErrorDirective, isStandalone: true, selector: "[ard-error]", inputs: { left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-error": "true", "class.ard-error-default": "!left() && !right()", "class.ard-error-left": "left() && !right()", "class.ard-error-right": "!left() && right()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumErrorDirective, decorators: [{
             type: Directive,
@@ -11556,9 +11690,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     standalone: true,
                     host: {
                         '[class.ard-error]': 'true',
+                        '[class.ard-error-default]': '!left() && !right()',
+                        '[class.ard-error-left]': 'left() && !right()',
+                        '[class.ard-error-right]': '!left() && right()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class ArdiumErrorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -11662,6 +11799,38 @@ function provideFormFieldDefaults(config) {
     return { provide: ARD_FORM_FIELD_DEFAULTS, useValue: { ..._formFieldDefaults, ...config } };
 }
 
+class ArdiumHintErrorDirective {
+    constructor() {
+        this.left = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.right = input(false, { transform: v => coerceBooleanProperty(v) });
+        effect(() => {
+            if (this.left() && this.right()) {
+                console.error(`ARD-NF5150: Cannot align a form field hint-error to both left and right.`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHintErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumHintErrorDirective, isStandalone: true, selector: "[ard-hint-error]", inputs: { left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-hint-error": "true", "class.ard-hint": "true", "class.ard-error-default": "!left() && !right()", "class.ard-error-left": "left() && !right()", "class.ard-error-right": "!left() && right()", "class.ard-error": "true", "class.ard-hint-default": "!left() && !right()", "class.ard-hint-left": "left() && !right()", "class.ard-hint-right": "!left() && right()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHintErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ard-hint-error]',
+                    standalone: true,
+                    host: {
+                        '[class.ard-hint-error]': 'true',
+                        '[class.ard-hint]': 'true',
+                        '[class.ard-error-default]': '!left() && !right()',
+                        '[class.ard-error-left]': 'left() && !right()',
+                        '[class.ard-error-right]': '!left() && right()',
+                        '[class.ard-error]': 'true',
+                        '[class.ard-hint-default]': '!left() && !right()',
+                        '[class.ard-hint-left]': 'left() && !right()',
+                        '[class.ard-hint-right]': '!left() && right()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 class ArdiumHintDirective {
     constructor() {
         this.left = input(false, { transform: v => coerceBooleanProperty(v) });
@@ -11698,7 +11867,7 @@ class ArdiumLabelComponent {
         this.optionalText = input(this._DEFAULTS.labelOptionalText);
         effect(() => {
             if (this.required() && this.optional()) {
-                console.error(`ARD-NF5110: Cannot set a form field label to be both required and optional.`);
+                console.error(`ARD-NF5120: Cannot set a form field label to be both required and optional.`);
             }
         });
     }
@@ -11715,7 +11884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class _FormFieldBase {
     constructor() {
         this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
-        this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
+        this.defaultHintAlign = input(this._DEFAULTS.defaultHintAlign);
+        this.alignHintToLeftByDefault = computed(() => this.defaultHintAlign() === SimpleOneAxisAlignment.Left);
         this.control = contentChild(ARD_FORM_FIELD_CONTROL);
         // get controlRequired() {
         //   const fnOrValue = this.control()?.required;
@@ -11724,7 +11894,9 @@ class _FormFieldBase {
         this.label = contentChild(ArdiumLabelComponent);
         this.hints = contentChildren(ArdiumHintDirective);
         this.errors = contentChildren(ArdiumErrorDirective);
-        this.hasAnyError = computed(() => this.errors()?.length > 0);
+        this.hintErrors = contentChildren(ArdiumHintErrorDirective);
+        this.hasAnyHint = computed(() => this.hints().length > 0 || this.hintErrors().length > 0);
+        this.hasAnyError = computed(() => this.errors().length > 0);
         this.reserveHintLine = input(this._DEFAULTS.reserveHintLine, { transform: v => coerceBooleanProperty(v) });
     }
     get controlHasError() {
@@ -11749,7 +11921,7 @@ class _FormFieldBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _FormFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _FormFieldBase, isStandalone: true, inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: ARD_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _FormFieldBase, isStandalone: true, inputs: { defaultHintAlign: { classPropertyName: "defaultHintAlign", publicName: "defaultHintAlign", isSignal: true, isRequired: false, transformFunction: null }, reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: ARD_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }, { propertyName: "hintErrors", predicate: ArdiumHintErrorDirective, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _FormFieldBase, decorators: [{
             type: Directive
@@ -11757,11 +11929,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ArdiumFormFieldComponent extends _FormFieldBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__errors]=\"hasAnyError()\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__errors-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__errors-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ 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: ArdiumFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
+            args: [{ standalone: false, selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__errors]=\"hasAnyError()\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__errors-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__errors-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
+        }] });
+
+class ArdiumHintErrorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHintErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ArdiumHintErrorComponent, isStandalone: false, selector: "ard-hint-error", hostDirectives: [{ directive: ArdiumHintErrorDirective, inputs: ["left", "left", "right", "right"] }], ngImport: i0, template: '<ng-content />', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHintErrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'ard-hint-error',
+                    template: '<ng-content />',
+                    hostDirectives: [{ directive: ArdiumHintErrorDirective, inputs: ['left', 'right'] }],
+                }]
         }] });
 
 class ArdiumHintComponent {
@@ -11780,11 +11966,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ArdiumHorizontalFormFieldComponent extends _FormFieldBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n        <div class=\"ard-form-field__error\">\r\n          <ng-content select=\"ard-error, [ard-error]\" />\r\n        </div>\r\n      } @else {\r\n        <div class=\"ard-form-field__hints-left\">\r\n          <div class=\"ard-form-field__default-hint\">\r\n            <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n          </div>\r\n          <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        </div>\r\n        <div class=\"ard-form-field__hints-right\">\r\n          <div class=\"ard-form-field__default-hint\">\r\n            <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n          </div>\r\n          <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__errors]=\"hasAnyError()\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__errors-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__errors-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ 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: ArdiumHorizontalFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n        <div class=\"ard-form-field__error\">\r\n          <ng-content select=\"ard-error, [ard-error]\" />\r\n        </div>\r\n      } @else {\r\n        <div class=\"ard-form-field__hints-left\">\r\n          <div class=\"ard-form-field__default-hint\">\r\n            <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n          </div>\r\n          <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        </div>\r\n        <div class=\"ard-form-field__hints-right\">\r\n          <div class=\"ard-form-field__default-hint\">\r\n            <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n          </div>\r\n          <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
+            args: [{ standalone: false, selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__errors]=\"hasAnyError()\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__errors-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__errors-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
         }] });
 
 class ArdiumFormFieldModule {
@@ -11794,12 +11980,14 @@ class ArdiumFormFieldModule {
             ArdiumFormFieldNativeInputAdapterDirective,
             ArdiumLabelComponent,
             ArdiumHintComponent,
-            ArdiumErrorComponent], imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective], exports: [ArdiumFormFieldComponent,
+            ArdiumErrorComponent,
+            ArdiumHintErrorComponent], imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective], exports: [ArdiumFormFieldComponent,
             ArdiumHorizontalFormFieldComponent,
             ArdiumFormFieldNativeInputAdapterDirective,
             ArdiumLabelComponent,
             ArdiumHintComponent,
-            ArdiumErrorComponent] }); }
+            ArdiumErrorComponent,
+            ArdiumHintErrorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldModule, decorators: [{
@@ -11812,6 +12000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdiumLabelComponent,
                         ArdiumHintComponent,
                         ArdiumErrorComponent,
+                        ArdiumHintErrorComponent,
                     ],
                     imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective],
                     exports: [
@@ -11821,6 +12010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdiumLabelComponent,
                         ArdiumHintComponent,
                         ArdiumErrorComponent,
+                        ArdiumHintErrorComponent,
                     ],
                 }]
         }] });
@@ -12888,7 +13078,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", "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"], 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,
@@ -13841,30 +14031,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
-const _tabDefaults = {
-    disabled: false,
+const _tabberDefaults = {
+    tabDisabled: false,
+    color: ComponentColor.Primary,
+    stretchTabs: false,
+    uniformTabWidths: false,
+    tabAlignment: OneAxisAlignment.Left,
+    tabIndex: 0,
 };
-const ARD_TAB_DEFAULTS = new InjectionToken('ard-tab-defaults', {
+const ARD_TABBER_DEFAULTS = new InjectionToken('ard-tabber-defaults', {
     factory: () => ({
-        ..._tabDefaults,
+        ..._tabberDefaults,
     }),
 });
-function provideTabDefaults(config) {
-    return { provide: ARD_TAB_DEFAULTS, useValue: { ..._tabDefaults, ...config } };
+function provideTabberDefaults(config) {
+    return { provide: ARD_TABBER_DEFAULTS, useValue: { ..._tabberDefaults, ...config } };
 }
 
 class ArdiumTabComponent {
     constructor() {
-        this._DEFAULTS = inject(ARD_TAB_DEFAULTS);
-        this.disabled = input(this._DEFAULTS.disabled, { transform: v => coerceBooleanProperty(v) });
+        this._DEFAULTS = inject(ARD_TABBER_DEFAULTS);
+        this.disabled = input(this._DEFAULTS.tabDisabled, { transform: v => coerceBooleanProperty(v) });
         this.selected = signal(false);
         this.focused = signal(false);
         this._label = input(null, { alias: 'label' });
         this.label = computed(() => this._label() ?? this.tabId());
-        this.tabId = input.required();
-        this.focusEvent = output();
-        this.blurEvent = output();
+        this._isTabIdInitialized = false;
+        this.tabId = input.required({
+            transform: v => {
+                this._isTabIdInitialized = true;
+                return v;
+            },
+        });
+        this.focusEvent = output({ alias: 'focus' });
+        this.blurEvent = output({ alias: 'blur' });
         this.selectedChange = output();
+        this.selectedChangeInternal$ = new Subject();
+        this._selectedChangeSub = this.selectedChangeInternal$.subscribe(this.selectedChange.emit);
     }
     set _selected(v) {
         this.selected.set(coerceBooleanProperty(v));
@@ -13873,58 +14076,63 @@ class ArdiumTabComponent {
         this.selected.set(state);
         this._emitChange();
     }
-    get _selectedHostAttribute() {
-        return this.selected();
-    }
     _emitChange() {
-        this.selectedChange.emit(this.selected());
+        this.selectedChangeInternal$.next(this.selected());
+    }
+    ngOnDestroy() {
+        this._selectedChangeSub.unsubscribe();
+        this.selectedChangeInternal$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", selectedChange: "selectedChange" }, host: { properties: { "class.ard-tab-selected": "this._selectedHostAttribute" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", selectedChange: "selectedChange" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.ard-tab-disabled": "disabled()", "class.ard-tab-selected": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n" }]
+            args: [{ standalone: false, selector: 'ard-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'tabpanel',
+                        '[class.ard-tab-disabled]': 'disabled()',
+                        '[class.ard-tab-selected]': 'selected()',
+                    }, template: "<ng-content></ng-content>\r\n" }]
         }], propDecorators: { _selected: [{
                 type: Input,
                 args: ['selected']
-            }], _selectedHostAttribute: [{
-                type: HostBinding,
-                args: ['class.ard-tab-selected']
             }] } });
 
-const _tabberDefaults = {
-    color: ComponentColor.Primary,
-    stretchTabs: false,
-    uniformTabWidths: false,
-    tabAlignment: OneAxisAlignment.Left,
-    tabIndex: 0,
-};
-const ARD_TABBER_DEFAULTS = new InjectionToken('ard-tabber-defaults', {
-    factory: () => ({
-        ..._tabberDefaults,
-    }),
-});
-function provideTabberDefaults(config) {
-    return { provide: ARD_TABBER_DEFAULTS, useValue: { ..._tabberDefaults, ...config } };
+class ArdTabberLabelTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdTabberLabelTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ArdTabberLabelTemplateDirective, isStandalone: false, selector: "ng-template[ard-tabber-label-tmp]", ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdTabberLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: 'ng-template[ard-tabber-label-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class ArdiumTabberComponent {
     constructor() {
         this._DEFAULTS = inject(ARD_TABBER_DEFAULTS);
         this.tabs = contentChildren(ArdiumTabComponent, { descendants: true });
-        this.currentTab = signal(null);
-        this.currentFocusedTab = signal(null);
+        this.selectedTabId = model(null, { alias: 'selectedTab' });
+        this.selectedTab = computed(() => this.tabs().find(tab => tab.tabId() === this.selectedTabId()) ?? null);
+        this.focusedTabId = signal(null);
+        this.focusedTab = computed(() => this.tabs().find(tab => tab.tabId() === this.focusedTabId()) ?? null);
+        this._selectedTabIdToCheck = null;
         this.initialTab = input(undefined);
         this.focusEvent = output({ alias: 'focus' });
         this.blurEvent = output({ alias: 'blur' });
-        this.changeTab = output();
         //! appearance
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
         //! tab container settings
         this.stretchTabs = input(this._DEFAULTS.stretchTabs, { transform: v => coerceBooleanProperty(v) });
-        this.uniformTabWidths = input(this._DEFAULTS.uniformTabWidths, { transform: v => coerceBooleanProperty(v) });
+        this.uniformTabWidths = input(this._DEFAULTS.uniformTabWidths, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.tabAlignment = input(this._DEFAULTS.tabAlignment);
         this.tabContainerClasses = computed(() => [
             this.uniformTabWidths() && !this.stretchTabs() ? 'ard-uniform-tab-widths' : '',
@@ -13933,6 +14141,45 @@ class ArdiumTabberComponent {
         ].join(' '));
         //! other
         this.tabIndex = input(0);
+        //! tab label template
+        this.labelTemplate = contentChild(ArdTabberLabelTemplateDirective);
+        this.tabsWithTemplates = computed(() => this.tabs().map(tab => ({
+            tab,
+            template: typeof tab.label() === 'string' ? null : tab.label(),
+            templateContext: typeof tab.label() === 'string'
+                ? { $implicit: tab.label(), tabId: tab.tabId(), label: tab.label() }
+                : null,
+        })));
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedTabId']) {
+            // make sure the tab exists
+            const newTabId = changes['selectedTabId'].currentValue;
+            if (this.tabs().some(tab => !tab._isTabIdInitialized)) {
+                this._selectedTabIdToCheck = newTabId;
+            }
+            else {
+                const oldTabId = changes['selectedTabId'].previousValue;
+                this._validateSelectedTabId(newTabId, oldTabId);
+            }
+        }
+    }
+    _validateSelectedTabId(newTabId, oldTabId) {
+        if (newTabId !== null) {
+            const newTab = this.tabs().find(tab => tab._isTabIdInitialized && tab.tabId() === newTabId);
+            if (!newTab) {
+                // tabs are initialized but the tab does not exist, show error
+                console.error(`ARD-NF6000: Trying to select a tab with id '${newTabId}' that does not exist.`);
+                return;
+            }
+            // tab exists, select it and unselect the old one
+            if (oldTabId !== null) {
+                const oldTab = this.tabs().find(tab => tab._isTabIdInitialized && tab.tabId() === oldTabId);
+                if (oldTab)
+                    this._unselectSpecificTab(oldTab);
+            }
+            this._selectNewTab(newTab);
+        }
     }
     ngAfterContentInit() {
         let selectedCmp = null;
@@ -13944,18 +14191,27 @@ class ArdiumTabberComponent {
                 }
                 selectedCmp = cmp;
             }
+            // subscribe to events
             cmp.focusEvent.subscribe(() => {
                 this.focusEvent.emit(cmp.tabId());
             });
             cmp.blurEvent.subscribe(() => {
                 this.blurEvent.emit(cmp.tabId());
             });
-            cmp.selectedChange.subscribe(isSelected => {
-                if (!isSelected)
+            cmp.selectedChangeInternal$.subscribe(isSelected => {
+                if (!isSelected) {
+                    this.selectedTabId.set(null);
                     return;
-                this.changeTab.emit(cmp.tabId());
+                }
+                this.selectTab(cmp);
             });
         }
+        // if there was a pending selectedTabId to check, do it now
+        if (this._selectedTabIdToCheck !== null) {
+            this._validateSelectedTabId(this._selectedTabIdToCheck, null);
+            this._selectedTabIdToCheck = null;
+        }
+        // if no tab is selected, select the initial tab or the first tab
         if (!selectedCmp) {
             const initiallySelectedTab = this.tabs().find(tab => tab.tabId() === this.initialTab());
             selectedCmp = initiallySelectedTab ?? this.tabs()[0] ?? null;
@@ -13963,47 +14219,59 @@ class ArdiumTabberComponent {
                 selectedCmp.selected.set(true);
             }
         }
-        this.currentTab.set(selectedCmp);
+        this.selectedTabId.set(selectedCmp.tabId());
+    }
+    selectTab(tab) {
+        if (tab.tabId() === this.selectedTabId()) {
+            return;
+        }
+        this._unselectCurrentTab(tab);
+        this.selectedTabId.set(tab.tabId());
+        this._selectNewTab(tab);
+    }
+    _unselectSpecificTab(tab) {
+        tab.selected.set(false);
+        tab.selectedChange.emit(false);
     }
-    onTabClick(tab) {
-        const curr = this.currentTab();
-        if (curr) {
-            curr.selected.set(false);
-            curr.selectedChange.emit(false);
+    _unselectCurrentTab(referenceTab) {
+        const curr = this.selectedTab();
+        if (curr && (!referenceTab || curr.tabId() !== referenceTab.tabId())) {
+            this._unselectSpecificTab(curr);
         }
-        this.currentTab.set(tab);
+    }
+    _selectNewTab(tab) {
         tab.selected.set(true);
         tab.selectedChange.emit(true);
     }
     onTabFocus(tab) {
         tab.focusEvent.emit();
         tab.focused.set(true);
-        this.currentFocusedTab.set(tab);
+        this.focusedTabId.set(tab.tabId());
     }
     onTabBlur(tab) {
         tab.blurEvent.emit();
         tab.focused.set(false);
-        this.currentFocusedTab.set(null);
+        this.focusedTabId.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", changeTab: "changeTab" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tab of tabs(); track tab) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tab.tabId()\"\r\n        [class.ard-tab-active]=\"tab === currentTab()\"\r\n        [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\r\n        (click)=\"!tab.selected() && onTabClick(tab)\"\r\n        (focus)=\"onTabFocus(tab)\"\r\n        (blur)=\"onTabBlur(tab)\"\r\n        [tabindex]=\"tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabId: "selectedTabChange", focusEvent: "focus", blurEvent: "blur" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdTabberLabelTemplateDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      role=\"tab\"\r\n      class=\"ard-tab-button\"\r\n      [id]=\"tabObj.tab.tabId()\"\r\n      [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n      [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n      (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n      (focus)=\"onTabFocus(tabObj.tab)\"\r\n      (blur)=\"onTabBlur(tabObj.tab)\"\r\n      [tabindex]=\"tabIndex()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <ng-template\r\n          #defaultLabelTemplate\r\n          let-label\r\n        >\r\n          {{ label }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n          [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n        />\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\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: ArdiumTabberComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tab of tabs(); track tab) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tab.tabId()\"\r\n        [class.ard-tab-active]=\"tab === currentTab()\"\r\n        [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\r\n        (click)=\"!tab.selected() && onTabClick(tab)\"\r\n        (focus)=\"onTabFocus(tab)\"\r\n        (blur)=\"onTabBlur(tab)\"\r\n        [tabindex]=\"tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
+            args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      role=\"tab\"\r\n      class=\"ard-tab-button\"\r\n      [id]=\"tabObj.tab.tabId()\"\r\n      [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n      [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n      (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n      (focus)=\"onTabFocus(tabObj.tab)\"\r\n      (blur)=\"onTabBlur(tabObj.tab)\"\r\n      [tabindex]=\"tabIndex()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <ng-template\r\n          #defaultLabelTemplate\r\n          let-label\r\n        >\r\n          {{ label }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n          [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n        />\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
         }] });
 
 class ArdiumTabberModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberModule, declarations: [ArdiumTabberComponent, ArdiumTabComponent], imports: [CommonModule], exports: [ArdiumTabberComponent, ArdiumTabComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberModule, declarations: [ArdiumTabberComponent, ArdiumTabComponent, ArdTabberLabelTemplateDirective], imports: [CommonModule], exports: [ArdiumTabberComponent, ArdiumTabComponent, ArdTabberLabelTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumTabberComponent, ArdiumTabComponent],
+                    declarations: [ArdiumTabberComponent, ArdiumTabComponent, ArdTabberLabelTemplateDirective],
                     imports: [CommonModule],
-                    exports: [ArdiumTabberComponent, ArdiumTabComponent],
+                    exports: [ArdiumTabberComponent, ArdiumTabComponent, ArdTabberLabelTemplateDirective],
                 }]
         }] });
 
@@ -14718,5 +14986,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map