@ardium-ui/ui 5.0.0-alpha.71 → 5.0.0-alpha.73

package/fesm2022/ardium-ui-ui.mjs

@@ -223,6 +223,7 @@ const DecorationElementAppearance = {
     Outlined: 'outlined',
     OutlinedStrong: 'outlined-strong',
     Filled: 'filled',
+    FilledStrong: 'filled-strong',
 };
 //! variants
 const PanelVariant = {
@@ -1125,11 +1126,11 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
         this.isFocused.set(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldFrameComponent, deps: [{ token: ARD_FORM_FIELD_FRAME_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldFrameComponent, isStandalone: false, selector: "ard-form-field-frame", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, _setIsFocused: { classPropertyName: "_setIsFocused", publicName: "isFocused", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, prefixTemplateInput: { classPropertyName: "prefixTemplateInput", publicName: "prefixTemplate", isSignal: true, isRequired: false, transformFunction: null }, suffixTemplateInput: { classPropertyName: "suffixTemplateInput", publicName: "suffixTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field-frame\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-form-field-overlay\"></div>\r\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\r\n    <div class=\"ard-form-field-prefix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n  <div class=\"ard-form-field-content-container\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\r\n    <div class=\"ard-form-field-suffix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldFrameComponent, isStandalone: false, selector: "ard-form-field-frame", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, _setIsFocused: { classPropertyName: "_setIsFocused", publicName: "isFocused", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, prefixTemplateInput: { classPropertyName: "prefixTemplateInput", publicName: "prefixTemplate", isSignal: true, isRequired: false, transformFunction: null }, suffixTemplateInput: { classPropertyName: "suffixTemplateInput", publicName: "suffixTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field-frame\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-form-field-overlay\"></div>\r\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\r\n    <div class=\"ard-form-field-prefix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n  <div class=\"ard-form-field-content-container\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\r\n    <div class=\"ard-form-field-suffix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["ard-form-field-frame{display:block}.ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldFrameComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-form-field-frame', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field-frame\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-form-field-overlay\"></div>\r\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\r\n    <div class=\"ard-form-field-prefix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n  <div class=\"ard-form-field-content-container\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\r\n    <div class=\"ard-form-field-suffix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"] }]
+            args: [{ standalone: false, selector: 'ard-form-field-frame', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field-frame\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-form-field-overlay\"></div>\r\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\r\n    <div class=\"ard-form-field-prefix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n  <div class=\"ard-form-field-content-container\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\r\n    <div class=\"ard-form-field-suffix-container\">\r\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["ard-form-field-frame{display:block}.ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FORM_FIELD_FRAME_DEFAULTS]
@@ -1263,13 +1264,13 @@ class ArdiumDropdownPanelComponent {
         return new DOMRect(elRect.x + leftPadd, elRect.y + topPadd, elRect.width - leftPadd - rightPadd, elRect.height - topPadd - bottomPadd);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDropdownPanelComponent, isStandalone: false, selector: "ard-dropdown-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, host: { properties: { "class.ard-open": "isOpen()" } }, viewQueries: [{ propertyName: "_scrollElementRef", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-dropdown-panel-container\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (headerTemplate()) {\r\n    <div class=\"ard-dropdown-header\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"headerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n  <div\r\n    #scroll\r\n    class=\"ard-dropdown-panel-content\"\r\n    [attr.id]=\"panelId()\"\r\n    (scroll)=\"onScroll()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (footerTemplate()) {\r\n    <div class=\"ard-dropdown-footer\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"footerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDropdownPanelComponent, isStandalone: false, selector: "ard-dropdown-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, host: { properties: { "class.ard-open": "isOpen()" } }, viewQueries: [{ propertyName: "_scrollElementRef", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-dropdown-panel-container\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (headerTemplate()) {\r\n    <div class=\"ard-dropdown-header\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"headerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n  <div\r\n    #scroll\r\n    class=\"ard-dropdown-panel-content\"\r\n    [attr.id]=\"panelId()\"\r\n    (scroll)=\"onScroll()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (footerTemplate()) {\r\n    <div class=\"ard-dropdown-footer\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"footerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["ard-dropdown-panel{display:block}.ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-dropdown-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-open]': 'isOpen()',
-                    }, template: "<div\r\n  class=\"ard-dropdown-panel-container\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (headerTemplate()) {\r\n    <div class=\"ard-dropdown-header\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"headerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n  <div\r\n    #scroll\r\n    class=\"ard-dropdown-panel-content\"\r\n    [attr.id]=\"panelId()\"\r\n    (scroll)=\"onScroll()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (footerTemplate()) {\r\n    <div class=\"ard-dropdown-footer\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"footerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"] }]
+                    }, template: "<div\r\n  class=\"ard-dropdown-panel-container\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (headerTemplate()) {\r\n    <div class=\"ard-dropdown-header\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"headerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n  <div\r\n    #scroll\r\n    class=\"ard-dropdown-panel-content\"\r\n    [attr.id]=\"panelId()\"\r\n    (scroll)=\"onScroll()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (footerTemplate()) {\r\n    <div class=\"ard-dropdown-footer\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"footerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["ard-dropdown-panel{display:block}.ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"] }]
         }] });
 
 class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
@@ -1502,7 +1503,7 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumAutocompleteInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdAutocompleteInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdAutocompleteInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdAutocompleteInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdAutocompleteInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdAutocompleteInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected\"\r\n        [class.ard-option-highlighted]=\"item.highlighted\"\r\n        [attr.aria-selected]=\"item.selected\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-placeholder{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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdAutocompleteInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdAutocompleteInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdAutocompleteInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdAutocompleteInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdAutocompleteInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected\"\r\n        [class.ard-option-highlighted]=\"item.highlighted\"\r\n        [attr.aria-selected]=\"item.selected\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["ard-autocomplete-input{display:block}.ard-placeholder{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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumAutocompleteInputComponent, decorators: [{
             type: Component,
@@ -1516,7 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumAutocompleteInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected\"\r\n        [class.ard-option-highlighted]=\"item.highlighted\"\r\n        [attr.aria-selected]=\"item.selected\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-autocomplete-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact()\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected\"\r\n        [class.ard-option-highlighted]=\"item.highlighted\"\r\n        [attr.aria-selected]=\"item.selected\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["ard-autocomplete-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_AUTOCOMPLETE_INPUT_DEFAULTS]
@@ -2165,7 +2166,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 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{display:block}.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: "19.2.15", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
@@ -2179,7 +2180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             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{display:block}.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]
@@ -2267,7 +2268,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: ["ard-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
@@ -2281,7 +2282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxLengthAsInt()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: ["ard-input{display:block}.ard-placeholder{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]
@@ -2605,7 +2606,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumPasswordInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n      >\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: ["ard-password-input{display:block}\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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -2619,7 +2620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumPasswordInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n" }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n      >\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: ["ard-password-input{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_PASSWORD_INPUT_DEFAULTS]
@@ -3612,7 +3613,7 @@ class ArdiumDeletableChipComponent extends _FocusableComponentBase {
                 useExisting: forwardRef(() => ArdiumDeletableChipComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-chip-wrapper ard-chip-deletable\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <ard-clear-button\r\n    [title]=\"deleteButtonTitle()\"\r\n    (click)=\"deleteEvent.emit($event)\"\r\n    [tabIndex]=\"tabIndex()\"\r\n  ></ard-clear-button>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-chip-wrapper ard-chip-deletable\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <ard-clear-button\r\n    [title]=\"deleteButtonTitle()\"\r\n    (click)=\"deleteEvent.emit($event)\"\r\n    [tabIndex]=\"tabIndex()\"\r\n  ></ard-clear-button>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDeletableChipComponent, decorators: [{
             type: Component,
@@ -3622,7 +3623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumDeletableChipComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"ard-chip-wrapper ard-chip-deletable\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <ard-clear-button\r\n    [title]=\"deleteButtonTitle()\"\r\n    (click)=\"deleteEvent.emit($event)\"\r\n    [tabIndex]=\"tabIndex()\"\r\n  ></ard-clear-button>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-chip-wrapper ard-chip-deletable\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <ard-clear-button\r\n    [title]=\"deleteButtonTitle()\"\r\n    (click)=\"deleteEvent.emit($event)\"\r\n    [tabIndex]=\"tabIndex()\"\r\n  ></ard-clear-button>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DELETABLE_CHIP_DEFAULTS]
@@ -3975,9 +3976,11 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this._onChangeRegistered?.(value);
         this.valueChange.emit(value);
     }
-    _onTouched() {
+    _emitTouched() {
+        super._emitTouched();
+        if (this.isOpen())
+            return;
         this.touched.set(true);
-        this._onTouchedRegistered?.();
     }
     //! value input & output
     set value(newValue) {
@@ -4101,11 +4104,12 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     onSearchInputFocus() {
         this._searchBarFocused.set(true);
     }
-    onSearchInputBlur() {
-        if (!this._searchBarFocused())
+    onBlur(event) {
+        super.onBlur(event);
+        if (this.isOpen()) {
+            this.focus();
+            this._shouldEmitTouched = false;
             return;
-        if (!this.isOpen()) {
-            this._onTouched();
         }
         this._searchBarFocused.set(false);
     }
@@ -4156,6 +4160,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
         this.clearEvent.emit();
         this.removeEvent.emit(cleared);
         this._emitChange();
+        this._emitTouched();
     }
     _clearLastItem() {
         const clearedValue = this.itemStorage.clearLastSelected().value;
@@ -4269,7 +4274,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
             return;
         this.isOpen.set(false);
         this._destroyOverlay();
-        this._onTouched();
+        this._emitTouched();
         this.closeEvent.emit();
         this._cd.markForCheck();
     }
@@ -4441,7 +4446,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumSelectComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownArrowTemplate", first: true, predicate: ArdSelectDropdownArrowTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"valueContextGenerator()(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-label=\"label\"\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (!!group.label) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"groupContextGenerator()(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children; track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled || (itemStorage.isItemLimitReached() && !option.selected)\"\r\n          [class.ard-option-selected]=\"option.selected\"\r\n          [class.ard-option-highlighted]=\"option.highlighted\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n          [attr.aria-selected]=\"option.selected\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-label=\"label\"\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i4.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownArrowTemplate", first: true, predicate: ArdSelectDropdownArrowTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"valueContextGenerator()(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-label=\"label\"\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (!!group.label) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"groupContextGenerator()(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children; track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled || (itemStorage.isItemLimitReached() && !option.selected)\"\r\n          [class.ard-option-selected]=\"option.selected\"\r\n          [class.ard-option-highlighted]=\"option.highlighted\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n          [attr.aria-selected]=\"option.selected\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-label=\"label\"\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["ard-select{display:block}.ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i4.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
             type: Component,
@@ -4455,7 +4460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumSelectComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"valueContextGenerator()(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-label=\"label\"\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (!!group.label) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"groupContextGenerator()(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children; track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled || (itemStorage.isItemLimitReached() && !option.selected)\"\r\n          [class.ard-option-selected]=\"option.selected\"\r\n          [class.ard-option-highlighted]=\"option.highlighted\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n          [attr.aria-selected]=\"option.selected\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-label=\"label\"\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"valueContextGenerator()(item)\"\r\n        />\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <div\r\n          class=\"ard-select-value\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-label=\"label\"\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined\"\r\n        >\r\n          <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></div>\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      } @if (!readonly()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n      >\r\n        <ng-template #defaultDropdownArrowTemplate>\r\n          <span class=\"ard-dropdown-arrow\"></span>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (!!group.label) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-label=\"label\"\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"groupContextGenerator()(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children; track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled || (itemStorage.isItemLimitReached() && !option.selected)\"\r\n          [class.ard-option-selected]=\"option.selected\"\r\n          [class.ard-option-highlighted]=\"option.highlighted\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n          [attr.aria-selected]=\"option.selected\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-label=\"label\"\r\n            >\r\n              <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <div\r\n      class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n      (click)=\"addCustomOption(searchTerm())\"\r\n    >\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    </div>\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["ard-select{display:block}.ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECT_DEFAULTS]
@@ -4500,11 +4505,11 @@ class ArdiumChipComponent extends _DisablableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumChipComponent, deps: [{ token: ARD_CHIP_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumChipComponent, isStandalone: false, selector: "ard-chip", inputs: { contentAlignment: { classPropertyName: "contentAlignment", publicName: "contentAlignment", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-chip-wrapper ard-chip\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumChipComponent, isStandalone: false, selector: "ard-chip", inputs: { contentAlignment: { classPropertyName: "contentAlignment", publicName: "contentAlignment", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-chip-wrapper ard-chip\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\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: "19.2.15", ngImport: i0, type: ArdiumChipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-chip-wrapper ard-chip\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
+            args: [{ standalone: false, selector: 'ard-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-chip-wrapper ard-chip\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHIP_DEFAULTS]
@@ -4656,7 +4661,7 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\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  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: ["ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\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: "19.2.15", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
             type: Component,
@@ -4666,7 +4671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
+                    ], template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: ["ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECTABLE_CHIP_DEFAULTS]
@@ -5394,13 +5399,13 @@ class ArdiumButtonComponent extends _ButtonBase {
         this.ngClasses = computed(() => '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonComponent, deps: [{ token: ARD_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumButtonComponent, isStandalone: false, selector: "ard-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #buttonElement\r\n  ard-button\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [type]=\"type()\"\r\n  [appearance]=\"appearance()\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  [compact]=\"compact()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ArdiumButtonDirective, selector: "button[ard-button], a[ard-button]", inputs: ["variant", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumButtonComponent, isStandalone: false, selector: "ard-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #buttonElement\r\n  ard-button\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [type]=\"type()\"\r\n  [appearance]=\"appearance()\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  [compact]=\"compact()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["ard-button{display:block}.ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ArdiumButtonDirective, selector: "button[ard-button], a[ard-button]", inputs: ["variant", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  #buttonElement\r\n  ard-button\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [type]=\"type()\"\r\n  [appearance]=\"appearance()\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  [compact]=\"compact()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"] }]
+                    }, template: "<button\r\n  #buttonElement\r\n  ard-button\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [type]=\"type()\"\r\n  [appearance]=\"appearance()\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  [compact]=\"compact()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["ard-button{display:block}.ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_BUTTON_DEFAULTS]
@@ -5457,11 +5462,11 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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: "19.2.15", type: ArdiumFileDropAreaComponent, isStandalone: false, 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, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], 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()?.template ?? defaultIdleTemplate\"\r\n        [ngTemplateOutletContext]=\"getIdleContext()\"\r\n      />\r\n      } @if (currentViewState() === 'dragover') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      />\r\n      } @if (currentViewState() === 'uploaded') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n</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)=\"onFileInputChange()\"\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    } 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  >\r\n    Browse files\r\n  </ard-button>\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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFileDropAreaComponent, isStandalone: false, 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, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], 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()?.template ?? defaultIdleTemplate\"\r\n        [ngTemplateOutletContext]=\"getIdleContext()\"\r\n      />\r\n      } @if (currentViewState() === 'dragover') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      />\r\n      } @if (currentViewState() === 'uploaded') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n</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)=\"onFileInputChange()\"\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    } 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  >\r\n    Browse files\r\n  </ard-button>\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{display:block}.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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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()?.template ?? defaultIdleTemplate\"\r\n        [ngTemplateOutletContext]=\"getIdleContext()\"\r\n      />\r\n      } @if (currentViewState() === 'dragover') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      />\r\n      } @if (currentViewState() === 'uploaded') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n</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)=\"onFileInputChange()\"\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    } 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  >\r\n    Browse files\r\n  </ard-button>\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"] }]
+            args: [{ standalone: false, 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()?.template ?? defaultIdleTemplate\"\r\n        [ngTemplateOutletContext]=\"getIdleContext()\"\r\n      />\r\n      } @if (currentViewState() === 'dragover') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      />\r\n      } @if (currentViewState() === 'uploaded') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n</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)=\"onFileInputChange()\"\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    } 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  >\r\n    Browse files\r\n  </ard-button>\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{display:block}.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]
@@ -5718,7 +5723,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["ard-file-input{display:block}.ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -5732,7 +5737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                         },
-                    ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["ard-file-input{display:block}.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]
@@ -7108,13 +7113,13 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumIconButtonComponent, isStandalone: false, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumIconButtonComponent, isStandalone: false, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["ard-icon-button{display:block}.ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\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: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"] }]
+                    }, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["ard-icon-button{display:block}.ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_ICON_BUTTON_DEFAULTS]
@@ -7450,11 +7455,11 @@ class DaysViewComponent {
         this.triggerHighlightSameDayPreviousPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DaysViewComponent, isStandalone: false, 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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: true, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", 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 }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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 : this.daysViewHeaderDateFormat() | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date : weekdayDateFormat() | uppercase }}\r\n      </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    />\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    @if (!hideFloatingMonth()) {\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : floatingMonthTitleDateFormat() | titlecase\">\r\n          {{ date | date : floatingMonthDateFormat() | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      />\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-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(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__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(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-range-overlay\"></div>\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-date=\"date\"\r\n          >\r\n            {{ date | date : dayDateFormat() }}\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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DaysViewComponent, isStandalone: false, 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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: true, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", 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 }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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 : this.daysViewHeaderDateFormat() | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date : weekdayDateFormat() | uppercase }}\r\n      </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    />\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    @if (!hideFloatingMonth()) {\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : floatingMonthTitleDateFormat() | titlecase\">\r\n          {{ date | date : floatingMonthDateFormat() | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      />\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-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(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__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(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-range-overlay\"></div>\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-date=\"date\"\r\n          >\r\n            {{ date | date : dayDateFormat() }}\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: ["ard-days-view{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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 : this.daysViewHeaderDateFormat() | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date : weekdayDateFormat() | uppercase }}\r\n      </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    />\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    @if (!hideFloatingMonth()) {\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : floatingMonthTitleDateFormat() | titlecase\">\r\n          {{ date | date : floatingMonthDateFormat() | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      />\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-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(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__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(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-range-overlay\"></div>\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-date=\"date\"\r\n          >\r\n            {{ date | date : dayDateFormat() }}\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: [{ standalone: false, 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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 : this.daysViewHeaderDateFormat() | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date : weekdayDateFormat() | uppercase }}\r\n      </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    />\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    @if (!hideFloatingMonth()) {\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : floatingMonthTitleDateFormat() | titlecase\">\r\n          {{ date | date : floatingMonthDateFormat() | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      />\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-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(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__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(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-range-overlay\"></div>\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-date=\"date\"\r\n          >\r\n            {{ date | date : dayDateFormat() }}\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: ["ard-days-view{display:block}\n"] }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
@@ -7749,11 +7754,11 @@ class MonthsViewComponent {
         return isYearOutOfRange(year, this.min(), this.max());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, 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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", 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-date=\"date\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ date | date : monthsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(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__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(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-range-overlay\"></div>\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 : monthDateFormat() : '+0000' | 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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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: "19.2.15", type: MonthsViewComponent, isStandalone: false, 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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", 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-date=\"date\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ date | date : monthsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(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__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(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-range-overlay\"></div>\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 : monthDateFormat() : '+0000' | 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: ["ard-months-view{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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-date=\"date\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ date | date : monthsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(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__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(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-range-overlay\"></div>\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 : monthDateFormat() : '+0000' | 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: [{ standalone: false, 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-date=\"date\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ date | date : monthsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(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__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(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-range-overlay\"></div>\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 : monthDateFormat() : '+0000' | 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: ["ard-months-view{display:block}\n"] }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
@@ -8048,11 +8053,11 @@ class YearsViewComponent {
         this.triggerHighlightSameYearNextPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, 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 }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, 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 }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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: ["ard-years-view{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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: [{ standalone: false, 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\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)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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: ["ard-years-view{display:block}\n"] }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
@@ -8097,7 +8102,7 @@ class ArdiumCalendarComponent extends _AbstractCalendar {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumCalendarComponent,
             },
-        ], 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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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: ["ard-calendar,ard-range-calendar{display:block}\n"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], 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: "19.2.15", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
             type: Component,
@@ -8111,7 +8116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumCalendarComponent,
                         },
-                    ], 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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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: ["ard-calendar,ard-range-calendar{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -8256,7 +8261,7 @@ class ArdiumRangeCalendarComponent extends _AbstractCalendar {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumRangeCalendarComponent,
             },
-        ], 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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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: ["ard-calendar,ard-range-calendar{display:block}\n"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], 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: "19.2.15", ngImport: i0, type: ArdiumRangeCalendarComponent, decorators: [{
             type: Component,
@@ -8270,7 +8275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumRangeCalendarComponent,
                         },
-                    ], 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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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: ["ard-calendar,ard-range-calendar{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -8706,7 +8711,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -8720,7 +8725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumDateInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9051,7 +9056,7 @@ class ArdiumDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-date-range-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          {{ 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\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-range-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-range-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-date-range-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          {{ 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\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-range-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-range-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateRangeInputComponent, decorators: [{
             type: Component,
@@ -9065,7 +9070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumDateRangeInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-date-range-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          {{ 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\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-range-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-range-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-date-range-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          {{ 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\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-range-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-range-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9446,7 +9451,7 @@ class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumMultipageDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"onCalendarSelectedChange($event)\"\r\n        (yearSelect)=\"yearSelect.emit($event)\"\r\n        (monthSelect)=\"monthSelect.emit($event)\"\r\n      >\r\n        <ng-template\r\n          _ard-tmp-repository\r\n          [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate() ?? { template: defaultDaysViewHeaderTemplate }\"\r\n          [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n          [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n          [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n          [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n          [yearTmp]=\"calendarYearTemplate()\"\r\n          [monthTmp]=\"calendarMonthTemplate()\"\r\n          [dayTmp]=\"calendarDayTemplate()\"\r\n        />\r\n      </ard-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\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-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\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      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\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      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"onCalendarSelectedChange($event)\"\r\n        (yearSelect)=\"yearSelect.emit($event)\"\r\n        (monthSelect)=\"monthSelect.emit($event)\"\r\n      >\r\n        <ng-template\r\n          _ard-tmp-repository\r\n          [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate() ?? { template: defaultDaysViewHeaderTemplate }\"\r\n          [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n          [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n          [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n          [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n          [yearTmp]=\"calendarYearTemplate()\"\r\n          [monthTmp]=\"calendarMonthTemplate()\"\r\n          [dayTmp]=\"calendarDayTemplate()\"\r\n        />\r\n      </ard-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\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-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\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      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\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      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["ard-multipage-date-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumMultipageDateRangeInputComponent, decorators: [{
             type: Component,
@@ -9460,7 +9465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumMultipageDateRangeInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"onCalendarSelectedChange($event)\"\r\n        (yearSelect)=\"yearSelect.emit($event)\"\r\n        (monthSelect)=\"monthSelect.emit($event)\"\r\n      >\r\n        <ng-template\r\n          _ard-tmp-repository\r\n          [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate() ?? { template: defaultDaysViewHeaderTemplate }\"\r\n          [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n          [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n          [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n          [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n          [yearTmp]=\"calendarYearTemplate()\"\r\n          [monthTmp]=\"calendarMonthTemplate()\"\r\n          [dayTmp]=\"calendarDayTemplate()\"\r\n        />\r\n      </ard-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\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-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\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      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\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      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"onCalendarSelectedChange($event)\"\r\n        (yearSelect)=\"yearSelect.emit($event)\"\r\n        (monthSelect)=\"monthSelect.emit($event)\"\r\n      >\r\n        <ng-template\r\n          _ard-tmp-repository\r\n          [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate() ?? { template: defaultDaysViewHeaderTemplate }\"\r\n          [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n          [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n          [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n          [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n          [yearTmp]=\"calendarYearTemplate()\"\r\n          [monthTmp]=\"calendarMonthTemplate()\"\r\n          [dayTmp]=\"calendarDayTemplate()\"\r\n        />\r\n      </ard-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\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-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\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      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\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      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["ard-multipage-date-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9872,7 +9877,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => ArdiumHexInputComponent),
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: ["ard-hex-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
@@ -9886,7 +9891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => ArdiumHexInputComponent),
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [maxLength]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: ["ard-hex-input{display:block}.ard-placeholder{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]
@@ -10246,7 +10251,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, 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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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 (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && 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-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.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.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, 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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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 (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && 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:block}.ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.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.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
@@ -10260,7 +10265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             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      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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 (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && 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-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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 (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && 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:block}.ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.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]
@@ -10330,13 +10335,13 @@ class ArdiumFabComponent extends _ButtonBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFabComponent, deps: [{ token: ARD_FAB_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumFabComponent, isStandalone: false, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px;max-height:100%}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumFabComponent, isStandalone: false, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["ard-fab{display:block}.ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px;max-height:100%}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}\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: "19.2.15", ngImport: i0, type: ArdiumFabComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px;max-height:100%}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}\n"] }]
+                    }, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["ard-fab{display:block}.ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px;max-height:100%}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FAB_DEFAULTS]
@@ -10455,7 +10460,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], 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]=\"selectedAccountingForReverse()\"\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\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\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"] }, { 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 }); }
+        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], 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]=\"selectedAccountingForReverse()\"\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\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:block}.ard-checkbox{font-size:inherit}\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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -10465,7 +10470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\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\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\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]=\"selectedAccountingForReverse()\"\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\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:block}.ard-checkbox{font-size:inherit}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]
@@ -10591,11 +10596,11 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
         this._changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: ARD_RADIO_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumRadioComponent, isStandalone: false, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  class=\"ard-radio\"\r\n  type=\"button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  (mousedown)=\"onMousedown()\"\r\n  (mouseup)=\"onMouseup()\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-radio-circles\">\r\n    <div class=\"ard-radio-outer-circle\"></div>\r\n    <div class=\"ard-radio-inner-circle\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-hitbox\"></div>\r\n  </div>\r\n  <label [for]=\"htmlId()\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</button>\r\n\r\n<input\r\n  class=\"ard-radio-input-element\"\r\n  type=\"radio\"\r\n  [name]=\"name()\"\r\n  [id]=\"htmlId()\"\r\n  [checked]=\"selected()\"\r\n  #radio\r\n/>\r\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumRadioComponent, isStandalone: false, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  class=\"ard-radio\"\r\n  type=\"button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  (mousedown)=\"onMousedown()\"\r\n  (mouseup)=\"onMouseup()\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-radio-circles\">\r\n    <div class=\"ard-radio-outer-circle\"></div>\r\n    <div class=\"ard-radio-inner-circle\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-hitbox\"></div>\r\n  </div>\r\n  <label [for]=\"htmlId()\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</button>\r\n\r\n<input\r\n  class=\"ard-radio-input-element\"\r\n  type=\"radio\"\r\n  [name]=\"name()\"\r\n  [id]=\"htmlId()\"\r\n  [checked]=\"selected()\"\r\n  #radio\r\n/>\r\n", styles: ["ard-radio{display:block}.ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\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: "19.2.15", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-radio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #focusableElement\r\n  class=\"ard-radio\"\r\n  type=\"button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  (mousedown)=\"onMousedown()\"\r\n  (mouseup)=\"onMouseup()\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-radio-circles\">\r\n    <div class=\"ard-radio-outer-circle\"></div>\r\n    <div class=\"ard-radio-inner-circle\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-hitbox\"></div>\r\n  </div>\r\n  <label [for]=\"htmlId()\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</button>\r\n\r\n<input\r\n  class=\"ard-radio-input-element\"\r\n  type=\"radio\"\r\n  [name]=\"name()\"\r\n  [id]=\"htmlId()\"\r\n  [checked]=\"selected()\"\r\n  #radio\r\n/>\r\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"] }]
+            args: [{ standalone: false, selector: 'ard-radio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #focusableElement\r\n  class=\"ard-radio\"\r\n  type=\"button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  (mousedown)=\"onMousedown()\"\r\n  (mouseup)=\"onMouseup()\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-radio-circles\">\r\n    <div class=\"ard-radio-outer-circle\"></div>\r\n    <div class=\"ard-radio-inner-circle\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-hitbox\"></div>\r\n  </div>\r\n  <label [for]=\"htmlId()\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</button>\r\n\r\n<input\r\n  class=\"ard-radio-input-element\"\r\n  type=\"radio\"\r\n  [name]=\"name()\"\r\n  [id]=\"htmlId()\"\r\n  [checked]=\"selected()\"\r\n  #radio\r\n/>\r\n", styles: ["ard-radio{display:block}.ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_RADIO_DEFAULTS]
@@ -10771,24 +10776,17 @@ class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumRadioGroupComponent,
             },
-        ], queries: [{ propertyName: "_radios", predicate: ArdiumRadioComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_radios", predicate: ArdiumRadioComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ard-radio-group{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'ard-radio-group',
-                    template: '<ng-content></ng-content>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
+            args: [{ standalone: false, selector: 'ard-radio-group', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.tabindex]': 'null',
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                         '[attr.aria-describedby]': 'null',
                         role: 'radiogroup',
-                    },
-                    providers: [
+                    }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ArdiumRadioGroupComponent),
@@ -10798,8 +10796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumRadioGroupComponent,
                         },
-                    ],
-                }]
+                    ], styles: ["ard-radio-group{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _htmlIdHostAttribute: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -11608,7 +11605,7 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumSegmentComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-center .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: ["ard-segment{display:block}.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-center .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
@@ -11622,7 +11619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumSegmentComponent,
                         },
-                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-center .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
+                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: ["ard-segment{display:block}.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-center .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]
@@ -11687,7 +11684,7 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: [""], 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  type=\"button\"\r\n  role=\"checkbox\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: ["ard-slide-toggle{display:block}\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: "19.2.15", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
             type: Component,
@@ -11697,7 +11694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n" }]
+                    ], template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: ["ard-slide-toggle{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SLIDE_TOGGLE_DEFAULTS]
@@ -12500,11 +12497,11 @@ class ArdiumStarComponent {
         return coerceBooleanProperty(value) ? StarFillMode.Filled : StarFillMode.None;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumStarComponent, isStandalone: false, 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\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultIconTemplate\r\n    let-fillMode\r\n  >\r\n    @if (fillMode === 'filled') {\r\n      <ard-icon filled>star</ard-icon>\r\n    } @else if (fillMode === 'half') {\r\n      <ard-icon>star-half</ard-icon>\r\n    } @else {\r\n      <ard-icon>star</ard-icon>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\r\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumStarComponent, isStandalone: false, 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\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultIconTemplate\r\n    let-fillMode\r\n  >\r\n    @if (fillMode === 'filled') {\r\n      <ard-icon filled>star</ard-icon>\r\n    } @else if (fillMode === 'half') {\r\n      <ard-icon>star-half</ard-icon>\r\n    } @else {\r\n      <ard-icon>star</ard-icon>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\r\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\r\n  />\r\n</div>\r\n", styles: ["ard-star{display:block}\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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultIconTemplate\r\n    let-fillMode\r\n  >\r\n    @if (fillMode === 'filled') {\r\n      <ard-icon filled>star</ard-icon>\r\n    } @else if (fillMode === 'half') {\r\n      <ard-icon>star-half</ard-icon>\r\n    } @else {\r\n      <ard-icon>star</ard-icon>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\r\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\r\n  />\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultIconTemplate\r\n    let-fillMode\r\n  >\r\n    @if (fillMode === 'filled') {\r\n      <ard-icon filled>star</ard-icon>\r\n    } @else if (fillMode === 'half') {\r\n      <ard-icon>star-half</ard-icon>\r\n    } @else {\r\n      <ard-icon>star</ard-icon>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\r\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\r\n  />\r\n</div>\r\n", styles: ["ard-star{display:block}\n"] }]
         }] });
 
 class ArdiumStarButtonComponent extends _BooleanComponentBase {
@@ -12540,7 +12537,7 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "starTemplate", first: true, predicate: ArdStarButtonStarTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-star-button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\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  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n  />\r\n</button>\r\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 }); }
+        ], queries: [{ propertyName: "starTemplate", first: true, predicate: ArdStarButtonStarTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-star-button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\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  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-star-button{display:block}.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: "19.2.15", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
             type: Component,
@@ -12550,7 +12547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-star-button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\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  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
+                    ], template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-star-button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\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  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-star-button{display:block}.ard-star-button{border:none;background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_STAR_BUTTON_DEFAULTS]
@@ -12717,7 +12714,7 @@ class ArdiumRatingInputComponent extends _FormFieldComponentBase {
                 useExisting: forwardRef(() => ArdiumRatingInputComponent),
                 multi: true,
             },
-        ], 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 }); }
+        ], 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{display:block}.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: "19.2.15", ngImport: i0, type: ArdiumRatingInputComponent, decorators: [{
             type: Component,
@@ -12727,7 +12724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumRatingInputComponent),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], 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{display:block}.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_RATING_INPUT_DEFAULTS]
@@ -13278,11 +13275,11 @@ class ArdiumProgressCircleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumProgressCircleComponent, isStandalone: false, selector: "ard-progress-circle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hideValue: { classPropertyName: "hideValue", publicName: "hideValue", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-progress-circle\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-progress-circle-background\"></div>\r\n  <div\r\n    class=\"ard-progress-circle-overlay\"\r\n    [style]=\"fillPercentVariable()\"\r\n  ></div>\r\n  <div class=\"ard-progress-circle-value\">\r\n    <ng-template\r\n      #defaultValueTemplate\r\n      let-percents\r\n    >\r\n      {{ percents | number: '1.0-0' }}%\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\r\n      [ngTemplateOutletContext]=\"getValueContext()\"\r\n    ></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{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: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumProgressCircleComponent, isStandalone: false, selector: "ard-progress-circle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hideValue: { classPropertyName: "hideValue", publicName: "hideValue", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-progress-circle\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-progress-circle-background\"></div>\r\n  <div\r\n    class=\"ard-progress-circle-overlay\"\r\n    [style]=\"fillPercentVariable()\"\r\n  ></div>\r\n  <div class=\"ard-progress-circle-value\">\r\n    <ng-template\r\n      #defaultValueTemplate\r\n      let-percents\r\n    >\r\n      {{ percents | number: '1.0-0' }}%\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\r\n      [ngTemplateOutletContext]=\"getValueContext()\"\r\n    ></ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["ard-progress-circle{display:block}.ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{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: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-progress-circle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-progress-circle\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-progress-circle-background\"></div>\r\n  <div\r\n    class=\"ard-progress-circle-overlay\"\r\n    [style]=\"fillPercentVariable()\"\r\n  ></div>\r\n  <div class=\"ard-progress-circle-value\">\r\n    <ng-template\r\n      #defaultValueTemplate\r\n      let-percents\r\n    >\r\n      {{ percents | number: '1.0-0' }}%\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\r\n      [ngTemplateOutletContext]=\"getValueContext()\"\r\n    ></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{display:none}\n"] }]
+            args: [{ standalone: false, selector: 'ard-progress-circle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-progress-circle\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-progress-circle-background\"></div>\r\n  <div\r\n    class=\"ard-progress-circle-overlay\"\r\n    [style]=\"fillPercentVariable()\"\r\n  ></div>\r\n  <div class=\"ard-progress-circle-value\">\r\n    <ng-template\r\n      #defaultValueTemplate\r\n      let-percents\r\n    >\r\n      {{ percents | number: '1.0-0' }}%\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\r\n      [ngTemplateOutletContext]=\"getValueContext()\"\r\n    ></ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["ard-progress-circle{display:block}.ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{display:none}\n"] }]
         }] });
 
 class ArdProgressCircleValueTemplateDirective {
@@ -13331,11 +13328,11 @@ class ArdiumSpinnerComponent {
         this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumSpinnerComponent, isStandalone: false, selector: "ard-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\r\n  class=\"ard-spinner\"\r\n  [ngClass]=\"ngClasses()\"\r\n  viewBox=\"0 0 100 100\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n  <circle\r\n    class=\"ard-spinner-circle\"\r\n    cx=\"50\"\r\n    cy=\"50\"\r\n    r=\"20\"\r\n  ></circle>\r\n</svg>\r\n", styles: [".ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite;pointer-events:none}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumSpinnerComponent, isStandalone: false, selector: "ard-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\r\n  class=\"ard-spinner\"\r\n  [ngClass]=\"ngClasses()\"\r\n  viewBox=\"0 0 100 100\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n  <circle\r\n    class=\"ard-spinner-circle\"\r\n    cx=\"50\"\r\n    cy=\"50\"\r\n    r=\"20\"\r\n  ></circle>\r\n</svg>\r\n", styles: ["ard-spinner{display:block}.ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite;pointer-events:none}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\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: "19.2.15", ngImport: i0, type: ArdiumSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-spinner', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\r\n  class=\"ard-spinner\"\r\n  [ngClass]=\"ngClasses()\"\r\n  viewBox=\"0 0 100 100\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n  <circle\r\n    class=\"ard-spinner-circle\"\r\n    cx=\"50\"\r\n    cy=\"50\"\r\n    r=\"20\"\r\n  ></circle>\r\n</svg>\r\n", styles: [".ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite;pointer-events:none}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\n"] }]
+            args: [{ standalone: false, selector: 'ard-spinner', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\r\n  class=\"ard-spinner\"\r\n  [ngClass]=\"ngClasses()\"\r\n  viewBox=\"0 0 100 100\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n  <circle\r\n    class=\"ard-spinner-circle\"\r\n    cx=\"50\"\r\n    cy=\"50\"\r\n    r=\"20\"\r\n  ></circle>\r\n</svg>\r\n", styles: ["ard-spinner{display:block}.ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite;pointer-events:none}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\n"] }]
         }] });
 
 class ArdiumSpinnerModule {
@@ -13679,11 +13676,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ArdiumFormFieldComponent extends _FormFieldBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__errors]=\"hasAnyError()\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__errors-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__errors-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__errors]=\"hasAnyError()\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__errors-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__errors-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}ard-label,ard-hint,ard-error,ard-auto-error,ard-hint-error{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__errors]=\"hasAnyError()\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__errors-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__errors-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"] }]
+            args: [{ standalone: false, selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__errors]=\"hasAnyError()\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__errors-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__errors-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-error\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      @if (alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      @if (!alignHintToLeftByDefault()) {\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n        <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n      </div>\r\n      }\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}ard-label,ard-hint,ard-error,ard-auto-error,ard-hint-error{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"] }]
         }] });
 
 class ArdiumHintErrorComponent {
@@ -13716,11 +13713,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ArdiumHorizontalFormFieldComponent extends _FormFieldBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__errors]=\"hasAnyError()\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__errors-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__errors-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__errors]=\"hasAnyError()\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__errors-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__errors-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}ard-label,ard-hint,ard-error,ard-auto-error,ard-hint-error{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__errors]=\"hasAnyError()\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__errors-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__errors-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"] }]
+            args: [{ standalone: false, selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__errors]=\"hasAnyError()\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__errors-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[left], [ard-error][left], ard-auto-error[left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__errors-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-error\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultAutoErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-error[right], [ard-error][right], ard-auto-error[right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        @if (alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        @if (!alignHintToLeftByDefault()) {\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n          <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n        </div>\r\n        }\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n  <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultAutoErrors>\r\n  <ng-content select=\"ard-auto-error:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n  <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n  <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n  <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n  <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: ["ard-form-field,ard-horizontal-form-field{display:block}ard-label,ard-hint,ard-error,ard-auto-error,ard-hint-error{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-auto-error__no-errors{display:none}\n"] }]
         }] });
 
 class ArdiumFormFieldModule {
@@ -13897,11 +13894,11 @@ class ArdiumKbdShortcutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumKbdShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumKbdShortcutComponent, isStandalone: false, selector: "ard-kbd-shortcut", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapperEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-kbd-shortcut\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (key of keys() ?? contentWrapper()?.nativeElement?.innerText?.split(splitRegex); track $index) {\r\n    @if ($index !== 0) {\r\n      <span>+</span>\r\n    }\r\n    <ard-kbd\r\n      [appearance]=\"appearance()\"\r\n      [full]=\"full()\"\r\n      [key]=\"key\"\r\n    />\r\n  }\r\n</div>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-kbd-shortcut-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".ard-kbd-shortcut{display:inline}.ard-kbd-shortcut-content-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: ["key", "full", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumKbdShortcutComponent, isStandalone: false, selector: "ard-kbd-shortcut", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapperEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-kbd-shortcut\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (key of keys() ?? contentWrapper()?.nativeElement?.innerText?.split(splitRegex); track $index) {\r\n    @if ($index !== 0) {\r\n      <span>+</span>\r\n    }\r\n    <ard-kbd\r\n      [appearance]=\"appearance()\"\r\n      [full]=\"full()\"\r\n      [key]=\"key\"\r\n    />\r\n  }\r\n</div>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-kbd-shortcut-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".ard-kbd-shortcut{display:inline-block}.ard-kbd-shortcut-content-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: ["key", "full", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumKbdShortcutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-kbd-shortcut', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-kbd-shortcut\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (key of keys() ?? contentWrapper()?.nativeElement?.innerText?.split(splitRegex); track $index) {\r\n    @if ($index !== 0) {\r\n      <span>+</span>\r\n    }\r\n    <ard-kbd\r\n      [appearance]=\"appearance()\"\r\n      [full]=\"full()\"\r\n      [key]=\"key\"\r\n    />\r\n  }\r\n</div>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-kbd-shortcut-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".ard-kbd-shortcut{display:inline}.ard-kbd-shortcut-content-wrapper{display:none}\n"] }]
+            args: [{ standalone: false, selector: 'ard-kbd-shortcut', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-kbd-shortcut\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (key of keys() ?? contentWrapper()?.nativeElement?.innerText?.split(splitRegex); track $index) {\r\n    @if ($index !== 0) {\r\n      <span>+</span>\r\n    }\r\n    <ard-kbd\r\n      [appearance]=\"appearance()\"\r\n      [full]=\"full()\"\r\n      [key]=\"key\"\r\n    />\r\n  }\r\n</div>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-kbd-shortcut-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".ard-kbd-shortcut{display:inline-block}.ard-kbd-shortcut-content-wrapper{display:none}\n"] }]
         }] });
 
 class ArdiumKbdShortcutModule {
@@ -14002,11 +13999,11 @@ class ArdiumRatingDisplayComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRatingDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRatingDisplayComponent, isStandalone: false, 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      [class.ard-star-not-in-value]=\"fillMode !== 'none'\"\r\n      [filled]=\"fillMode\"\r\n      [color]=\"fillMode !== 'none' ? color : 'none'\"\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRatingDisplayComponent, isStandalone: false, 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      [class.ard-star-not-in-value]=\"fillMode !== 'none'\"\r\n      [filled]=\"fillMode\"\r\n      [color]=\"fillMode !== 'none' ? color : 'none'\"\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: ["ard-rating-display{display:block}\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: "19.2.15", ngImport: i0, type: ArdiumRatingDisplayComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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      [class.ard-star-not-in-value]=\"fillMode !== 'none'\"\r\n      [filled]=\"fillMode\"\r\n      [color]=\"fillMode !== 'none' ? color : 'none'\"\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" }]
+            args: [{ standalone: false, 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      [class.ard-star-not-in-value]=\"fillMode !== 'none'\"\r\n      [filled]=\"fillMode\"\r\n      [color]=\"fillMode !== 'none' ? color : 'none'\"\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: ["ard-rating-display{display:block}\n"] }]
         }] });
 
 class ArdiumRatingDisplayModule {
@@ -14832,11 +14829,11 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
         this._emitPageEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTablePaginationComponent, deps: [{ token: ARD_TABLE_PAGINATION_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTablePaginationComponent, isStandalone: false, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "addCustomOptionText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "deferValueWrites", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen", "dropdownPanelWidth", "dropdownPanelHeight", "dropdownPanelMinWidth", "dropdownPanelMinHeight", "dropdownPanelMaxWidth", "dropdownPanelMaxHeight"], outputs: ["valueChange", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTablePaginationComponent, isStandalone: false, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["ard-table-pagination{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "addCustomOptionText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "deferValueWrites", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen", "dropdownPanelWidth", "dropdownPanelHeight", "dropdownPanelMinWidth", "dropdownPanelMinHeight", "dropdownPanelMaxWidth", "dropdownPanelMaxHeight"], outputs: ["valueChange", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTablePaginationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-table-pagination', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: 'ard-table-pagination', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["ard-table-pagination{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_TABLE_PAGINATION_DEFAULTS]
@@ -15300,11 +15297,11 @@ class ArdiumTableComponent extends _FocusableComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTableComponent, deps: [{ token: ARD_TABLE_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTableComponent, isStandalone: false, selector: "ard-table", inputs: { rowDisabledFrom: { classPropertyName: "rowDisabledFrom", publicName: "rowDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, rowBoldFrom: { classPropertyName: "rowBoldFrom", publicName: "rowBoldFrom", isSignal: true, isRequired: false, transformFunction: null }, invertRowDisabled: { classPropertyName: "invertRowDisabled", publicName: "invertRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, invertRowBold: { classPropertyName: "invertRowBold", publicName: "invertRowBold", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, loadingProgressBuffer: { classPropertyName: "loadingProgressBuffer", publicName: "loadingProgressBuffer", isSignal: true, isRequired: false, transformFunction: null }, loadingBarMode: { classPropertyName: "loadingBarMode", publicName: "loadingBarMode", isSignal: true, isRequired: false, transformFunction: null }, loadingBarColor: { classPropertyName: "loadingBarColor", publicName: "loadingBarColor", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, treatDataSourceAsString: { classPropertyName: "treatDataSourceAsString", publicName: "treatDataSourceAsString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow", clickRowEvent: "clickRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  class=\"ard-table\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (caption()) {\r\n    <caption class=\"ard-table__caption\">\r\n      <div class=\"ard-table__caption-container\">\r\n        <ng-template\r\n          #defaultCaptionTemplate\r\n          let-captionText\r\n        >\r\n          {{ captionText }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\r\n        />\r\n      </div>\r\n    </caption>\r\n  }\r\n  <thead class=\"ard-table__header\">\r\n    @for (row of headerCells(); track $index) {\r\n      <tr class=\"ard-table__header-row\">\r\n        @for (cell of row; track $index) {\r\n          <th\r\n            class=\"ard-table__header-cell\"\r\n            [ngClass]=\"cell.cell().cellClass\"\r\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n            [attr.colspan]=\"cell.colspan()\"\r\n            [attr.rowspan]=\"cell.rowspan()\"\r\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\r\n          >\r\n            <div\r\n              class=\"ard-table__cell-container\"\r\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n              [style.width]=\"cell.width\"\r\n              [style.minWidth]=\"cell.minWidth\"\r\n            >\r\n              @if (isHeaderCellCheckbox(cell)) {\r\n                <ng-template\r\n                  #defaultHeaderCheckboxTemplate\r\n                  let-state\r\n                  let-onChange=\"onChange\"\r\n                >\r\n                  <ard-checkbox\r\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                    [state]=\"state\"\r\n                    [color]=\"getHeaderCheckboxColor()\"\r\n                    unselectedColor=\"currentColor\"\r\n                    (change)=\"onChange()\"\r\n                  />\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                />\r\n              } @else {\r\n                <ng-template\r\n                  #defaultHeaderCellTemplate\r\n                  let-content\r\n                  let-sortable=\"sortable\"\r\n                  let-sortType=\"sortType\"\r\n                  let-onTriggerSort=\"onTriggerSort\"\r\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                >\r\n                  <div\r\n                    class=\"ard-table__header-template-container\"\r\n                    [class.ard-sortable]=\"sortable\"\r\n                    [class.ard-nonsortable]=\"!sortable\"\r\n                  >\r\n                    @if (sortable) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"ard-table__header-content-container\"\r\n                        (click)=\"onTriggerSort($event)\"\r\n                        [tabindex]=\"tabIndex()\"\r\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                      >\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                        @if (sortType !== null) {\r\n                          <div class=\"ard-table__header-sort-icon\">\r\n                            @if (sortType === 'ascending') {\r\n                              <ard-icon>south</ard-icon>\r\n                            } @else if (sortType === 'descending') {\r\n                              <ard-icon>north</ard-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </button>\r\n                    } @else {\r\n                      <div class=\"ard-table__header-content-container\">\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\r\n                />\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    }\r\n    <tr class=\"ard-table__progress-bar-row\">\r\n      <th\r\n        class=\"ard-table__progress-bar-cell\"\r\n        colspan=\"9999\"\r\n      >\r\n        @if (isLoading()) {\r\n          <ard-progress-bar\r\n            [value]=\"loadingProgress()\"\r\n            [bufferValue]=\"loadingProgressBuffer()\"\r\n            [mode]=\"loadingBarMode()\"\r\n            [color]=\"loadingBarColor()\"\r\n            variant=\"sharp\"\r\n            hideValue\r\n          />\r\n        }\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"ard-table__body\">\r\n    @for (row of dataRows(); track $index) {\r\n      @if (row.isEmpty()) {\r\n        <tr class=\"ard-table__empty-row\">\r\n          <td\r\n            class=\"ard-table__empty-cell\"\r\n            colspan=\"9999\"\r\n          ></td>\r\n        </tr>\r\n      } @else {\r\n        <tr\r\n          class=\"ard-table__body-row\"\r\n          [class.ard-table__selected-row]=\"row.selected()\"\r\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\r\n          [class.ard-table__disabled-row]=\"row.disabled()\"\r\n          [class.ard-table__bold-row]=\"row.bold()\"\r\n          (click)=\"onRowClick(row, $event)\"\r\n          (mouseover)=\"onRowMouseOver($event)\"\r\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\r\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\r\n        >\r\n          @for (cell of row.data(); track $index) {\r\n            <ng-template #cellTmp>\r\n              <div\r\n                class=\"ard-table__cell-container\"\r\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\r\n              >\r\n                @if (isCellCheckbox(cell)) {\r\n                  <ng-template\r\n                    #defaultCheckboxTemplate\r\n                    let-isChecked\r\n                    let-onChange=\"onChange\"\r\n                    let-disabled=\"disabled\"\r\n                  >\r\n                    <ard-checkbox\r\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                      [selected]=\"isChecked\"\r\n                      [color]=\"color()\"\r\n                      [disabled]=\"disabled\"\r\n                      (change)=\"onChange()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\r\n                  />\r\n                } @else {\r\n                  <ng-template\r\n                    #defaultCellTemplate\r\n                    let-content\r\n                  >\r\n                    {{ content }}\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                  />\r\n                }\r\n              </div>\r\n            </ng-template>\r\n            @if (!row.dataColumns()[$index].isRowHeader) {\r\n              <td\r\n                class=\"ard-table__body-cell\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </td>\r\n            } @else {\r\n              <th\r\n                class=\"ard-table__body-cell ard-table__row-header\"\r\n                scope=\"row\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n  @if (canDisplayPagination()) {\r\n    <tfoot class=\"ard-table__foot\">\r\n      <tr class=\"ard-table__foot-row\">\r\n        <td\r\n          class=\"ard-table__pagination-cell\"\r\n          colspan=\"9999\"\r\n        >\r\n          <ard-table-pagination\r\n            [options]=\"paginationOptions()\"\r\n            [totalItems]=\"totalItems()!\"\r\n            [disabled]=\"paginationDisabled()\"\r\n            [(itemsPerPage)]=\"itemsPerPage\"\r\n            [(page)]=\"page\"\r\n            [align]=\"paginationAlign()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [itemsPerPageText]=\"itemsPerPageText()\"\r\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n          />\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n  }\r\n</table>\r\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;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: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["totalItems", "options", "itemsPerPage", "page", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: ["value", "bufferValue", "color", "variant", "size", "mode", "hideValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTableComponent, isStandalone: false, selector: "ard-table", inputs: { rowDisabledFrom: { classPropertyName: "rowDisabledFrom", publicName: "rowDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, rowBoldFrom: { classPropertyName: "rowBoldFrom", publicName: "rowBoldFrom", isSignal: true, isRequired: false, transformFunction: null }, invertRowDisabled: { classPropertyName: "invertRowDisabled", publicName: "invertRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, invertRowBold: { classPropertyName: "invertRowBold", publicName: "invertRowBold", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, loadingProgressBuffer: { classPropertyName: "loadingProgressBuffer", publicName: "loadingProgressBuffer", isSignal: true, isRequired: false, transformFunction: null }, loadingBarMode: { classPropertyName: "loadingBarMode", publicName: "loadingBarMode", isSignal: true, isRequired: false, transformFunction: null }, loadingBarColor: { classPropertyName: "loadingBarColor", publicName: "loadingBarColor", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, treatDataSourceAsString: { classPropertyName: "treatDataSourceAsString", publicName: "treatDataSourceAsString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow", clickRowEvent: "clickRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  class=\"ard-table\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (caption()) {\r\n    <caption class=\"ard-table__caption\">\r\n      <div class=\"ard-table__caption-container\">\r\n        <ng-template\r\n          #defaultCaptionTemplate\r\n          let-captionText\r\n        >\r\n          {{ captionText }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\r\n        />\r\n      </div>\r\n    </caption>\r\n  }\r\n  <thead class=\"ard-table__header\">\r\n    @for (row of headerCells(); track $index) {\r\n      <tr class=\"ard-table__header-row\">\r\n        @for (cell of row; track $index) {\r\n          <th\r\n            class=\"ard-table__header-cell\"\r\n            [ngClass]=\"cell.cell().cellClass\"\r\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n            [attr.colspan]=\"cell.colspan()\"\r\n            [attr.rowspan]=\"cell.rowspan()\"\r\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\r\n          >\r\n            <div\r\n              class=\"ard-table__cell-container\"\r\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n              [style.width]=\"cell.width\"\r\n              [style.minWidth]=\"cell.minWidth\"\r\n            >\r\n              @if (isHeaderCellCheckbox(cell)) {\r\n                <ng-template\r\n                  #defaultHeaderCheckboxTemplate\r\n                  let-state\r\n                  let-onChange=\"onChange\"\r\n                >\r\n                  <ard-checkbox\r\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                    [state]=\"state\"\r\n                    [color]=\"getHeaderCheckboxColor()\"\r\n                    unselectedColor=\"currentColor\"\r\n                    (change)=\"onChange()\"\r\n                  />\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                />\r\n              } @else {\r\n                <ng-template\r\n                  #defaultHeaderCellTemplate\r\n                  let-content\r\n                  let-sortable=\"sortable\"\r\n                  let-sortType=\"sortType\"\r\n                  let-onTriggerSort=\"onTriggerSort\"\r\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                >\r\n                  <div\r\n                    class=\"ard-table__header-template-container\"\r\n                    [class.ard-sortable]=\"sortable\"\r\n                    [class.ard-nonsortable]=\"!sortable\"\r\n                  >\r\n                    @if (sortable) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"ard-table__header-content-container\"\r\n                        (click)=\"onTriggerSort($event)\"\r\n                        [tabindex]=\"tabIndex()\"\r\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                      >\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                        @if (sortType !== null) {\r\n                          <div class=\"ard-table__header-sort-icon\">\r\n                            @if (sortType === 'ascending') {\r\n                              <ard-icon>south</ard-icon>\r\n                            } @else if (sortType === 'descending') {\r\n                              <ard-icon>north</ard-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </button>\r\n                    } @else {\r\n                      <div class=\"ard-table__header-content-container\">\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\r\n                />\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    }\r\n    <tr class=\"ard-table__progress-bar-row\">\r\n      <th\r\n        class=\"ard-table__progress-bar-cell\"\r\n        colspan=\"9999\"\r\n      >\r\n        @if (isLoading()) {\r\n          <ard-progress-bar\r\n            [value]=\"loadingProgress()\"\r\n            [bufferValue]=\"loadingProgressBuffer()\"\r\n            [mode]=\"loadingBarMode()\"\r\n            [color]=\"loadingBarColor()\"\r\n            variant=\"sharp\"\r\n            hideValue\r\n          />\r\n        }\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"ard-table__body\">\r\n    @for (row of dataRows(); track $index) {\r\n      @if (row.isEmpty()) {\r\n        <tr class=\"ard-table__empty-row\">\r\n          <td\r\n            class=\"ard-table__empty-cell\"\r\n            colspan=\"9999\"\r\n          ></td>\r\n        </tr>\r\n      } @else {\r\n        <tr\r\n          class=\"ard-table__body-row\"\r\n          [class.ard-table__selected-row]=\"row.selected()\"\r\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\r\n          [class.ard-table__disabled-row]=\"row.disabled()\"\r\n          [class.ard-table__bold-row]=\"row.bold()\"\r\n          (click)=\"onRowClick(row, $event)\"\r\n          (mouseover)=\"onRowMouseOver($event)\"\r\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\r\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\r\n        >\r\n          @for (cell of row.data(); track $index) {\r\n            <ng-template #cellTmp>\r\n              <div\r\n                class=\"ard-table__cell-container\"\r\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\r\n              >\r\n                @if (isCellCheckbox(cell)) {\r\n                  <ng-template\r\n                    #defaultCheckboxTemplate\r\n                    let-isChecked\r\n                    let-onChange=\"onChange\"\r\n                    let-disabled=\"disabled\"\r\n                  >\r\n                    <ard-checkbox\r\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                      [selected]=\"isChecked\"\r\n                      [color]=\"color()\"\r\n                      [disabled]=\"disabled\"\r\n                      (change)=\"onChange()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\r\n                  />\r\n                } @else {\r\n                  <ng-template\r\n                    #defaultCellTemplate\r\n                    let-content\r\n                  >\r\n                    {{ content }}\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                  />\r\n                }\r\n              </div>\r\n            </ng-template>\r\n            @if (!row.dataColumns()[$index].isRowHeader) {\r\n              <td\r\n                class=\"ard-table__body-cell\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </td>\r\n            } @else {\r\n              <th\r\n                class=\"ard-table__body-cell ard-table__row-header\"\r\n                scope=\"row\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n  @if (canDisplayPagination()) {\r\n    <tfoot class=\"ard-table__foot\">\r\n      <tr class=\"ard-table__foot-row\">\r\n        <td\r\n          class=\"ard-table__pagination-cell\"\r\n          colspan=\"9999\"\r\n        >\r\n          <ard-table-pagination\r\n            [options]=\"paginationOptions()\"\r\n            [totalItems]=\"totalItems()!\"\r\n            [disabled]=\"paginationDisabled()\"\r\n            [(itemsPerPage)]=\"itemsPerPage\"\r\n            [(page)]=\"page\"\r\n            [align]=\"paginationAlign()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [itemsPerPageText]=\"itemsPerPageText()\"\r\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n          />\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n  }\r\n</table>\r\n", styles: ["ard-table{display:block}.ard-table__cell-container,.ard-table__header-template-container{width:100%;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: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["totalItems", "options", "itemsPerPage", "page", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: ["value", "bufferValue", "color", "variant", "size", "mode", "hideValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  class=\"ard-table\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (caption()) {\r\n    <caption class=\"ard-table__caption\">\r\n      <div class=\"ard-table__caption-container\">\r\n        <ng-template\r\n          #defaultCaptionTemplate\r\n          let-captionText\r\n        >\r\n          {{ captionText }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\r\n        />\r\n      </div>\r\n    </caption>\r\n  }\r\n  <thead class=\"ard-table__header\">\r\n    @for (row of headerCells(); track $index) {\r\n      <tr class=\"ard-table__header-row\">\r\n        @for (cell of row; track $index) {\r\n          <th\r\n            class=\"ard-table__header-cell\"\r\n            [ngClass]=\"cell.cell().cellClass\"\r\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n            [attr.colspan]=\"cell.colspan()\"\r\n            [attr.rowspan]=\"cell.rowspan()\"\r\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\r\n          >\r\n            <div\r\n              class=\"ard-table__cell-container\"\r\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n              [style.width]=\"cell.width\"\r\n              [style.minWidth]=\"cell.minWidth\"\r\n            >\r\n              @if (isHeaderCellCheckbox(cell)) {\r\n                <ng-template\r\n                  #defaultHeaderCheckboxTemplate\r\n                  let-state\r\n                  let-onChange=\"onChange\"\r\n                >\r\n                  <ard-checkbox\r\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                    [state]=\"state\"\r\n                    [color]=\"getHeaderCheckboxColor()\"\r\n                    unselectedColor=\"currentColor\"\r\n                    (change)=\"onChange()\"\r\n                  />\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                />\r\n              } @else {\r\n                <ng-template\r\n                  #defaultHeaderCellTemplate\r\n                  let-content\r\n                  let-sortable=\"sortable\"\r\n                  let-sortType=\"sortType\"\r\n                  let-onTriggerSort=\"onTriggerSort\"\r\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                >\r\n                  <div\r\n                    class=\"ard-table__header-template-container\"\r\n                    [class.ard-sortable]=\"sortable\"\r\n                    [class.ard-nonsortable]=\"!sortable\"\r\n                  >\r\n                    @if (sortable) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"ard-table__header-content-container\"\r\n                        (click)=\"onTriggerSort($event)\"\r\n                        [tabindex]=\"tabIndex()\"\r\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                      >\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                        @if (sortType !== null) {\r\n                          <div class=\"ard-table__header-sort-icon\">\r\n                            @if (sortType === 'ascending') {\r\n                              <ard-icon>south</ard-icon>\r\n                            } @else if (sortType === 'descending') {\r\n                              <ard-icon>north</ard-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </button>\r\n                    } @else {\r\n                      <div class=\"ard-table__header-content-container\">\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\r\n                />\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    }\r\n    <tr class=\"ard-table__progress-bar-row\">\r\n      <th\r\n        class=\"ard-table__progress-bar-cell\"\r\n        colspan=\"9999\"\r\n      >\r\n        @if (isLoading()) {\r\n          <ard-progress-bar\r\n            [value]=\"loadingProgress()\"\r\n            [bufferValue]=\"loadingProgressBuffer()\"\r\n            [mode]=\"loadingBarMode()\"\r\n            [color]=\"loadingBarColor()\"\r\n            variant=\"sharp\"\r\n            hideValue\r\n          />\r\n        }\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"ard-table__body\">\r\n    @for (row of dataRows(); track $index) {\r\n      @if (row.isEmpty()) {\r\n        <tr class=\"ard-table__empty-row\">\r\n          <td\r\n            class=\"ard-table__empty-cell\"\r\n            colspan=\"9999\"\r\n          ></td>\r\n        </tr>\r\n      } @else {\r\n        <tr\r\n          class=\"ard-table__body-row\"\r\n          [class.ard-table__selected-row]=\"row.selected()\"\r\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\r\n          [class.ard-table__disabled-row]=\"row.disabled()\"\r\n          [class.ard-table__bold-row]=\"row.bold()\"\r\n          (click)=\"onRowClick(row, $event)\"\r\n          (mouseover)=\"onRowMouseOver($event)\"\r\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\r\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\r\n        >\r\n          @for (cell of row.data(); track $index) {\r\n            <ng-template #cellTmp>\r\n              <div\r\n                class=\"ard-table__cell-container\"\r\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\r\n              >\r\n                @if (isCellCheckbox(cell)) {\r\n                  <ng-template\r\n                    #defaultCheckboxTemplate\r\n                    let-isChecked\r\n                    let-onChange=\"onChange\"\r\n                    let-disabled=\"disabled\"\r\n                  >\r\n                    <ard-checkbox\r\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                      [selected]=\"isChecked\"\r\n                      [color]=\"color()\"\r\n                      [disabled]=\"disabled\"\r\n                      (change)=\"onChange()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\r\n                  />\r\n                } @else {\r\n                  <ng-template\r\n                    #defaultCellTemplate\r\n                    let-content\r\n                  >\r\n                    {{ content }}\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                  />\r\n                }\r\n              </div>\r\n            </ng-template>\r\n            @if (!row.dataColumns()[$index].isRowHeader) {\r\n              <td\r\n                class=\"ard-table__body-cell\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </td>\r\n            } @else {\r\n              <th\r\n                class=\"ard-table__body-cell ard-table__row-header\"\r\n                scope=\"row\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n  @if (canDisplayPagination()) {\r\n    <tfoot class=\"ard-table__foot\">\r\n      <tr class=\"ard-table__foot-row\">\r\n        <td\r\n          class=\"ard-table__pagination-cell\"\r\n          colspan=\"9999\"\r\n        >\r\n          <ard-table-pagination\r\n            [options]=\"paginationOptions()\"\r\n            [totalItems]=\"totalItems()!\"\r\n            [disabled]=\"paginationDisabled()\"\r\n            [(itemsPerPage)]=\"itemsPerPage\"\r\n            [(page)]=\"page\"\r\n            [align]=\"paginationAlign()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [itemsPerPageText]=\"itemsPerPageText()\"\r\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n          />\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n  }\r\n</table>\r\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"] }]
+            args: [{ standalone: false, selector: 'ard-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  class=\"ard-table\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (caption()) {\r\n    <caption class=\"ard-table__caption\">\r\n      <div class=\"ard-table__caption-container\">\r\n        <ng-template\r\n          #defaultCaptionTemplate\r\n          let-captionText\r\n        >\r\n          {{ captionText }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\r\n        />\r\n      </div>\r\n    </caption>\r\n  }\r\n  <thead class=\"ard-table__header\">\r\n    @for (row of headerCells(); track $index) {\r\n      <tr class=\"ard-table__header-row\">\r\n        @for (cell of row; track $index) {\r\n          <th\r\n            class=\"ard-table__header-cell\"\r\n            [ngClass]=\"cell.cell().cellClass\"\r\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n            [attr.colspan]=\"cell.colspan()\"\r\n            [attr.rowspan]=\"cell.rowspan()\"\r\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\r\n          >\r\n            <div\r\n              class=\"ard-table__cell-container\"\r\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n              [style.width]=\"cell.width\"\r\n              [style.minWidth]=\"cell.minWidth\"\r\n            >\r\n              @if (isHeaderCellCheckbox(cell)) {\r\n                <ng-template\r\n                  #defaultHeaderCheckboxTemplate\r\n                  let-state\r\n                  let-onChange=\"onChange\"\r\n                >\r\n                  <ard-checkbox\r\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                    [state]=\"state\"\r\n                    [color]=\"getHeaderCheckboxColor()\"\r\n                    unselectedColor=\"currentColor\"\r\n                    (change)=\"onChange()\"\r\n                  />\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                />\r\n              } @else {\r\n                <ng-template\r\n                  #defaultHeaderCellTemplate\r\n                  let-content\r\n                  let-sortable=\"sortable\"\r\n                  let-sortType=\"sortType\"\r\n                  let-onTriggerSort=\"onTriggerSort\"\r\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                >\r\n                  <div\r\n                    class=\"ard-table__header-template-container\"\r\n                    [class.ard-sortable]=\"sortable\"\r\n                    [class.ard-nonsortable]=\"!sortable\"\r\n                  >\r\n                    @if (sortable) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"ard-table__header-content-container\"\r\n                        (click)=\"onTriggerSort($event)\"\r\n                        [tabindex]=\"tabIndex()\"\r\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                      >\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                        @if (sortType !== null) {\r\n                          <div class=\"ard-table__header-sort-icon\">\r\n                            @if (sortType === 'ascending') {\r\n                              <ard-icon>south</ard-icon>\r\n                            } @else if (sortType === 'descending') {\r\n                              <ard-icon>north</ard-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </button>\r\n                    } @else {\r\n                      <div class=\"ard-table__header-content-container\">\r\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\r\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\r\n                />\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    }\r\n    <tr class=\"ard-table__progress-bar-row\">\r\n      <th\r\n        class=\"ard-table__progress-bar-cell\"\r\n        colspan=\"9999\"\r\n      >\r\n        @if (isLoading()) {\r\n          <ard-progress-bar\r\n            [value]=\"loadingProgress()\"\r\n            [bufferValue]=\"loadingProgressBuffer()\"\r\n            [mode]=\"loadingBarMode()\"\r\n            [color]=\"loadingBarColor()\"\r\n            variant=\"sharp\"\r\n            hideValue\r\n          />\r\n        }\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"ard-table__body\">\r\n    @for (row of dataRows(); track $index) {\r\n      @if (row.isEmpty()) {\r\n        <tr class=\"ard-table__empty-row\">\r\n          <td\r\n            class=\"ard-table__empty-cell\"\r\n            colspan=\"9999\"\r\n          ></td>\r\n        </tr>\r\n      } @else {\r\n        <tr\r\n          class=\"ard-table__body-row\"\r\n          [class.ard-table__selected-row]=\"row.selected()\"\r\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\r\n          [class.ard-table__disabled-row]=\"row.disabled()\"\r\n          [class.ard-table__bold-row]=\"row.bold()\"\r\n          (click)=\"onRowClick(row, $event)\"\r\n          (mouseover)=\"onRowMouseOver($event)\"\r\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\r\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\r\n        >\r\n          @for (cell of row.data(); track $index) {\r\n            <ng-template #cellTmp>\r\n              <div\r\n                class=\"ard-table__cell-container\"\r\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\r\n              >\r\n                @if (isCellCheckbox(cell)) {\r\n                  <ng-template\r\n                    #defaultCheckboxTemplate\r\n                    let-isChecked\r\n                    let-onChange=\"onChange\"\r\n                    let-disabled=\"disabled\"\r\n                  >\r\n                    <ard-checkbox\r\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\r\n                      [selected]=\"isChecked\"\r\n                      [color]=\"color()\"\r\n                      [disabled]=\"disabled\"\r\n                      (change)=\"onChange()\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\r\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\r\n                  />\r\n                } @else {\r\n                  <ng-template\r\n                    #defaultCellTemplate\r\n                    let-content\r\n                  >\r\n                    {{ content }}\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                  />\r\n                }\r\n              </div>\r\n            </ng-template>\r\n            @if (!row.dataColumns()[$index].isRowHeader) {\r\n              <td\r\n                class=\"ard-table__body-cell\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </td>\r\n            } @else {\r\n              <th\r\n                class=\"ard-table__body-cell ard-table__row-header\"\r\n                scope=\"row\"\r\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n              >\r\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n              </th>\r\n            }\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n  @if (canDisplayPagination()) {\r\n    <tfoot class=\"ard-table__foot\">\r\n      <tr class=\"ard-table__foot-row\">\r\n        <td\r\n          class=\"ard-table__pagination-cell\"\r\n          colspan=\"9999\"\r\n        >\r\n          <ard-table-pagination\r\n            [options]=\"paginationOptions()\"\r\n            [totalItems]=\"totalItems()!\"\r\n            [disabled]=\"paginationDisabled()\"\r\n            [(itemsPerPage)]=\"itemsPerPage\"\r\n            [(page)]=\"page\"\r\n            [align]=\"paginationAlign()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [itemsPerPageText]=\"itemsPerPageText()\"\r\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n          />\r\n        </td>\r\n      </tr>\r\n    </tfoot>\r\n  }\r\n</table>\r\n", styles: ["ard-table{display:block}.ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_TABLE_DEFAULTS]
@@ -15474,11 +15471,11 @@ class ArdiumTableFromCsvComponent {
         return dataRows;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTableFromCsvComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTableFromCsvComponent, isStandalone: false, selector: "ard-table-from-csv", inputs: { selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, stringData: { classPropertyName: "stringData", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<ard-table\r\n  treatDataSourceAsString\r\n  [columns]=\"headers()\"\r\n  [data]=\"dataRows()\"\r\n  [selectableRows]=\"selectableRows()\"\r\n  [maxSelectedItems]=\"maxSelectedItems()\"\r\n  [clickableRows]=\"clickableRows()\"\r\n  [isLoading]=\"isLoading()\"\r\n  [loadingProgress]=\"loadingProgress()\"\r\n  [caption]=\"caption()\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [color]=\"color()\"\r\n  [align]=\"align()\"\r\n  [headerAlign]=\"headerAlign()\"\r\n  [compact]=\"compact()\"\r\n  [zebra]=\"zebra()\"\r\n  [stickyHeader]=\"stickyHeader()\"\r\n  [paginated]=\"paginated()\"\r\n  [paginationStrategy]=\"paginationStrategy()\"\r\n  [totalItems]=\"totalItems()\"\r\n  [paginationColor]=\"paginationColor()\"\r\n  [paginationAlign]=\"paginationAlign()\"\r\n  [itemsPerPageText]=\"itemsPerPageText()\"\r\n  [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n  [pageFillRemaining]=\"pageFillRemaining()\"\r\n  [paginationDisabled]=\"paginationDisabled()\"\r\n  [useFirstLastButtons]=\"useFirstLastButtons()\"\r\n  [(itemsPerPage)]=\"itemsPerPage\"\r\n  [(page)]=\"page\"\r\n/>\r\n", dependencies: [{ kind: "component", type: ArdiumTableComponent, selector: "ard-table", inputs: ["rowDisabledFrom", "rowBoldFrom", "invertRowDisabled", "invertRowBold", "selectableRows", "maxSelectedItems", "clickableRows", "caption", "isLoading", "loadingProgress", "loadingProgressBuffer", "loadingBarMode", "loadingBarColor", "appearance", "variant", "color", "align", "headerAlign", "compact", "zebra", "stickyHeader", "paginated", "paginationStrategy", "paginationOptions", "totalItems", "paginationColor", "paginationAlign", "itemsPerPageText", "currentItemsFormatFn", "pageFillRemaining", "paginationDisabled", "useFirstLastButtons", "itemsPerPage", "page", "columns", "data", "treatDataSourceAsString"], outputs: ["itemsPerPageChange", "pageChange", "selectedRowsChange", "failedSelectRow", "selectRow", "unselectRow", "clickRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTableFromCsvComponent, isStandalone: false, selector: "ard-table-from-csv", inputs: { selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, stringData: { classPropertyName: "stringData", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<ard-table\r\n  treatDataSourceAsString\r\n  [columns]=\"headers()\"\r\n  [data]=\"dataRows()\"\r\n  [selectableRows]=\"selectableRows()\"\r\n  [maxSelectedItems]=\"maxSelectedItems()\"\r\n  [clickableRows]=\"clickableRows()\"\r\n  [isLoading]=\"isLoading()\"\r\n  [loadingProgress]=\"loadingProgress()\"\r\n  [caption]=\"caption()\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [color]=\"color()\"\r\n  [align]=\"align()\"\r\n  [headerAlign]=\"headerAlign()\"\r\n  [compact]=\"compact()\"\r\n  [zebra]=\"zebra()\"\r\n  [stickyHeader]=\"stickyHeader()\"\r\n  [paginated]=\"paginated()\"\r\n  [paginationStrategy]=\"paginationStrategy()\"\r\n  [totalItems]=\"totalItems()\"\r\n  [paginationColor]=\"paginationColor()\"\r\n  [paginationAlign]=\"paginationAlign()\"\r\n  [itemsPerPageText]=\"itemsPerPageText()\"\r\n  [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n  [pageFillRemaining]=\"pageFillRemaining()\"\r\n  [paginationDisabled]=\"paginationDisabled()\"\r\n  [useFirstLastButtons]=\"useFirstLastButtons()\"\r\n  [(itemsPerPage)]=\"itemsPerPage\"\r\n  [(page)]=\"page\"\r\n/>\r\n", styles: ["ard-table-from-csv{display:block}\n"], dependencies: [{ kind: "component", type: ArdiumTableComponent, selector: "ard-table", inputs: ["rowDisabledFrom", "rowBoldFrom", "invertRowDisabled", "invertRowBold", "selectableRows", "maxSelectedItems", "clickableRows", "caption", "isLoading", "loadingProgress", "loadingProgressBuffer", "loadingBarMode", "loadingBarColor", "appearance", "variant", "color", "align", "headerAlign", "compact", "zebra", "stickyHeader", "paginated", "paginationStrategy", "paginationOptions", "totalItems", "paginationColor", "paginationAlign", "itemsPerPageText", "currentItemsFormatFn", "pageFillRemaining", "paginationDisabled", "useFirstLastButtons", "itemsPerPage", "page", "columns", "data", "treatDataSourceAsString"], outputs: ["itemsPerPageChange", "pageChange", "selectedRowsChange", "failedSelectRow", "selectRow", "unselectRow", "clickRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTableFromCsvComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-table-from-csv', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-table\r\n  treatDataSourceAsString\r\n  [columns]=\"headers()\"\r\n  [data]=\"dataRows()\"\r\n  [selectableRows]=\"selectableRows()\"\r\n  [maxSelectedItems]=\"maxSelectedItems()\"\r\n  [clickableRows]=\"clickableRows()\"\r\n  [isLoading]=\"isLoading()\"\r\n  [loadingProgress]=\"loadingProgress()\"\r\n  [caption]=\"caption()\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [color]=\"color()\"\r\n  [align]=\"align()\"\r\n  [headerAlign]=\"headerAlign()\"\r\n  [compact]=\"compact()\"\r\n  [zebra]=\"zebra()\"\r\n  [stickyHeader]=\"stickyHeader()\"\r\n  [paginated]=\"paginated()\"\r\n  [paginationStrategy]=\"paginationStrategy()\"\r\n  [totalItems]=\"totalItems()\"\r\n  [paginationColor]=\"paginationColor()\"\r\n  [paginationAlign]=\"paginationAlign()\"\r\n  [itemsPerPageText]=\"itemsPerPageText()\"\r\n  [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n  [pageFillRemaining]=\"pageFillRemaining()\"\r\n  [paginationDisabled]=\"paginationDisabled()\"\r\n  [useFirstLastButtons]=\"useFirstLastButtons()\"\r\n  [(itemsPerPage)]=\"itemsPerPage\"\r\n  [(page)]=\"page\"\r\n/>\r\n" }]
+            args: [{ standalone: false, selector: 'ard-table-from-csv', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-table\r\n  treatDataSourceAsString\r\n  [columns]=\"headers()\"\r\n  [data]=\"dataRows()\"\r\n  [selectableRows]=\"selectableRows()\"\r\n  [maxSelectedItems]=\"maxSelectedItems()\"\r\n  [clickableRows]=\"clickableRows()\"\r\n  [isLoading]=\"isLoading()\"\r\n  [loadingProgress]=\"loadingProgress()\"\r\n  [caption]=\"caption()\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [color]=\"color()\"\r\n  [align]=\"align()\"\r\n  [headerAlign]=\"headerAlign()\"\r\n  [compact]=\"compact()\"\r\n  [zebra]=\"zebra()\"\r\n  [stickyHeader]=\"stickyHeader()\"\r\n  [paginated]=\"paginated()\"\r\n  [paginationStrategy]=\"paginationStrategy()\"\r\n  [totalItems]=\"totalItems()\"\r\n  [paginationColor]=\"paginationColor()\"\r\n  [paginationAlign]=\"paginationAlign()\"\r\n  [itemsPerPageText]=\"itemsPerPageText()\"\r\n  [currentItemsFormatFn]=\"currentItemsFormatFn()\"\r\n  [pageFillRemaining]=\"pageFillRemaining()\"\r\n  [paginationDisabled]=\"paginationDisabled()\"\r\n  [useFirstLastButtons]=\"useFirstLastButtons()\"\r\n  [(itemsPerPage)]=\"itemsPerPage\"\r\n  [(page)]=\"page\"\r\n/>\r\n", styles: ["ard-table-from-csv{display:block}\n"] }]
         }] });
 
 class ArdiumTableFromCsvModule {
@@ -15516,11 +15513,11 @@ class ArdiumTextListComponent {
         this.filter = input(false, { transform: v => coerceBooleanProperty(v) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTextListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTextListComponent, isStandalone: false, 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: "19.2.15", type: ArdiumTextListComponent, isStandalone: false, 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: ["ard-text-list{display:inline}\n"], dependencies: [{ kind: "pipe", type: ArdiumTextListPipe, name: "ardTextList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTextListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-text-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ values() | ardTextList: separator() : filter() }}\r\n" }]
+            args: [{ standalone: false, selector: 'ard-text-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "{{ values() | ardTextList: separator() : filter() }}\r\n", styles: ["ard-text-list{display:inline}\n"] }]
         }] });
 
 class ArdiumTextListModule {
@@ -16297,7 +16294,7 @@ class ArdiumTabComponent {
         this.selectedChangeInternal$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, tabTitle: { classPropertyName: "tabTitle", publicName: "tabTitle", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", selectedChange: "selectedChange" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.ard-tab-disabled": "disabled()", "class.ard-tab-selected": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, tabTitle: { classPropertyName: "tabTitle", publicName: "tabTitle", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", selectedChange: "selectedChange" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.ard-tab-disabled": "disabled()", "class.ard-tab-selected": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["ard-tab{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, decorators: [{
             type: Component,
@@ -16305,7 +16302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         role: 'tabpanel',
                         '[class.ard-tab-disabled]': 'disabled()',
                         '[class.ard-tab-selected]': 'selected()',
-                    }, template: "<ng-content></ng-content>\r\n" }]
+                    }, template: "<ng-content></ng-content>\r\n", styles: ["ard-tab{display:block}\n"] }]
         }], propDecorators: { _selected: [{
                 type: Input,
                 args: ['selected']
@@ -16467,11 +16464,11 @@ class ArdiumTabberComponent {
         this.focusedTabId.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabId: "selectedTabChange", focusEvent: "focus", blurEvent: "blur" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdTabberLabelTemplateDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tabObj.tab.tabId()\"\r\n        [class.ard-tab-disabled]=\"tabObj.tab.disabled()\"\r\n        [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n        [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n        [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n        [title]=\"tabObj.tab.tabTitle()\"\r\n        (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n        (focus)=\"onTabFocus(tabObj.tab)\"\r\n        (blur)=\"onTabBlur(tabObj.tab)\"\r\n        [tabindex]=\"tabObj.tab.disabled() ? -1 : tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultLabelTemplate\r\n            let-label\r\n          >\r\n            {{ label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n            [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n          />\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabId: "selectedTabChange", focusEvent: "focus", blurEvent: "blur" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdTabberLabelTemplateDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tabObj.tab.tabId()\"\r\n        [class.ard-tab-disabled]=\"tabObj.tab.disabled()\"\r\n        [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n        [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n        [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n        [title]=\"tabObj.tab.tabTitle()\"\r\n        (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n        (focus)=\"onTabFocus(tabObj.tab)\"\r\n        (blur)=\"onTabBlur(tabObj.tab)\"\r\n        [tabindex]=\"tabObj.tab.disabled() ? -1 : tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultLabelTemplate\r\n            let-label\r\n          >\r\n            {{ label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n            [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n          />\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["ard-tabber{display:block}.ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tabObj.tab.tabId()\"\r\n        [class.ard-tab-disabled]=\"tabObj.tab.disabled()\"\r\n        [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n        [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n        [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n        [title]=\"tabObj.tab.tabTitle()\"\r\n        (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n        (focus)=\"onTabFocus(tabObj.tab)\"\r\n        (blur)=\"onTabBlur(tabObj.tab)\"\r\n        [tabindex]=\"tabObj.tab.disabled() ? -1 : tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultLabelTemplate\r\n            let-label\r\n          >\r\n            {{ label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n            [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n          />\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
+            args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tabObj.tab.tabId()\"\r\n        [class.ard-tab-disabled]=\"tabObj.tab.disabled()\"\r\n        [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n        [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n        [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n        [title]=\"tabObj.tab.tabTitle()\"\r\n        (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n        (focus)=\"onTabFocus(tabObj.tab)\"\r\n        (blur)=\"onTabBlur(tabObj.tab)\"\r\n        [tabindex]=\"tabObj.tab.disabled() ? -1 : tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultLabelTemplate\r\n            let-label\r\n          >\r\n            {{ label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n            [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n          />\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["ard-tabber{display:block}.ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
         }] });
 
 class ArdiumTabberModule {
@@ -16969,11 +16966,11 @@ class _ArdSimpleSnackbarComponent {
         return `ard-color-${this.color}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _ArdSimpleSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: _ArdSimpleSnackbarComponent, isStandalone: true, selector: "ard-simple-snackbar", ngImport: i0, template: "<div\r\n  class=\"ard-snackbar\"\r\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\r\n  [class]=\"colorClass\"\r\n>\r\n  <div class=\"ard-snackbar-content\">\r\n    @if (typeIcon) {\r\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\r\n    }\r\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\r\n  </div>\r\n  @if (data.action) {\r\n    <ard-button\r\n      class=\"ard-snackbar-action\"\r\n      appearance=\"transparent\"\r\n      lightColoring\r\n      [color]=\"color\"\r\n      (click)=\"closeWithAction()\"\r\n      >{{ data.action }}</ard-button\r\n    >\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ArdiumIconModule }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: _ArdSimpleSnackbarComponent, isStandalone: true, selector: "ard-simple-snackbar", ngImport: i0, template: "<div\r\n  class=\"ard-snackbar\"\r\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\r\n  [class]=\"colorClass\"\r\n>\r\n  <div class=\"ard-snackbar-content\">\r\n    @if (typeIcon) {\r\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\r\n    }\r\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\r\n  </div>\r\n  @if (data.action) {\r\n    <ard-button\r\n      class=\"ard-snackbar-action\"\r\n      appearance=\"transparent\"\r\n      lightColoring\r\n      [color]=\"color\"\r\n      (click)=\"closeWithAction()\"\r\n      >{{ data.action }}</ard-button\r\n    >\r\n  }\r\n</div>\r\n", styles: ["ard-simple-snackbar{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ArdiumIconModule }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _ArdSimpleSnackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-simple-snackbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArdiumButtonModule, AsyncPipe, ArdiumIconModule], standalone: true, template: "<div\r\n  class=\"ard-snackbar\"\r\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\r\n  [class]=\"colorClass\"\r\n>\r\n  <div class=\"ard-snackbar-content\">\r\n    @if (typeIcon) {\r\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\r\n    }\r\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\r\n  </div>\r\n  @if (data.action) {\r\n    <ard-button\r\n      class=\"ard-snackbar-action\"\r\n      appearance=\"transparent\"\r\n      lightColoring\r\n      [color]=\"color\"\r\n      (click)=\"closeWithAction()\"\r\n      >{{ data.action }}</ard-button\r\n    >\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'ard-simple-snackbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArdiumButtonModule, AsyncPipe, ArdiumIconModule], standalone: true, template: "<div\r\n  class=\"ard-snackbar\"\r\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\r\n  [class]=\"colorClass\"\r\n>\r\n  <div class=\"ard-snackbar-content\">\r\n    @if (typeIcon) {\r\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\r\n    }\r\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\r\n  </div>\r\n  @if (data.action) {\r\n    <ard-button\r\n      class=\"ard-snackbar-action\"\r\n      appearance=\"transparent\"\r\n      lightColoring\r\n      [color]=\"color\"\r\n      (click)=\"closeWithAction()\"\r\n      >{{ data.action }}</ard-button\r\n    >\r\n  }\r\n</div>\r\n", styles: ["ard-simple-snackbar{display:block}\n"] }]
         }] });
 
 const _snackbarDefaults = {