@ardium-ui/ui 3.6.0 → 4.1.0

package/fesm2022/ardium-ui-ui.mjs

@@ -213,7 +213,7 @@ class _NgModelComponentBase extends _FocusableComponentBase {
     ngOnInit() {
         this._ngControl = this._injector.get(NgControl, null);
         if (this._ngControl) {
-            if (!this._ngControl.valueAccessor || this && this instanceof this._ngControl.valueAccessor.constructor) {
+            if (!this._ngControl.valueAccessor || (this && this instanceof this._ngControl.valueAccessor.constructor)) {
                 this._ngControl.valueAccessor = this;
             }
             this._hasErrorInControl.set(this._ngControl.status === 'INVALID');
@@ -855,7 +855,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumDigitInputComponent,
             },
-        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    <input\r\n      #input\r\n      type=\"text\"\r\n      class=\"ard-digit-input__static-input\"\r\n      data-ard-static\r\n      autocomplete=\"off\"\r\n      tabindex=\"-1\"\r\n      aria-hidden=\"true\"\r\n      [value]=\"data.char\"\r\n    />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n    <div\r\n      class=\"ard-digit-input__item\"\r\n      [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n    >\r\n      @if (data.type === 'input') {\r\n        <input\r\n          #input\r\n          #focusableElement\r\n          class=\"ard-digit-input__input\"\r\n          type=\"text\"\r\n          [readonly]=\"data.readonly\"\r\n          [placeholder]=\"data.placeholder\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n          (paste)=\"onPaste($event, data.index!)\"\r\n          (input)=\"onInput($event, data.index!)\"\r\n          (focus)=\"onFocusMaster($event, data.index!)\"\r\n          (blur)=\"onBlurMaster($event, data.index!)\"\r\n          (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n      } @else {\r\n        <div class=\"ard-digit-input__static\">\r\n          {{ data.char }}\r\n        </div>\r\n        <input\r\n          #input\r\n          type=\"text\"\r\n          class=\"ard-digit-input__static-input\"\r\n          data-ard-static\r\n          autocomplete=\"off\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n          [value]=\"data.char\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
@@ -869,7 +869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumDigitInputComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    <input\r\n      #input\r\n      type=\"text\"\r\n      class=\"ard-digit-input__static-input\"\r\n      data-ard-static\r\n      autocomplete=\"off\"\r\n      tabindex=\"-1\"\r\n      aria-hidden=\"true\"\r\n      [value]=\"data.char\"\r\n    />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n    <div\r\n      class=\"ard-digit-input__item\"\r\n      [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n    >\r\n      @if (data.type === 'input') {\r\n        <input\r\n          #input\r\n          #focusableElement\r\n          class=\"ard-digit-input__input\"\r\n          type=\"text\"\r\n          [readonly]=\"data.readonly\"\r\n          [placeholder]=\"data.placeholder\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n          (paste)=\"onPaste($event, data.index!)\"\r\n          (input)=\"onInput($event, data.index!)\"\r\n          (focus)=\"onFocusMaster($event, data.index!)\"\r\n          (blur)=\"onBlurMaster($event, data.index!)\"\r\n          (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n      } @else {\r\n        <div class=\"ard-digit-input__static\">\r\n          {{ data.char }}\r\n        </div>\r\n        <input\r\n          #input\r\n          type=\"text\"\r\n          class=\"ard-digit-input__static-input\"\r\n          data-ard-static\r\n          autocomplete=\"off\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n          [value]=\"data.char\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DIGIT_INPUT_DEFAULTS]
@@ -1499,6 +1499,7 @@ class NumberInputModel {
     }
     _updateInputEl() {
         const stringV = this.stringValue();
+        console.log('Updating input element to', stringV, this.value());
         const el = this._ardHostCmp.inputEl()?.nativeElement;
         if (!el)
             return;
@@ -1519,11 +1520,15 @@ class NumberInputModel {
     }
     _writeValue(v) {
         //constraints
+        console.log('Writing value 1', v);
         if (v) {
             v = this._removeDecimalPlaces(v);
+            console.log('Writing value 2', v);
             v = this._applyNumberConstraint(v);
+            console.log('Writing value 3', v);
             v = this._applyMinMaxConstraints(v);
         }
+        console.log('Writing value 4', v);
         //update view
         const oldVal = this._value();
         this.setValue(v);
@@ -1542,7 +1547,7 @@ class NumberInputModel {
     }
     //! constraints
     _removeDecimalPlaces(v) {
-        if (!v)
+        if (!v && v !== 0)
             return '';
         if (this._ardHostCmp.allowFloat())
             return v;
@@ -1555,7 +1560,7 @@ class NumberInputModel {
         return v;
     }
     _applyNumberConstraint(v) {
-        if (!v)
+        if (!v && v !== 0)
             return '';
         const transformerFn = this._ardHostCmp.allowFloat() ? ArdTransformer.Float : ArdTransformer.Integer;
         const { text, caretPos } = transformerFn(String(v), this.stringValue(), this.caretPos);
@@ -2026,7 +2031,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 provide: _FormFieldComponentBase,
                 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 }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, 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-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: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], 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 }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-input\"\n    #suggestionsHost\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayAutocomplete()) {\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\n      }\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n\n<ng-template #suggestionsTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\n    role=\"listbox\"\n    [compact]=\"compact\"\n    aria-label=\"Suggestions\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"shouldDisplaySuggestions()\"\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\n    (mousemove)=\"onMouseMove()\"\n  >\n    @for (item of suggestionItems(); track item.index) {\n      <div\n        class=\"ard-option\"\n        role=\"option\"\n        [class.ard-option-selected]=\"item.selected()\"\n        [class.ard-option-highlighted]=\"item.highlighted()\"\n        [attr.aria-selected]=\"item.selected()\"\n        (click)=\"selectSuggestion(item, $event)\"\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\n      >\n        <span class=\"ard-option-label\">\n          <ng-template #defaultOptionTemplate>\n            {{ item.label() }}\n          </ng-template>\n\n          <ng-template\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\n          ></ng-template>\n        </span>\n      </div>\n    }\n    @if (areSuggestionsLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\n    }\n  </ard-dropdown-panel>\n</ng-template>\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: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
@@ -2040,7 +2045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             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    #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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-input\"\n    #suggestionsHost\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayAutocomplete()) {\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\n      }\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n\n<ng-template #suggestionsTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\n    role=\"listbox\"\n    [compact]=\"compact\"\n    aria-label=\"Suggestions\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"shouldDisplaySuggestions()\"\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\n    (mousemove)=\"onMouseMove()\"\n  >\n    @for (item of suggestionItems(); track item.index) {\n      <div\n        class=\"ard-option\"\n        role=\"option\"\n        [class.ard-option-selected]=\"item.selected()\"\n        [class.ard-option-highlighted]=\"item.highlighted()\"\n        [attr.aria-selected]=\"item.selected()\"\n        (click)=\"selectSuggestion(item, $event)\"\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\n      >\n        <span class=\"ard-option-label\">\n          <ng-template #defaultOptionTemplate>\n            {{ item.label() }}\n          </ng-template>\n\n          <ng-template\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\n          ></ng-template>\n        </span>\n      </div>\n    }\n    @if (areSuggestionsLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\n    }\n  </ard-dropdown-panel>\n</ng-template>\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_INPUT_DEFAULTS]
@@ -2390,7 +2395,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-password-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value()\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n        [class.ard-revealed]=\"revealable() && revealed()\"\n      />\n    </div>\n\n    @if (revealable()) {\n      <button\n        class=\"ard-reveal-button\"\n        type=\"button\"\n        (click)=\"!holdToReveal() && toggleReveal()\"\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\n      >\n        <ng-template\n          #defaultRevealTemplate\n          let-revealed\n        >\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\n        />\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\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: "18.2.13", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -2404,7 +2409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-password-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value()\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n        [class.ard-revealed]=\"revealable() && revealed()\"\n      />\n    </div>\n\n    @if (revealable()) {\n      <button\n        class=\"ard-reveal-button\"\n        type=\"button\"\n        (click)=\"!holdToReveal() && toggleReveal()\"\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\n      >\n        <ng-template\n          #defaultRevealTemplate\n          let-revealed\n        >\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\n        />\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_PASSWORD_INPUT_DEFAULTS]
@@ -2531,9 +2536,9 @@ class ArdiumSimpleInputComponent extends _SimpleInputComponentBase {
             },
             {
                 provide: _FormFieldComponentBase,
-                useExisting: ArdiumSimpleInputComponent
+                useExisting: ArdiumSimpleInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, 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-simple-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: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-simple-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocusMaster($event)\"\n        (blur)=\"onBlurMaster($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\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: "18.2.13", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
             type: Component,
@@ -2545,9 +2550,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         },
                         {
                             provide: _FormFieldComponentBase,
-                            useExisting: ArdiumSimpleInputComponent
+                            useExisting: ArdiumSimpleInputComponent,
                         },
-                    ], 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-simple-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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-simple-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocusMaster($event)\"\n        (blur)=\"onBlurMaster($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\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]
@@ -4269,7 +4274,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 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        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></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-simple-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          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\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\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], 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: "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      }\r\n      @if (shouldDisplayValue()) {\r\n        @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]=\"\r\n                  valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\r\n                \"\r\n                [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-item\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n        </ng-template>\r\n        <ng-template\r\n          #defaultMultiValueTemplate\r\n          let-item\r\n          let-unselect=\"unselect\"\r\n        >\r\n          <ard-deletable-chip\r\n            (delete)=\"unselect(item)\"\r\n            [variant]=\"variant()\"\r\n            compact\r\n            appearance=\"outlined-strong\"\r\n          >\r\n            <div\r\n              [ardInnerHTML]=\"item.label()\"\r\n              [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n            ></div>\r\n          </ard-deletable-chip>\r\n        </ng-template>\r\n      }\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-simple-spinner\"></div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      }\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()) {\r\n      @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                [ardInnerHTML]=\"group.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\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\r\n                      [ardInnerHTML]=\"option.label()\"\r\n                      [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n                    ></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      }\r\n    }\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    }\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    }\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: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
             type: Component,
@@ -4283,7 +4288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             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        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></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-simple-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          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\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\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></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  [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      }\r\n      @if (shouldDisplayValue()) {\r\n        @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]=\"\r\n                  valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\r\n                \"\r\n                [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-item\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n        </ng-template>\r\n        <ng-template\r\n          #defaultMultiValueTemplate\r\n          let-item\r\n          let-unselect=\"unselect\"\r\n        >\r\n          <ard-deletable-chip\r\n            (delete)=\"unselect(item)\"\r\n            [variant]=\"variant()\"\r\n            compact\r\n            appearance=\"outlined-strong\"\r\n          >\r\n            <div\r\n              [ardInnerHTML]=\"item.label()\"\r\n              [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n            ></div>\r\n          </ard-deletable-chip>\r\n        </ng-template>\r\n      }\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-simple-spinner\"></div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      }\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()) {\r\n      @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                [ardInnerHTML]=\"group.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\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\r\n                      [ardInnerHTML]=\"option.label()\"\r\n                      [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n                    ></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      }\r\n    }\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    }\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    }\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECT_DEFAULTS]
@@ -4831,7 +4836,9 @@ class _ButtonBase extends _FocusableComponentBase {
         this.color = input(this._DEFAULTS.color);
         this.lightColoring = input(this._DEFAULTS.lightColoring, { transform: v => coerceBooleanProperty(v) });
         this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
-        this.pointerEventsWhenDisabled = input(this._DEFAULTS.pointerEventsWhenDisabled, { transform: v => coerceBooleanProperty(v) });
+        this.pointerEventsWhenDisabled = input(this._DEFAULTS.pointerEventsWhenDisabled, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this._DEFAULTS = defaults;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _ButtonBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
@@ -5005,11 +5012,11 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: [{ token: ARD_FILE_DROP_AREA_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-file-drop-area\"\n  (ardClickOutside)=\"onDragleave()\"\n  (dragleave)=\"onDragleave()\"\n  (dragover)=\"onDragover($event)\"\n  (drop)=\"onDrop($event)\"\n  [ngClass]=\"ngClasses\"\n>\n  <div class=\"ard-file-drop-area-outline\">\n    <div class=\"ard-file-drop-area-content\">\n      @if (currentViewState() === 'idle') {\n        <ng-template\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n          [ngTemplateOutletContext]=\"getIdleContext()\"\n        />\n      }\n      <ng-template\n        *ngIf=\"currentViewState() === 'dragover'\"\n        [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\n      ></ng-template>\n      <ng-template\n        *ngIf=\"currentViewState() === 'uploaded'\"\n        [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n<input\n  #fileInput\n  class=\"ard-file-drop-area-input-element\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\n  <strong class=\"ard-file-drop-area-drop-text\">\n    <span *ngIf=\"!multiple\">Drag & Drop a file</span>\n    <span *ngIf=\"multiple\">Drag & Drop files</span>\n    here\n  </strong>\n  <span class=\"ard-file-drop-area-or-text\">or</span>\n  <ard-button\n    class=\"ard-file-drop-area-browse-button\"\n    appearance=\"transparent\"\n    [compact]=\"compact()\"\n    [variant]=\"variant()\"\n    [color]=\"color()\"\n    (click)=\"browse()\"\n    >Browse files</ard-button\n  >\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\n  <span class=\"ard-file-drop-area-dragover-amount\">\n    {{ amount }}\n    <ng-container [ngPlural]=\"amount\">\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\n      <ng-template ngPluralCase=\"other\">files</ng-template>\n    </ng-container>\n  </span>\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\n  @if (amount > 1 && !multiple()) {\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\n  }\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n  let-files=\"files\"\n>\n  <div class=\"ard-file-drop-area-uploaded-container\">\n    <div class=\"ard-file-drop-area-uploaded-message\">\n      <span class=\"ard-file-drop-area-uploaded-amount\">\n        {{ amount }}\n        <ng-container [ngPlural]=\"amount\">\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\n          <ng-template ngPluralCase=\"other\">files</ng-template>\n        </ng-container>\n      </span>\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\n    </div>\n    <div class=\"ard-file-drop-area-uploaded-files\">\n      @for (file of files; track $index) {\n        <div class=\"ard-file-drop-area-file\">\n          <ard-icon>draft</ard-icon>\n          <div class=\"ard-file-drop-area-file-info\">\n            <span class=\"ard-file-drop-area-filename\">\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\n            </span>\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-file-drop-area-input-element{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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFilesizePipe, name: "filesize" }, { kind: "pipe", type: i4.ArdiumFilenamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileextPipe, name: "fileext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n      }\r\n      @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        ></ng-template>\r\n      }\r\n      @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-drop-area-input-element\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [id]=\"htmlId()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n      <span>Drag & Drop a file</span>\r\n    } @else {\r\n      <span>Drag & Drop files</span>\r\n    }\r\n    here\r\n  </strong>\r\n  <span class=\"ard-file-drop-area-or-text\">or</span>\r\n  <ard-button\r\n    class=\"ard-file-drop-area-browse-button\"\r\n    appearance=\"transparent\"\r\n    [compact]=\"compact()\"\r\n    [variant]=\"variant()\"\r\n    [color]=\"color()\"\r\n    (click)=\"browse()\"\r\n    >Browse files</ard-button\r\n  >\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-drop-area-dragover-text\">Drop </span>\r\n  <span class=\"ard-file-drop-area-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  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n  @if (amount > 1 && !multiple()) {\r\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n  }\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-drop-area-uploaded-container\">\r\n    <div class=\"ard-file-drop-area-uploaded-message\">\r\n      <span class=\"ard-file-drop-area-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-drop-area-uploaded-text\"> uploaded.</span>\r\n    </div>\r\n    <div class=\"ard-file-drop-area-uploaded-files\">\r\n      @for (file of files; track $index) {\r\n        <div class=\"ard-file-drop-area-file\">\r\n          <ard-icon>draft</ard-icon>\r\n          <div class=\"ard-file-drop-area-file-info\">\r\n            <span class=\"ard-file-drop-area-filename\">\r\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\r\n            </span>\r\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{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: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFilesizePipe, name: "filesize" }, { kind: "pipe", type: i4.ArdiumFilenamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileextPipe, name: "fileext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-file-drop-area\"\n  (ardClickOutside)=\"onDragleave()\"\n  (dragleave)=\"onDragleave()\"\n  (dragover)=\"onDragover($event)\"\n  (drop)=\"onDrop($event)\"\n  [ngClass]=\"ngClasses\"\n>\n  <div class=\"ard-file-drop-area-outline\">\n    <div class=\"ard-file-drop-area-content\">\n      @if (currentViewState() === 'idle') {\n        <ng-template\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n          [ngTemplateOutletContext]=\"getIdleContext()\"\n        />\n      }\n      <ng-template\n        *ngIf=\"currentViewState() === 'dragover'\"\n        [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\n      ></ng-template>\n      <ng-template\n        *ngIf=\"currentViewState() === 'uploaded'\"\n        [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n<input\n  #fileInput\n  class=\"ard-file-drop-area-input-element\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\n  <strong class=\"ard-file-drop-area-drop-text\">\n    <span *ngIf=\"!multiple\">Drag & Drop a file</span>\n    <span *ngIf=\"multiple\">Drag & Drop files</span>\n    here\n  </strong>\n  <span class=\"ard-file-drop-area-or-text\">or</span>\n  <ard-button\n    class=\"ard-file-drop-area-browse-button\"\n    appearance=\"transparent\"\n    [compact]=\"compact()\"\n    [variant]=\"variant()\"\n    [color]=\"color()\"\n    (click)=\"browse()\"\n    >Browse files</ard-button\n  >\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\n  <span class=\"ard-file-drop-area-dragover-amount\">\n    {{ amount }}\n    <ng-container [ngPlural]=\"amount\">\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\n      <ng-template ngPluralCase=\"other\">files</ng-template>\n    </ng-container>\n  </span>\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\n  @if (amount > 1 && !multiple()) {\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\n  }\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n  let-files=\"files\"\n>\n  <div class=\"ard-file-drop-area-uploaded-container\">\n    <div class=\"ard-file-drop-area-uploaded-message\">\n      <span class=\"ard-file-drop-area-uploaded-amount\">\n        {{ amount }}\n        <ng-container [ngPlural]=\"amount\">\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\n          <ng-template ngPluralCase=\"other\">files</ng-template>\n        </ng-container>\n      </span>\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\n    </div>\n    <div class=\"ard-file-drop-area-uploaded-files\">\n      @for (file of files; track $index) {\n        <div class=\"ard-file-drop-area-file\">\n          <ard-icon>draft</ard-icon>\n          <div class=\"ard-file-drop-area-file-info\">\n            <span class=\"ard-file-drop-area-filename\">\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\n            </span>\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+            args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n      }\r\n      @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        ></ng-template>\r\n      }\r\n      @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-drop-area-input-element\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [id]=\"htmlId()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n      <span>Drag & Drop a file</span>\r\n    } @else {\r\n      <span>Drag & Drop files</span>\r\n    }\r\n    here\r\n  </strong>\r\n  <span class=\"ard-file-drop-area-or-text\">or</span>\r\n  <ard-button\r\n    class=\"ard-file-drop-area-browse-button\"\r\n    appearance=\"transparent\"\r\n    [compact]=\"compact()\"\r\n    [variant]=\"variant()\"\r\n    [color]=\"color()\"\r\n    (click)=\"browse()\"\r\n    >Browse files</ard-button\r\n  >\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-drop-area-dragover-text\">Drop </span>\r\n  <span class=\"ard-file-drop-area-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  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n  @if (amount > 1 && !multiple()) {\r\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n  }\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-drop-area-uploaded-container\">\r\n    <div class=\"ard-file-drop-area-uploaded-message\">\r\n      <span class=\"ard-file-drop-area-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-drop-area-uploaded-text\"> uploaded.</span>\r\n    </div>\r\n    <div class=\"ard-file-drop-area-uploaded-files\">\r\n      @for (file of files; track $index) {\r\n        <div class=\"ard-file-drop-area-file\">\r\n          <ard-icon>draft</ard-icon>\r\n          <div class=\"ard-file-drop-area-file-info\">\r\n            <span class=\"ard-file-drop-area-filename\">\r\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\r\n            </span>\r\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FILE_DROP_AREA_DEFAULTS]
@@ -5256,7 +5263,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], 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  [prefixTemplate]=\"prefixTemplate\"\r\n  [suffixTemplate]=\"suffixTemplate\"\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 || 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 ?? defaultIdleTemplate\"\r\n            [ngTemplateOutletContext]=\"getIdleContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'dragover') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'uploaded') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"uploadedTemplate ?? 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    }\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  (change)=\"onInputChange()\"\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>\r\n  <div class=\"ard-file-input__uploaded\">\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  </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -5266,7 +5273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                             multi: true,
                         },
-                    ], 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  [prefixTemplate]=\"prefixTemplate\"\r\n  [suffixTemplate]=\"suffixTemplate\"\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 || 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 ?? defaultIdleTemplate\"\r\n            [ngTemplateOutletContext]=\"getIdleContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'dragover') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'uploaded') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"uploadedTemplate ?? 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    }\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  (change)=\"onInputChange()\"\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>\r\n  <div class=\"ard-file-input__uploaded\">\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  </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\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\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]
@@ -5882,11 +5889,11 @@ class DaysViewComponent {
         this.triggerHighlightSameDayPreviousPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DaysViewComponent, selector: "ard-days-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, isDayFilteredOut: { classPropertyName: "isDayFilteredOut", publicName: "isDayFilteredOut", isSignal: true, isRequired: true, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: true, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderTemplate: { classPropertyName: "daysViewHeaderTemplate", publicName: "daysViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTemplate: { classPropertyName: "floatingMonthTemplate", publicName: "floatingMonthTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekdayTemplate: { classPropertyName: "weekdayTemplate", publicName: "weekdayTemplate", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenMonthsView: "triggerOpenMonthsView", triggerSelectDay: "triggerSelectDay", triggerChangeMonth: "triggerChangeMonth", triggerChangeYear: "triggerChangeYear", triggerHighlightDay: "triggerHighlightDay", triggerHighlightNextDay: "triggerHighlightNextDay", triggerHighlightPreviousDay: "triggerHighlightPreviousDay", triggerHighlightFirstDay: "triggerHighlightFirstDay", triggerHighlightLastDay: "triggerHighlightLastDay", triggerHighlightSameDayPreviousPage: "triggerHighlightSameDayPreviousPage", triggerHighlightSameDayNextPage: "triggerHighlightSameDayNextPage", focusEvent: "focus", blurEvent: "blur" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultDaysViewHeaderTemplate\r\n      let-currDate\r\n      let-nextMonth=\"nextMonth\"\r\n      let-prevMonth=\"prevMonth\"\r\n      let-canGoToNextMonth=\"canGoToNextPage\"\r\n      let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openYearsView()\"\r\n        >\r\n          {{ currDate | date : 'MMM YYYY' | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar__arrows\">\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousMonth\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextMonth\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div class=\"ard-calendar__weekday\">{{ date | date : 'EEEEE' }}</div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    ></ng-template>\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        {{ date | date : 'LLL' | uppercase }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\r\n    </div>\r\n    @for (week of activeCalendarData().array; track $index) { @for (day of week; track day ? day :\r\n    activeCalendarData().leadingSpaces - $index) { @if (day === null) {\r\n    <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n    } @else {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n      [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n      [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n      (click)=\"onCalendarDayClick(day.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <div class=\"ard-calendar__entry-button\">\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-day\r\n          >\r\n            {{ day }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n            [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    } } }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DaysViewComponent, selector: "ard-days-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, isDayFilteredOut: { classPropertyName: "isDayFilteredOut", publicName: "isDayFilteredOut", isSignal: true, isRequired: true, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: true, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderTemplate: { classPropertyName: "daysViewHeaderTemplate", publicName: "daysViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTemplate: { classPropertyName: "floatingMonthTemplate", publicName: "floatingMonthTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekdayTemplate: { classPropertyName: "weekdayTemplate", publicName: "weekdayTemplate", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenMonthsView: "triggerOpenMonthsView", triggerSelectDay: "triggerSelectDay", triggerChangeMonth: "triggerChangeMonth", triggerChangeYear: "triggerChangeYear", triggerHighlightDay: "triggerHighlightDay", triggerHighlightNextDay: "triggerHighlightNextDay", triggerHighlightPreviousDay: "triggerHighlightPreviousDay", triggerHighlightFirstDay: "triggerHighlightFirstDay", triggerHighlightLastDay: "triggerHighlightLastDay", triggerHighlightSameDayPreviousPage: "triggerHighlightSameDayPreviousPage", triggerHighlightSameDayNextPage: "triggerHighlightSameDayNextPage", focusEvent: "focus", blurEvent: "blur" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultDaysViewHeaderTemplate\r\n        let-currDate\r\n        let-nextMonth=\"nextMonth\"\r\n        let-prevMonth=\"prevMonth\"\r\n        let-canGoToNextMonth=\"canGoToNextPage\"\r\n        let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n        let-openYearsView=\"openYearsView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openYearsView()\"\r\n          >\r\n            {{ currDate | date: 'MMM YYYY' | uppercase }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar__arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevMonth()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousMonth\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextMonth()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextMonth\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div class=\"ard-calendar__weekday\">{{ date | date: 'EEEEE' }}</div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n        [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n      ></ng-template>\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        {{ date | date: 'LLL' | uppercase }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\r\n    </div>\r\n    @for (week of activeCalendarData().array; track $index) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @if (day === null) {\r\n          <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n        } @else {\r\n          <div\r\n            class=\"ard-calendar__entry\"\r\n            [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n            [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n            [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n            [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n            (click)=\"onCalendarDayClick(day.value)\"\r\n            (mousemove)=\"$event.stopPropagation()\"\r\n            (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n            role=\"gridcell\"\r\n          >\r\n            <div class=\"ard-calendar__entry-button\">\r\n              <div class=\"ard-focus-overlay\"></div>\r\n              <div class=\"ard-button-content\">\r\n                <ng-template\r\n                  #defaultDayTemplate\r\n                  let-day\r\n                >\r\n                  {{ day }}\r\n                </ng-template>\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n                  [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DaysViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-days-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultDaysViewHeaderTemplate\r\n      let-currDate\r\n      let-nextMonth=\"nextMonth\"\r\n      let-prevMonth=\"prevMonth\"\r\n      let-canGoToNextMonth=\"canGoToNextPage\"\r\n      let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openYearsView()\"\r\n        >\r\n          {{ currDate | date : 'MMM YYYY' | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar__arrows\">\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousMonth\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextMonth\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div class=\"ard-calendar__weekday\">{{ date | date : 'EEEEE' }}</div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    ></ng-template>\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        {{ date | date : 'LLL' | uppercase }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\r\n    </div>\r\n    @for (week of activeCalendarData().array; track $index) { @for (day of week; track day ? day :\r\n    activeCalendarData().leadingSpaces - $index) { @if (day === null) {\r\n    <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n    } @else {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n      [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n      [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n      (click)=\"onCalendarDayClick(day.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <div class=\"ard-calendar__entry-button\">\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-day\r\n          >\r\n            {{ day }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n            [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    } } }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'ard-days-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultDaysViewHeaderTemplate\r\n        let-currDate\r\n        let-nextMonth=\"nextMonth\"\r\n        let-prevMonth=\"prevMonth\"\r\n        let-canGoToNextMonth=\"canGoToNextPage\"\r\n        let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n        let-openYearsView=\"openYearsView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openYearsView()\"\r\n          >\r\n            {{ currDate | date: 'MMM YYYY' | uppercase }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar__arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevMonth()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousMonth\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextMonth()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextMonth\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div class=\"ard-calendar__weekday\">{{ date | date: 'EEEEE' }}</div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n        [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n      ></ng-template>\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        {{ date | date: 'LLL' | uppercase }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\r\n    </div>\r\n    @for (week of activeCalendarData().array; track $index) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @if (day === null) {\r\n          <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n        } @else {\r\n          <div\r\n            class=\"ard-calendar__entry\"\r\n            [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n            [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n            [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n            [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n            (click)=\"onCalendarDayClick(day.value)\"\r\n            (mousemove)=\"$event.stopPropagation()\"\r\n            (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n            role=\"gridcell\"\r\n          >\r\n            <div class=\"ard-calendar__entry-button\">\r\n              <div class=\"ard-focus-overlay\"></div>\r\n              <div class=\"ard-button-content\">\r\n                <ng-template\r\n                  #defaultDayTemplate\r\n                  let-day\r\n                >\r\n                  {{ day }}\r\n                </ng-template>\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n                  [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
@@ -6118,11 +6125,11 @@ class MonthsViewComponent {
         return isYearOutOfRange(year, this.min(), this.max());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonthsViewComponent, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultMonthsViewHeaderTemplate\r\n      let-year\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ year }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n      [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n      [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n      (click)=\"onCalendarMonthClick(month.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultMonthTemplate\r\n            let-month\r\n          >\r\n            {{ month | date : 'MMM' | uppercase }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n            [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonthsViewComponent, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultMonthsViewHeaderTemplate\r\n      let-year\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ year }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n      [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n      [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n      (click)=\"onCalendarMonthClick(month.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultMonthTemplate\r\n            let-month\r\n          >\r\n            {{ month | date : 'MMM' | uppercase }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n            [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
@@ -6354,11 +6361,11 @@ class YearsViewComponent {
         this.triggerHighlightSameYearNextPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: YearsViewComponent, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultYearsViewHeaderTemplate\r\n      let-dateRange=\"dateRange\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n          variant=\"pill\"\r\n        >\r\n          {{ dateRange.low | date : 'YYYY' }}\r\n          &mdash;\r\n          {{ dateRange.high | date : 'YYYY' }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n      [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n      [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n      (click)=\"onCalendarYearClick(year.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultYearTemplate\r\n            let-year\r\n          >\r\n            {{ year | date : 'YYYY' }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n            [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: YearsViewComponent, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultYearsViewHeaderTemplate\r\n        let-dateRange=\"dateRange\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            variant=\"pill\"\r\n          >\r\n            {{ dateRange.low | date: 'YYYY' }}\r\n            &mdash;\r\n            {{ dateRange.high | date: 'YYYY' }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n        [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n        [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n        (click)=\"onCalendarYearClick(year.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultYearTemplate\r\n              let-year\r\n            >\r\n              {{ year | date: 'YYYY' }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n              [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YearsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultYearsViewHeaderTemplate\r\n      let-dateRange=\"dateRange\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n          variant=\"pill\"\r\n        >\r\n          {{ dateRange.low | date : 'YYYY' }}\r\n          &mdash;\r\n          {{ dateRange.high | date : 'YYYY' }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n      [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n      [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n      (click)=\"onCalendarYearClick(year.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultYearTemplate\r\n            let-year\r\n          >\r\n            {{ year | date : 'YYYY' }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n            [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultYearsViewHeaderTemplate\r\n        let-dateRange=\"dateRange\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            variant=\"pill\"\r\n          >\r\n            {{ dateRange.low | date: 'YYYY' }}\r\n            &mdash;\r\n            {{ dateRange.high | date: 'YYYY' }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n        [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n        [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n        (click)=\"onCalendarYearClick(year.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultYearTemplate\r\n              let-year\r\n            >\r\n              {{ year | date: 'YYYY' }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n              [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
@@ -6776,7 +6783,7 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumCalendarComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "yearsViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()\"\r\n    [weekdayTemplate]=\"weekdayTemplate()\"\r\n    [dayTemplate]=\"dayTemplate()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()\"\r\n    [monthTemplate]=\"monthTemplate()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()\"\r\n    [yearTemplate]=\"yearTemplate()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "yearsViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @case ('days') {\r\n      <ard-days-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [highlightedDay]=\"highlightedDay()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n        [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()\"\r\n        [floatingMonthTemplate]=\"floatingMonthTemplate()\"\r\n        [weekdayTemplate]=\"weekdayTemplate()\"\r\n        [dayTemplate]=\"dayTemplate()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggerChangeMonth)=\"changeMonth($event)\"\r\n        (triggerChangeYear)=\"changeYear($event)\"\r\n        (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n        (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n        (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n        (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n        (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n        (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n        (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n        (triggerSelectDay)=\"selectDay($event)\"\r\n      />\r\n    }\r\n    @case ('months') {\r\n      <ard-months-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [color]=\"color()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [highlightedMonth]=\"highlightedMonth()\"\r\n        [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()\"\r\n        [monthTemplate]=\"monthTemplate()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggeChangeYear)=\"changeYear($event)\"\r\n        (triggerSelectMonth)=\"selectMonth($event)\"\r\n        (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n        (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n        (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n        (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n        (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n        (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n        (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n      />\r\n    }\r\n    @case ('years') {\r\n      <ard-years-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [highlightedYear]=\"highlightedYear()\"\r\n        [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()\"\r\n        [yearTemplate]=\"yearTemplate()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerSelectYear)=\"selectYear($event)\"\r\n        (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n        (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n        (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n        (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n        (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n        (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n        (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n        (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n      />\r\n    }\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
             type: Component,
@@ -6786,7 +6793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumCalendarComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()\"\r\n    [weekdayTemplate]=\"weekdayTemplate()\"\r\n    [dayTemplate]=\"dayTemplate()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()\"\r\n    [monthTemplate]=\"monthTemplate()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()\"\r\n    [yearTemplate]=\"yearTemplate()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @case ('days') {\r\n      <ard-days-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [highlightedDay]=\"highlightedDay()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n        [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()\"\r\n        [floatingMonthTemplate]=\"floatingMonthTemplate()\"\r\n        [weekdayTemplate]=\"weekdayTemplate()\"\r\n        [dayTemplate]=\"dayTemplate()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggerChangeMonth)=\"changeMonth($event)\"\r\n        (triggerChangeYear)=\"changeYear($event)\"\r\n        (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n        (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n        (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n        (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n        (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n        (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n        (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n        (triggerSelectDay)=\"selectDay($event)\"\r\n      />\r\n    }\r\n    @case ('months') {\r\n      <ard-months-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [color]=\"color()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [highlightedMonth]=\"highlightedMonth()\"\r\n        [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()\"\r\n        [monthTemplate]=\"monthTemplate()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggeChangeYear)=\"changeYear($event)\"\r\n        (triggerSelectMonth)=\"selectMonth($event)\"\r\n        (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n        (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n        (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n        (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n        (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n        (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n        (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n      />\r\n    }\r\n    @case ('years') {\r\n      <ard-years-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [highlightedYear]=\"highlightedYear()\"\r\n        [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()\"\r\n        [yearTemplate]=\"yearTemplate()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerSelectYear)=\"selectYear($event)\"\r\n        (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n        (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n        (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n        (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n        (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n        (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n        (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n        (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n      />\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -7119,7 +7126,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 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 }], 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, 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      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    />\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: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "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"] }], 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 }], 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, 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      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    />\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: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -7133,7 +7140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             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      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    />\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  [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      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    />\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]
@@ -7508,7 +7515,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 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    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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  [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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
@@ -7522,7 +7529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             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    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\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  [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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_HEX_INPUT_DEFAULTS]
@@ -7652,6 +7659,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         this.allowFloat = input(false, { 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, {
             transform: v => {
                 const newValue = coerceNumberProperty(v, 1);
@@ -7710,9 +7718,17 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         this._focusInputIfCantQuickChange();
     }
     _focusInputIfCantQuickChange() {
+        if (this.keepFocusOnQuickChangeButton())
+            return;
         if (!this.canDecrement() || !this.canIncrement())
             this.focus();
     }
+    onQuickChangeButtonMouseup(event) {
+        // prevent the event from reaching the parent element
+        if (this.keepFocusOnQuickChangeButton()) {
+            event.stopPropagation();
+        }
+    }
     canIncrement() {
         const num = this.inputModel.numberValue();
         return !isDefined(num) || num < this.max();
@@ -7783,7 +7799,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumNumberInputComponent, deps: [{ token: ARD_NUMBER_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumNumberInputComponent, selector: "ard-number-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, 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 }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumNumberInputComponent, selector: "ard-number-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, 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 }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOnQuickChangeButton: { classPropertyName: "keepFocusOnQuickChangeButton", publicName: "keepFocusOnQuickChangeButton", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumNumberInputComponent),
@@ -7793,7 +7809,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\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      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .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-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\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: i4.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\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      inputmode=\"numeric\"\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      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .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-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\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: i4.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
@@ -7807,7 +7823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumNumberInputComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\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      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .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-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\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      inputmode=\"numeric\"\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      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .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-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_NUMBER_INPUT_DEFAULTS]
@@ -7936,7 +7952,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-checkbox\"\n  role=\"checkbox\"\n  type=\"button\"\n  [id]=\"htmlId()\"\n  [ariaChecked]=\"selected()\"\n  [tabindex]=\"tabIndex()\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"toggleState()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\n</button>\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -7946,7 +7962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  class=\"ard-checkbox\"\n  role=\"checkbox\"\n  type=\"button\"\n  [id]=\"htmlId()\"\n  [ariaChecked]=\"selected()\"\n  [tabindex]=\"tabIndex()\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"toggleState()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\n</button>\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]
@@ -9056,7 +9072,7 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
                 provide: _FormFieldComponentBase,
                 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\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\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: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
@@ -9070,7 +9086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             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\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\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]
@@ -9668,7 +9684,7 @@ class ArdiumSliderComponent extends _AbstractSlider {
                 useExisting: forwardRef(() => ArdiumSliderComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-slider-container-master\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\n>\n  <div class=\"ard-slider-container\">\n    <div\n      #track\n      class=\"ard-slider-track\"\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\n    >\n      <div class=\"ard-hitbox\"></div>\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\n      <div\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\n        [style]=\"{ width: getHandlePosition(1) }\"\n      ></div>\n      @if (showValueTicks()) {\n        <div class=\"ard-value-tick-container\">\n          @for (tick of _tickArray(); track tick) {\n            <div\n              class=\"ard-value-tick\"\n              [style]=\"{ left: tick }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n    <button\n      #focusableElement\n      type=\"button\"\n      class=\"ard-slider-handle\"\n      [tabindex]=\"tabIndex()\"\n      [class.ard-grabbed]=\"isSliderHandleGrabbed()\"\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\n      (touchstart)=\"onPointerDownOnHandle($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      [style]=\"{ left: getHandlePosition(1) }\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <div class=\"ard-hitbox\"></div>\n    </button>\n    @if (tooltipBehavior() !== 'never') {\n      <div\n        class=\"ard-slider-tooltip-wrapper\"\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\n        [style]=\"{ left: getHandlePosition(1) }\"\n      >\n        <ng-template\n          #defaultTooltipTemplate\n          let-value\n        >\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\n          [ngTemplateOutletContext]=\"getTooltipContext()\"\n        >\n        </ng-template>\n      </div>\n    }\n  </div>\n  @if (labelObjects().length) {\n    <div\n      class=\"ard-slider-label-container\"\n      *ngIf=\"labelObjects.length\"\n    >\n      @for (label of labelObjects(); track $index) {\n        <div\n          class=\"ard-slider-label\"\n          [style]=\"{ left: label.positionPercent }\"\n        >\n          {{ label.label }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\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 }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-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]=\"{ width: getHandlePosition(1) }\"\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()\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n      (touchstart)=\"onPointerDownOnHandle($event)\"\r\n      (focus)=\"onFocus($event)\"\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()\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    @if (labelObjects.length) {\r\n      <div class=\"ard-slider-label-container\">\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  }\r\n</div>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\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: "18.2.13", ngImport: i0, type: ArdiumSliderComponent, decorators: [{
             type: Component,
@@ -9678,7 +9694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumSliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-slider-container-master\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\n>\n  <div class=\"ard-slider-container\">\n    <div\n      #track\n      class=\"ard-slider-track\"\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\n    >\n      <div class=\"ard-hitbox\"></div>\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\n      <div\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\n        [style]=\"{ width: getHandlePosition(1) }\"\n      ></div>\n      @if (showValueTicks()) {\n        <div class=\"ard-value-tick-container\">\n          @for (tick of _tickArray(); track tick) {\n            <div\n              class=\"ard-value-tick\"\n              [style]=\"{ left: tick }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n    <button\n      #focusableElement\n      type=\"button\"\n      class=\"ard-slider-handle\"\n      [tabindex]=\"tabIndex()\"\n      [class.ard-grabbed]=\"isSliderHandleGrabbed()\"\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\n      (touchstart)=\"onPointerDownOnHandle($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      [style]=\"{ left: getHandlePosition(1) }\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <div class=\"ard-hitbox\"></div>\n    </button>\n    @if (tooltipBehavior() !== 'never') {\n      <div\n        class=\"ard-slider-tooltip-wrapper\"\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\n        [style]=\"{ left: getHandlePosition(1) }\"\n      >\n        <ng-template\n          #defaultTooltipTemplate\n          let-value\n        >\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\n          [ngTemplateOutletContext]=\"getTooltipContext()\"\n        >\n        </ng-template>\n      </div>\n    }\n  </div>\n  @if (labelObjects().length) {\n    <div\n      class=\"ard-slider-label-container\"\n      *ngIf=\"labelObjects.length\"\n    >\n      @for (label of labelObjects(); track $index) {\n        <div\n          class=\"ard-slider-label\"\n          [style]=\"{ left: label.positionPercent }\"\n        >\n          {{ label.label }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-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]=\"{ width: getHandlePosition(1) }\"\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()\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n      (touchstart)=\"onPointerDownOnHandle($event)\"\r\n      (focus)=\"onFocus($event)\"\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()\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    @if (labelObjects.length) {\r\n      <div class=\"ard-slider-label-container\">\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  }\r\n</div>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SLIDER_DEFAULTS]
@@ -9704,11 +9720,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const ClickStrategy = {
-    Noop: 'noop',
-    Default: 'default',
-};
-
 const StarFillMode = {
     /**
      * The star is not filled, just an outline.
@@ -9726,15 +9737,48 @@ const StarFillMode = {
 const StarColor = {
     ...SimpleComponentColor,
     /**
-     * THe app's color set for all stars. Usually gold or yellow-gold.
+     * The app's color set for all stars. Usually gold or yellow-gold.
      */
-    Star: 'star',
+    Gold: 'gold',
+};
+
+const _ratingInputDefaults = {
+    ..._ngModelComponentDefaults,
+    color: StarColor.Gold,
+    max: 5,
+};
+const ARD_RATING_INPUT_DEFAULTS = new InjectionToken('ard-rating-input-defaults', {
+    factory: () => ({
+        ..._ratingInputDefaults,
+    }),
+});
+function provideRatingInputDefaults(config) {
+    return { provide: ARD_RATING_INPUT_DEFAULTS, useValue: { ..._ratingInputDefaults, ...config } };
+}
+
+class ArdRatingInputStarButtonTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingInputStarButtonTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdRatingInputStarButtonTemplateDirective, selector: "ard-rating-input > ng-template[ard-star-button-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingInputStarButtonTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-rating-input > ng-template[ard-star-button-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const ClickStrategy = {
+    Noop: 'noop',
+    Default: 'default',
 };
 
 const _starButtonDefaults = {
     ..._booleanComponentDefaults,
     clickStrategy: ClickStrategy.Default,
-    color: StarColor.Star,
+    color: StarColor.Gold,
 };
 const ARD_STAR_BUTTON_DEFAULTS = new InjectionToken('ard-star-button-defaults', {
     factory: () => ({
@@ -9745,8 +9789,22 @@ function provideStarButtonDefaults(config) {
     return { provide: ARD_STAR_BUTTON_DEFAULTS, useValue: { ..._starButtonDefaults, ...config } };
 }
 
+class ArdStarButtonStarTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarButtonStarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdStarButtonStarTemplateDirective, selector: "ard-star-button > ng-template[ard-star-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarButtonStarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-star-button > ng-template[ard-star-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 const _starDefaults = {
-    color: StarColor.Star,
+    color: StarColor.Gold,
     filled: StarFillMode.None,
 };
 const ARD_STAR_DEFAULTS = new InjectionToken('ard-star-defaults', {
@@ -9758,6 +9816,20 @@ function provideStarDefaults(config) {
     return { provide: ARD_STAR_DEFAULTS, useValue: { ..._starDefaults, ...config } };
 }
 
+class ArdStarIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdStarIconTemplateDirective, selector: "ard-star > ng-template[ard-star-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-star > ng-template[ard-star-icon-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 class ArdiumStarComponent {
     constructor() {
         this.wrapperClasses = input('');
@@ -9768,16 +9840,22 @@ class ArdiumStarComponent {
             transform: this._transformFillMode,
         });
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color()}`, `ard-star-fill-${this.filled()}`].join(' '));
+        //! template
+        this.iconTemplate = contentChild(ArdStarIconTemplateDirective);
+        this.iconTemplateContext = computed(() => ({ $implicit: this.filled() }));
     }
     _transformFillMode(value) {
-        return typeof value === 'boolean' ? (value ? StarFillMode.Filled : StarFillMode.None) : value;
+        if (value === StarFillMode.None || value === StarFillMode.Half || value === StarFillMode.Filled) {
+            return value;
+        }
+        return coerceBooleanProperty(value) ? StarFillMode.Filled : StarFillMode.None;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-star-icon ard-star-selected\"></div>\n  <div class=\"ard-star-icon ard-star-half\"></div>\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\n</div>\n", styles: [""], 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: "18.2.13", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ArdStarIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <ng-template\n    #defaultIconTemplate\n    let-fillMode\n  >\n    @if (fillMode === 'filled') {\n      <ard-icon filled>star</ard-icon>\n    } @else if (fillMode === 'half') {\n      <ard-icon>star-half</ard-icon>\n    } @else {\n      <ard-icon>star</ard-icon>\n    }\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\n  />\n</div>\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: 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: "18.2.13", ngImport: i0, type: ArdiumStarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-star-icon ard-star-selected\"></div>\n  <div class=\"ard-star-icon ard-star-half\"></div>\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\n</div>\n" }]
+            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <ng-template\n    #defaultIconTemplate\n    let-fillMode\n  >\n    @if (fillMode === 'filled') {\n      <ard-icon filled>star</ard-icon>\n    } @else if (fillMode === 'half') {\n      <ard-icon>star-half</ard-icon>\n    } @else {\n      <ard-icon>star</ard-icon>\n    }\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\n  />\n</div>\n" }]
         }] });
 
 class ArdiumStarButtonComponent extends _BooleanComponentBase {
@@ -9789,6 +9867,13 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color}`].join(' '));
         this.starFillState = computed(() => (this.selected() ? StarFillMode.Filled : StarFillMode.None));
+        //! template
+        this.starTemplate = contentChild(ArdStarButtonStarTemplateDirective);
+        this.starTemplateContext = computed(() => ({
+            $implicit: this.starFillState(),
+            fillMode: this.starFillState(),
+            color: this.color(),
+        }));
     }
     onClick() {
         if (this.clickStrategy() === ClickStrategy.Noop)
@@ -9796,13 +9881,13 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
         this.toggleSelected();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonComponent, deps: [{ token: ARD_STAR_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, clickStrategy: { classPropertyName: "clickStrategy", publicName: "clickStrategy", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, clickStrategy: { classPropertyName: "clickStrategy", publicName: "clickStrategy", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-star\n    [filled]=\"starFillState()\"\n    [color]=\"color()\"\n  ></ard-star>\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "starTemplate", first: true, predicate: ArdStarButtonStarTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n\n  <ng-template\n    #defaultStarTemplate\n    let-fillMode=\"fillMode\"\n    let-color=\"color\"\n  >\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color\"\n    />\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\n  />\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\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: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
             type: Component,
@@ -9812,55 +9897,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-star\n    [filled]=\"starFillState()\"\n    [color]=\"color()\"\n  ></ard-star>\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
+                    ], template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n\n  <ng-template\n    #defaultStarTemplate\n    let-fillMode=\"fillMode\"\n    let-color=\"color\"\n  >\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color\"\n    />\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\n  />\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_STAR_BUTTON_DEFAULTS]
                 }] }] });
 
-class ArdiumStarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, declarations: [ArdiumStarComponent], imports: [CommonModule], exports: [ArdiumStarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ArdiumStarComponent],
-                    imports: [CommonModule],
-                    exports: [ArdiumStarComponent],
-                }]
-        }] });
-
-class ArdiumStarButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, declarations: [ArdiumStarButtonComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, imports: [CommonModule, ArdiumStarModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ArdiumStarButtonComponent],
-                    imports: [CommonModule, ArdiumStarModule],
-                    exports: [ArdiumStarButtonComponent],
-                }]
-        }] });
-
-const _starInputDefaults = {
-    ..._ngModelComponentDefaults,
-    color: StarColor.Star,
-    max: 5,
-};
-const ARD_STAR_INPUT_DEFAULTS = new InjectionToken('ard-star-input-defaults', {
-    factory: () => ({
-        ..._starInputDefaults,
-    }),
-});
-function provideStarInputDefaults(config) {
-    return { provide: ARD_STAR_INPUT_DEFAULTS, useValue: { ..._starInputDefaults, ...config } };
-}
-
-class ArdiumStarInputComponent extends _NgModelComponentBase {
+class ArdiumRatingInputComponent extends _NgModelComponentBase {
     constructor(defaults) {
         super(defaults);
         this.wrapperClasses = input('');
@@ -9868,35 +9911,38 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color()}`].join(' '));
         //! events
-        this.changeEvent = output({ alias: 'change' });
         this.highlightEvent = output({ alias: 'highlight' });
-        this.value = model(0);
+        this.value = model(null);
         //! stars
         this.max = input(this._DEFAULTS.max, { transform: v => coerceNumberProperty(v, this._DEFAULTS.max) });
         this.starButtonInstances = viewChildren('starButton');
         this._highlightedStarIndex = signal(null);
-        this.starArray = computed(() => {
-            const v = this.value();
-            const max = this.max();
-            const hi = Math.round(this._highlightedStarIndex() ?? -1);
-            const arr = new Array(max);
-            for (let i = 0; i < max; i++) {
-                if (i <= hi) {
-                    arr[i] = { filled: true, isInValue: true };
-                    continue;
-                }
-                if (i < v) {
-                    arr[i] = { filled: hi === -1, isInValue: true };
-                    continue;
-                }
-                arr[i] = { filled: false, isInValue: false };
-            }
-            return arr;
-        });
+        this.starArray = computed(() => new Array(this.max()).fill(0).map((_, i) => i));
         //* focus handlers
         this._isFocusEventSuppressed = false;
         this._isBlurEventSuppressed = false;
         this._currentFocusIndex = null;
+        //! template
+        this.starButtonTemplate = contentChild(ArdRatingInputStarButtonTemplateDirective);
+        this.getStarButtonTemplateContext = computed(() => index => ({
+            color: this.color(),
+            index,
+            highlightedIndex: this._highlightedStarIndex() ?? -1,
+            valueIndex: (this.value() ?? 0) - 1,
+            tabIndex: this.tabIndex(),
+            onClick: () => {
+                this.onStarClick(index);
+            },
+            onFocus: (event) => {
+                this.onStarButtonFocus(event, index);
+            },
+            onBlur: (event) => {
+                this.onStarButtonBlur(event);
+            },
+            onHighlight: () => {
+                this.onStarHighlight(index);
+            },
+        }));
         effect(() => {
             const hi = this._highlightedStarIndex();
             if (hi !== null) {
@@ -9923,9 +9969,8 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
     }
     _emitChange() {
         this._onChangeRegistered?.(this.value());
-        this.changeEvent.emit(this.value());
     }
-    onStarButtonFocus(index, event) {
+    onStarButtonFocus(event, index) {
         this._currentFocusIndex = index;
         if (this._isFocusEventSuppressed) {
             this._isFocusEventSuppressed = false;
@@ -10014,43 +10059,71 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
     _onTabPress() {
         this.focusStarButtonByIndex(this.max() - 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputComponent, deps: [{ token: ARD_STAR_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarInputComponent, selector: "ard-star-input", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEvent: "change", highlightEvent: "highlight", value: "valueChange" }, host: { listeners: { "keydown": "onKeyPress($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputComponent, deps: [{ token: ARD_RATING_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumRatingInputComponent, selector: "ard-rating-input", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlightEvent: "highlight", value: "valueChange" }, host: { listeners: { "keydown": "onKeyPress($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ArdiumStarInputComponent),
+                useExisting: forwardRef(() => ArdiumRatingInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-star-input\"\n  [ngClass]=\"ngClasses()\"\n  (mouseleave)=\"setDisplayToValue()\"\n>\n  @for (object of starArray(); track $index) {\n    <ard-star-button\n      #starButton\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\n      [color]=\"object.isInValue ? color() : 'none'\"\n      clickStrategy=\"noop\"\n      [selected]=\"object.filled\"\n      (click)=\"onStarClick($index)\"\n      (focus)=\"onStarButtonFocus($index, $event)\"\n      (blur)=\"onStarButtonBlur($event)\"\n      (mouseenter)=\"onStarHighlight($index)\"\n      [tabIndex]=\"tabIndex()\"\n    />\n  }\n</div>\n", styles: [".ard-star-input{width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "starButtonTemplate", first: true, predicate: ArdRatingInputStarButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-rating-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n  <ng-template\r\n    #defaultStarButtonTemplate\r\n    let-color=\"color\"\r\n    let-index=\"index\"\r\n    let-highlightedIndex=\"highlightedIndex\"\r\n    let-valueIndex=\"valueIndex\"\r\n    let-tabIndex=\"tabIndex\"\r\n    let-onClick=\"onClick\"\r\n    let-onFocus=\"onFocus\"\r\n    let-onBlur=\"onBlur\"\r\n    let-onHighlight=\"onHighlight\"\r\n  >\r\n    <ard-star-button\r\n      #starButton\r\n      [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n      [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n      clickStrategy=\"noop\"\r\n      [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n      (click)=\"onClick()\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (mouseenter)=\"onHighlight()\"\r\n      [tabIndex]=\"tabIndex\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (index of starArray(); track index) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n    />\r\n    <input\r\n      type=\"radio\"\r\n      class=\"ard-rating-input__radio\"\r\n      value=\"index\"\r\n      [id]=\"htmlId() + index\"\r\n      tabindex=\"-1\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".ard-rating-input{width:max-content}.ard-rating-input__radio{appearance:none;opacity:0;position:absolute;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: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ard-rating-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ArdiumStarInputComponent),
+                            useExisting: forwardRef(() => ArdiumRatingInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-star-input\"\n  [ngClass]=\"ngClasses()\"\n  (mouseleave)=\"setDisplayToValue()\"\n>\n  @for (object of starArray(); track $index) {\n    <ard-star-button\n      #starButton\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\n      [color]=\"object.isInValue ? color() : 'none'\"\n      clickStrategy=\"noop\"\n      [selected]=\"object.filled\"\n      (click)=\"onStarClick($index)\"\n      (focus)=\"onStarButtonFocus($index, $event)\"\n      (blur)=\"onStarButtonBlur($event)\"\n      (mouseenter)=\"onStarHighlight($index)\"\n      [tabIndex]=\"tabIndex()\"\n    />\n  }\n</div>\n", styles: [".ard-star-input{width:max-content}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-rating-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n  <ng-template\r\n    #defaultStarButtonTemplate\r\n    let-color=\"color\"\r\n    let-index=\"index\"\r\n    let-highlightedIndex=\"highlightedIndex\"\r\n    let-valueIndex=\"valueIndex\"\r\n    let-tabIndex=\"tabIndex\"\r\n    let-onClick=\"onClick\"\r\n    let-onFocus=\"onFocus\"\r\n    let-onBlur=\"onBlur\"\r\n    let-onHighlight=\"onHighlight\"\r\n  >\r\n    <ard-star-button\r\n      #starButton\r\n      [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n      [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n      clickStrategy=\"noop\"\r\n      [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n      (click)=\"onClick()\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (mouseenter)=\"onHighlight()\"\r\n      [tabIndex]=\"tabIndex\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (index of starArray(); track index) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n    />\r\n    <input\r\n      type=\"radio\"\r\n      class=\"ard-rating-input__radio\"\r\n      value=\"index\"\r\n      [id]=\"htmlId() + index\"\r\n      tabindex=\"-1\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".ard-rating-input{width:max-content}.ard-rating-input__radio{appearance:none;opacity:0;position:absolute;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: [ARD_STAR_INPUT_DEFAULTS]
+                    args: [ARD_RATING_INPUT_DEFAULTS]
                 }] }], propDecorators: { onKeyPress: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
 
-class ArdiumStarInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, declarations: [ArdiumStarInputComponent], imports: [CommonModule, ArdiumStarButtonModule], exports: [ArdiumStarInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, imports: [CommonModule, ArdiumStarButtonModule] }); }
+class ArdiumStarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, declarations: [ArdiumStarComponent, ArdStarIconTemplateDirective], imports: [CommonModule, ArdiumIconModule], exports: [ArdiumStarComponent, ArdStarIconTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, imports: [CommonModule, ArdiumIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumStarInputComponent],
+                    declarations: [ArdiumStarComponent, ArdStarIconTemplateDirective],
+                    imports: [CommonModule, ArdiumIconModule],
+                    exports: [ArdiumStarComponent, ArdStarIconTemplateDirective],
+                }]
+        }] });
+
+class ArdiumStarButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, declarations: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, imports: [CommonModule, ArdiumStarModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective],
+                    imports: [CommonModule, ArdiumStarModule],
+                    exports: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective],
+                }]
+        }] });
+
+class ArdiumRatingInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, declarations: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective], imports: [CommonModule, ArdiumStarButtonModule], exports: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, imports: [CommonModule, ArdiumStarButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective],
                     imports: [CommonModule, ArdiumStarButtonModule],
-                    exports: [ArdiumStarInputComponent],
+                    exports: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective],
                 }]
         }] });
 
@@ -10306,11 +10379,11 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.selectItem(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, deps: [{ token: ARD_CHECKBOX_LIST_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, 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" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-checkbox-list\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (item of items; track item.index) {\n    <div\n      class=\"ard-checkbox-list__item\"\n      [class.ard-item-highlighted]=\"item.highlighted()\"\n      [class.ard-item-disabled]=\"item.disabled()\"\n      (mouseover)=\"onItemHighlight(item)\"\n      (mouseleave)=\"onItemBlur()\"\n      (click)=\"toggleItem(item)\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <ard-checkbox\n        [selected]=\"item.selected()\"\n        [disabled]=\"item.disabled()\"\n        [color]=\"color()\"\n        [htmlId]=\"htmlId() + item.index\"\n        [tabIndex]=\"tabIndex()\"\n        (focus)=\"onFocus($event)\"\n        (focus)=\"onItemFocus(item)\"\n        (blur)=\"onBlur($event)\"\n        (blur)=\"onItemBlur()\"\n        (select)=\"selectItem(item)\"\n        (unselect)=\"unselectItem(item)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <label [for]=\"htmlId() + item.index\">\n        {{ item.label() }}\n      </label>\n    </div>\n  }\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, 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" } }, 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      <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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-checkbox-list\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (item of items; track item.index) {\n    <div\n      class=\"ard-checkbox-list__item\"\n      [class.ard-item-highlighted]=\"item.highlighted()\"\n      [class.ard-item-disabled]=\"item.disabled()\"\n      (mouseover)=\"onItemHighlight(item)\"\n      (mouseleave)=\"onItemBlur()\"\n      (click)=\"toggleItem(item)\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <ard-checkbox\n        [selected]=\"item.selected()\"\n        [disabled]=\"item.disabled()\"\n        [color]=\"color()\"\n        [htmlId]=\"htmlId() + item.index\"\n        [tabIndex]=\"tabIndex()\"\n        (focus)=\"onFocus($event)\"\n        (focus)=\"onItemFocus(item)\"\n        (blur)=\"onBlur($event)\"\n        (blur)=\"onItemBlur()\"\n        (select)=\"selectItem(item)\"\n        (unselect)=\"unselectItem(item)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <label [for]=\"htmlId() + item.index\">\n        {{ item.label() }}\n      </label>\n    </div>\n  }\n</div>\n" }]
+            args: [{ 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      <label [for]=\"htmlId() + item.index\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_LIST_DEFAULTS]
@@ -10891,11 +10964,11 @@ class ArdiumFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, 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, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\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: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, 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, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\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: [{ 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]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\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"] }]
         }] });
 
 class ArdiumHintComponent {
@@ -10928,11 +11001,11 @@ class ArdiumHorizontalFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, 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, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\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: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, 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, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\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: [{ 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]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\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"] }]
         }] });
 
 class ArdiumFormFieldModule {
@@ -11116,24 +11189,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const _starDisplayDefaults = {
-    color: StarColor.Star,
+const _ratingDisplayDefaults = {
+    color: StarColor.Gold,
     max: 5,
     value: 0,
 };
-const ARD_STAR_DISPLAY_DEFAULTS = new InjectionToken('ard-star-display-defaults', {
+const ARD_RATING_DISPLAY_DEFAULTS = new InjectionToken('ard-rating-display-defaults', {
     factory: () => ({
-        ..._starDisplayDefaults,
+        ..._ratingDisplayDefaults,
     }),
 });
-function provideStarDisplayDefaults(config) {
-    return { provide: ARD_STAR_DISPLAY_DEFAULTS, useValue: { ..._starDisplayDefaults, ...config } };
+function provideRatingDisplayDefaults(config) {
+    return { provide: ARD_RATING_DISPLAY_DEFAULTS, useValue: { ..._ratingDisplayDefaults, ...config } };
 }
 
-class ArdiumStarDisplayComponent {
+class ArdRatingDisplayStarTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingDisplayStarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdRatingDisplayStarTemplateDirective, selector: "ard-rating-display > ng-template[ard-star-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingDisplayStarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-rating-display > ng-template[ard-star-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class ArdiumRatingDisplayComponent {
     constructor() {
         this.wrapperClasses = input('');
-        this._DEFAULTS = inject(ARD_STAR_DISPLAY_DEFAULTS);
+        this._DEFAULTS = inject(ARD_RATING_DISPLAY_DEFAULTS);
         //! appearance
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color}`].join(' '));
@@ -11174,26 +11261,35 @@ class ArdiumStarDisplayComponent {
             }
             return newArr;
         });
+        //! template
+        this.starTemplate = contentChild(ArdRatingDisplayStarTemplateDirective);
+        this.getStarTemplateContext = computed(() => (fillMode, index) => ({
+            $implicit: fillMode,
+            fillMode,
+            index,
+            valueIndex: isNumber(this.value()) ? this.value() - 1 : -1,
+            color: this.color(),
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarDisplayComponent, selector: "ard-star-display", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ard-star-display\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (fillMode of starArray(); track $index) {\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color()\"\n    />\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumRatingDisplayComponent, selector: "ard-rating-display", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "starTemplate", first: true, predicate: ArdRatingDisplayStarTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-rating-display\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultStarTemplate\r\n    let-fillMode=\"fillMode\"\r\n    let-color=\"color\"\r\n  >\r\n    <ard-star\r\n      [filled]=\"fillMode\"\r\n      [color]=\"color\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (fillMode of starArray(); track $index) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n      [ngTemplateOutletContext]=\"getStarTemplateContext()(fillMode, $index)\"\r\n    />\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: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star-display\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (fillMode of starArray(); track $index) {\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color()\"\n    />\n  }\n</div>\n" }]
+            args: [{ selector: 'ard-rating-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-rating-display\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultStarTemplate\r\n    let-fillMode=\"fillMode\"\r\n    let-color=\"color\"\r\n  >\r\n    <ard-star\r\n      [filled]=\"fillMode\"\r\n      [color]=\"color\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (fillMode of starArray(); track $index) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n      [ngTemplateOutletContext]=\"getStarTemplateContext()(fillMode, $index)\"\r\n    />\r\n  }\r\n</div>\r\n" }]
         }] });
 
-class ArdiumStarDisplayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, declarations: [ArdiumStarDisplayComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, imports: [CommonModule, ArdiumStarModule] }); }
+class ArdiumRatingDisplayModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, declarations: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, imports: [CommonModule, ArdiumStarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumStarDisplayComponent],
+                    declarations: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective],
                     imports: [CommonModule, ArdiumStarModule],
-                    exports: [ArdiumStarDisplayComponent],
+                    exports: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective],
                 }]
         }] });
 
@@ -12689,11 +12785,11 @@ class ArdiumTextListComponent {
         this.filter = input(false, { transform: v => coerceBooleanProperty(v) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTextListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumTextListComponent, selector: "ard-text-list", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "{{ values() | ardTextList : separator() : filter() }}\r\n", styles: [""], dependencies: [{ kind: "pipe", type: ArdiumTextListPipe, name: "ardTextList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumTextListComponent, selector: "ard-text-list", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "{{ values() | ardTextList: separator() : filter() }}\r\n", styles: [""], dependencies: [{ kind: "pipe", type: ArdiumTextListPipe, name: "ardTextList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTextListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-text-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ values() | ardTextList : separator() : filter() }}\r\n" }]
+            args: [{ selector: 'ard-text-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ values() | ardTextList: separator() : filter() }}\r\n" }]
         }] });
 
 class ArdiumTextListModule {
@@ -13182,6 +13278,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{ selector: 'ard-dialog > ng-template[ard-buttons-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDialogCloseIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDialogCloseIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDialogCloseIconTemplateDirective, selector: "ard-dialog > ng-template[ard-close-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDialogCloseIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-dialog > ng-template[ard-close-icon-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class ArdModalCloseIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdModalCloseIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdModalCloseIconTemplateDirective, selector: "ard-modal > ng-template[ard-close-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdModalCloseIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-modal > ng-template[ard-close-icon-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class ArdiumModalComponent {
     constructor() {
@@ -13202,12 +13321,16 @@ class ArdiumModalComponent {
         this.disableBackdropClose = input(this._DEFAULTS.disableBackdropClose, {
             transform: v => coerceBooleanProperty(v),
         });
+        this.allActionsDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
         //! open state handling
         this.open = signal(false);
         this.openChange = output();
         this.closeEvent = output({ alias: 'close' });
         //! overlay handling
         this.modalTemplate = viewChild('modalTemplate', { read: TemplateRef });
+        //! templates
+        this.closeIconTemplate = contentChild(ArdModalCloseIconTemplateDirective);
+        this._closeIconTemplate = input(undefined);
     }
     set _open(v) {
         this.open.set(coerceBooleanProperty(v));
@@ -13216,6 +13339,12 @@ class ArdiumModalComponent {
         else
             this._destroyOverlay();
     }
+    openProgrammatically() {
+        this.open.set(true);
+    }
+    closeProgrammatically() {
+        this.open.set(false);
+    }
     _openOverlay() {
         const strategy = this.overlay.position().global();
         const config = new OverlayConfig({
@@ -13237,19 +13366,21 @@ class ArdiumModalComponent {
     }
     //! events
     onBackdropClick() {
-        if (this.disableBackdropClose())
+        if (this.disableBackdropClose() || this.allActionsDisabled())
             return;
         this._destroyOverlay();
     }
     onCloseButtonClick() {
+        if (this.allActionsDisabled())
+            return;
         this._destroyOverlay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumModalComponent, selector: "ard-modal", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\n  @if (noBackdrop()) {\n    <div\n      class=\"ard-modal\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  } @else {\n    <div\n      class=\"ard-modal ard-modal-backdrop\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  }\n</ng-template>\n\n<ng-template #_modalInsidePanel>\n  <div\n    class=\"ard-modal-panel\"\n    cdkTrapFocus\n    [class.ard-modal-no-heading-text]=\"!heading()\"\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"ard-modal-heading\">\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\n      @if (!noCloseButton()) {\n        <ard-icon-button\n          class=\"ard-modal-close-button\"\n          color=\"none\"\n          [compact]=\"compact()\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          <ard-icon>close</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n    <div class=\"ard-modal-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-modal-content{width:100%}\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: 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: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumModalComponent, selector: "ard-modal", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, _closeIconTemplate: { classPropertyName: "_closeIconTemplate", publicName: "_closeIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, queries: [{ propertyName: "closeIconTemplate", first: true, predicate: ArdModalCloseIconTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n    <div\r\n      class=\"ard-modal\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"ard-modal ard-modal-backdrop\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading()\"\r\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() || (noCloseButton() ? '' : '&nbsp;') }}</div>\r\n      @if (!noCloseButton()) {\r\n        <ard-icon-button\r\n          class=\"ard-modal-close-button\"\r\n          color=\"none\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"allActionsDisabled()\"\r\n          (click)=\"onCloseButtonClick()\"\r\n        >\r\n          <ng-template #defaultCloseIconTemplate>\r\n            <ard-icon>close</ard-icon>\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"closeIconTemplate()?.template ?? _closeIconTemplate()?.template ?? defaultCloseIconTemplate\"\r\n          />\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\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: 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: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\n  @if (noBackdrop()) {\n    <div\n      class=\"ard-modal\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  } @else {\n    <div\n      class=\"ard-modal ard-modal-backdrop\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  }\n</ng-template>\n\n<ng-template #_modalInsidePanel>\n  <div\n    class=\"ard-modal-panel\"\n    cdkTrapFocus\n    [class.ard-modal-no-heading-text]=\"!heading()\"\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"ard-modal-heading\">\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\n      @if (!noCloseButton()) {\n        <ard-icon-button\n          class=\"ard-modal-close-button\"\n          color=\"none\"\n          [compact]=\"compact()\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          <ard-icon>close</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n    <div class=\"ard-modal-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-modal-content{width:100%}\n"] }]
+            args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n    <div\r\n      class=\"ard-modal\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"ard-modal ard-modal-backdrop\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading()\"\r\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() || (noCloseButton() ? '' : '&nbsp;') }}</div>\r\n      @if (!noCloseButton()) {\r\n        <ard-icon-button\r\n          class=\"ard-modal-close-button\"\r\n          color=\"none\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"allActionsDisabled()\"\r\n          (click)=\"onCloseButtonClick()\"\r\n        >\r\n          <ng-template #defaultCloseIconTemplate>\r\n            <ard-icon>close</ard-icon>\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"closeIconTemplate()?.template ?? _closeIconTemplate()?.template ?? defaultCloseIconTemplate\"\r\n          />\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"] }]
         }], propDecorators: { _open: [{
                 type: Input,
                 args: [{ alias: 'open' }]
@@ -13274,6 +13405,7 @@ class ArdiumDialogComponent {
             transform: v => coerceBooleanProperty(v),
         });
         this.buttonActionType = input(this._DEFAULTS.buttonActionType);
+        this.allActionsDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
         //! open state handling
         //all handled by modal component
         this.open = model(false);
@@ -13291,6 +13423,7 @@ class ArdiumDialogComponent {
         this.canConfirm = input(this._DEFAULTS.canConfirm, { transform: v => coerceBooleanProperty(v) });
         //! templates
         this.buttonsTemplate = contentChild(ArdDialogButtonsTemplateDirective);
+        this.closeIconTemplate = contentChild(ArdDialogCloseIconTemplateDirective);
         this.getButtonsContext = computed(() => {
             return {
                 confirmButton: {
@@ -13305,6 +13438,7 @@ class ArdiumDialogComponent {
                     appearance: this.rejectButtonAppearance(),
                 },
                 canConfirm: this.canConfirm(),
+                allActionsDisabled: this.allActionsDisabled(),
                 onConfirm: () => this.onConfirmClick(),
                 onReject: () => this.onRejectClick(),
                 dialogAppearance: this.appearance(),
@@ -13313,62 +13447,70 @@ class ArdiumDialogComponent {
             };
         });
     }
+    openProgrammatically() {
+        this.open.set(true);
+    }
+    closeProgrammatically() {
+        this.open.set(false);
+    }
     onConfirmClick() {
-        if (!this.canConfirm())
+        if (!this.canConfirm() || this.allActionsDisabled())
             return;
         if (this.buttonActionType() === ArdDialogActionType.AutoClose) {
             this.open.set(false);
         }
         setTimeout(() => {
-            this.closeEvent.emit('confirm');
             this.confirmEvent.emit();
+            this.closeEvent.emit('confirm');
         }, 0);
     }
     onRejectClick() {
+        if (this.allActionsDisabled())
+            return;
         if (this.buttonActionType() === ArdDialogActionType.AutoClose) {
             this.open.set(false);
         }
         setTimeout(() => {
-            this.closeEvent.emit('reject');
             this.rejectEvent.emit();
+            this.closeEvent.emit('reject');
         }, 0);
     }
     onModalClose() {
         this.closeEvent.emit('close');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</ard-modal>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "open"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ArdDialogCloseIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [allActionsDisabled]=\"allActionsDisabled()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n  [_closeIconTemplate]=\"closeIconTemplate()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-allActionsDisabled=\"allActionsDisabled\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              [disabled]=\"allActionsDisabled\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm || allActionsDisabled\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      />\n    </div>\n  </div>\n</ard-modal>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "allActionsDisabled", "open", "_closeIconTemplate"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</ard-modal>\n" }]
+            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [allActionsDisabled]=\"allActionsDisabled()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n  [_closeIconTemplate]=\"closeIconTemplate()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-allActionsDisabled=\"allActionsDisabled\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              [disabled]=\"allActionsDisabled\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm || allActionsDisabled\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      />\n    </div>\n  </div>\n</ard-modal>\n" }]
         }] });
 
 class ArdiumModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, declarations: [ArdiumModalComponent], imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule], exports: [ArdiumModalComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, declarations: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective], imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule], exports: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumModalComponent],
+                    declarations: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective],
                     imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule],
-                    exports: [ArdiumModalComponent],
+                    exports: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective],
                 }]
         }] });
 
 class ArdiumDialogModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective], imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule], exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective], imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule], exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective],
+                    declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective],
                     imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule],
-                    exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective],
+                    exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective],
                 }]
         }] });
 
@@ -13787,5 +13929,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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_COLOR_DISPLAY_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_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_STAR_DISPLAY_DEFAULTS, ARD_STAR_INPUT_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, 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, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, 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, ColorDisplayAppearance, 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, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStarDisplayDefaults, provideStarInputDefaults, 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_COLOR_DISPLAY_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, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, 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, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, 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, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, 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, ColorDisplayAppearance, 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, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map