npm - @ardium-ui/ui - Versions diffs - 4.1.1 → 4.1.2 - Mend

@ardium-ui/ui 4.1.1 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (313) hide show

package/fesm2022/ardium-ui-ui.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import 'first-last';
 import { AutofillMonitor, CdkAutofill } from '@angular/cdk/text-field';
 import * as i0 from '@angular/core';
-import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, runInInjectionContext, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injectable } from '@angular/core';
+import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, runInInjectionContext, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, contentChildren, Renderer2, Injectable } from '@angular/core';
 import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i4 from '@ardium-ui/devkit';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, coerceDateProperty, ArdiumHoldEventModule } from '@ardium-ui/devkit';
@@ -896,11 +896,11 @@ class _ClearButtonComponent extends _FocusableComponentBase {
         super(_focusableComponentDefaults);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _ClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: _ClearButtonComponent, selector: "ard-clear-button", usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  class=\"ard-clear-btn-wrapper\"\n  type=\"button\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div\n    class=\"ard-clear-btn\"\n    aria-hidden=\"true\"\n  ></div>\n</button>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: _ClearButtonComponent, selector: "ard-clear-button", usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  class=\"ard-clear-btn-wrapper\"\r\n  type=\"button\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-clear-btn\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n</button>\r\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _ClearButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-clear-button', template: "<button\n  #focusableElement\n  class=\"ard-clear-btn-wrapper\"\n  type=\"button\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div\n    class=\"ard-clear-btn\"\n    aria-hidden=\"true\"\n  ></div>\n</button>\n" }]
+            args: [{ selector: 'ard-clear-button', template: "<button\r\n  #focusableElement\r\n  class=\"ard-clear-btn-wrapper\"\r\n  type=\"button\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-clear-btn\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n</button>\r\n" }]
         }], ctorParameters: () => [] });
 class _ClearButtonModule {
@@ -1040,13 +1040,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: "18.2.13", ngImport: i0, type: ArdiumDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDropdownPanelComponent, 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\n  class=\"ard-dropdown-panel-container\"\n  [ngClass]=\"ngClasses()\"\n>\n  @if (headerTemplate()) {\n    <div class=\"ard-dropdown-header\">\n      <ng-template\n        [ngTemplateOutlet]=\"headerTemplate()\"\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\n      >\n      </ng-template>\n    </div>\n  }\n  <div\n    #scroll\n    class=\"ard-dropdown-panel-content\"\n    [attr.id]=\"panelId()\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (footerTemplate()) {\n    <div class=\"ard-dropdown-footer\">\n      <ng-template\n        [ngTemplateOutlet]=\"footerTemplate()\"\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\n      >\n      </ng-template>\n    </div>\n  }\n</div>\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: "18.2.13", type: ArdiumDropdownPanelComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-dropdown-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-open]': 'isOpen()',
-                    }, template: "<div\n  class=\"ard-dropdown-panel-container\"\n  [ngClass]=\"ngClasses()\"\n>\n  @if (headerTemplate()) {\n    <div class=\"ard-dropdown-header\">\n      <ng-template\n        [ngTemplateOutlet]=\"headerTemplate()\"\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\n      >\n      </ng-template>\n    </div>\n  }\n  <div\n    #scroll\n    class=\"ard-dropdown-panel-content\"\n    [attr.id]=\"panelId()\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (footerTemplate()) {\n    <div class=\"ard-dropdown-footer\">\n      <ng-template\n        [ngTemplateOutlet]=\"footerTemplate()\"\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\n      >\n      </ng-template>\n    </div>\n  }\n</div>\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:none}.ard-dropdown-panel.ard-open{display:block}\n"] }]
         }] });
 class ArdiumDropdownPanelModule {
@@ -1138,11 +1138,11 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
         this.isFocused.set(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: ArdiumFormFieldFrameComponent, 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\n  class=\"ard-form-field-frame\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-form-field-overlay\"></div>\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\n    <div class=\"ard-form-field-prefix-container\">\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n  <div class=\"ard-form-field-content-container\">\n    <ng-content></ng-content>\n  </div>\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\n    <div class=\"ard-form-field-suffix-container\">\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n</div>\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: "18.2.13", type: ArdiumFormFieldFrameComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldFrameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-form-field-frame', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-form-field-frame\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-form-field-overlay\"></div>\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\n    <div class=\"ard-form-field-prefix-container\">\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n  <div class=\"ard-form-field-content-container\">\n    <ng-content></ng-content>\n  </div>\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\n    <div class=\"ard-form-field-suffix-container\">\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n</div>\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: [{ 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FORM_FIELD_FRAME_DEFAULTS]
@@ -2026,7 +2026,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-input\"\n    #suggestionsHost\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayAutocomplete()) {\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\n      }\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n\n<ng-template #suggestionsTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\n    role=\"listbox\"\n    [compact]=\"compact\"\n    aria-label=\"Suggestions\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"shouldDisplaySuggestions()\"\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\n    (mousemove)=\"onMouseMove()\"\n  >\n    @for (item of suggestionItems(); track item.index) {\n      <div\n        class=\"ard-option\"\n        role=\"option\"\n        [class.ard-option-selected]=\"item.selected()\"\n        [class.ard-option-highlighted]=\"item.highlighted()\"\n        [attr.aria-selected]=\"item.selected()\"\n        (click)=\"selectSuggestion(item, $event)\"\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\n      >\n        <span class=\"ard-option-label\">\n          <ng-template #defaultOptionTemplate>\n            {{ item.label() }}\n          </ng-template>\n\n          <ng-template\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\n          ></ng-template>\n        </span>\n      </div>\n    }\n    @if (areSuggestionsLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\n    }\n  </ard-dropdown-panel>\n</ng-template>\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
@@ -2040,7 +2040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-input\"\n    #suggestionsHost\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayAutocomplete()) {\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\n      }\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n\n<ng-template #suggestionsTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\n    role=\"listbox\"\n    [compact]=\"compact\"\n    aria-label=\"Suggestions\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"shouldDisplaySuggestions()\"\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\n    (mousemove)=\"onMouseMove()\"\n  >\n    @for (item of suggestionItems(); track item.index) {\n      <div\n        class=\"ard-option\"\n        role=\"option\"\n        [class.ard-option-selected]=\"item.selected()\"\n        [class.ard-option-highlighted]=\"item.highlighted()\"\n        [attr.aria-selected]=\"item.selected()\"\n        (click)=\"selectSuggestion(item, $event)\"\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\n      >\n        <span class=\"ard-option-label\">\n          <ng-template #defaultOptionTemplate>\n            {{ item.label() }}\n          </ng-template>\n\n          <ng-template\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\n          ></ng-template>\n        </span>\n      </div>\n    }\n    @if (areSuggestionsLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\n    }\n  </ard-dropdown-panel>\n</ng-template>\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_INPUT_DEFAULTS]
@@ -2248,11 +2248,11 @@ class ArdiumIconComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumIconComponent, selector: "ard-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapperEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"ard-icon material-symbols-outlined\"\n  [attr.aria-hidden]=\"ariaLabel() !== undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [style]=\"fontVariationSettings()\"\n>\n  {{ icon() ?? contentWrapperEl.innerText | icon }}\n</span>\n\n<div\n  #contentWrapperEl\n  class=\"ard-icon-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"], dependencies: [{ kind: "pipe", type: ArdiumIconPipe, name: "icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumIconComponent, selector: "ard-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapperEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\r\n  class=\"ard-icon material-symbols-outlined\"\r\n  [attr.aria-hidden]=\"ariaLabel() !== undefined\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [style]=\"fontVariationSettings()\"\r\n>\r\n  {{ icon() ?? contentWrapperEl.innerText | icon }}\r\n</span>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-icon-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"], dependencies: [{ kind: "pipe", type: ArdiumIconPipe, name: "icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"ard-icon material-symbols-outlined\"\n  [attr.aria-hidden]=\"ariaLabel() !== undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [style]=\"fontVariationSettings()\"\n>\n  {{ icon() ?? contentWrapperEl.innerText | icon }}\n</span>\n\n<div\n  #contentWrapperEl\n  class=\"ard-icon-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"] }]
+            args: [{ selector: 'ard-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  class=\"ard-icon material-symbols-outlined\"\r\n  [attr.aria-hidden]=\"ariaLabel() !== undefined\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [style]=\"fontVariationSettings()\"\r\n>\r\n  {{ icon() ?? contentWrapperEl.innerText | icon }}\r\n</span>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-icon-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"] }]
         }] });
 class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
@@ -2390,7 +2390,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumPasswordInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-password-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value()\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n        [class.ard-revealed]=\"revealable() && revealed()\"\n      />\n    </div>\n\n    @if (revealable()) {\n      <button\n        class=\"ard-reveal-button\"\n        type=\"button\"\n        (click)=\"!holdToReveal() && toggleReveal()\"\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\n      >\n        <ng-template\n          #defaultRevealTemplate\n          let-revealed\n        >\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\n        />\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -2404,7 +2404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumPasswordInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-password-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value()\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n        [class.ard-revealed]=\"revealable() && revealed()\"\n      />\n    </div>\n\n    @if (revealable()) {\n      <button\n        class=\"ard-reveal-button\"\n        type=\"button\"\n        (click)=\"!holdToReveal() && toggleReveal()\"\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\n      >\n        <ng-template\n          #defaultRevealTemplate\n          let-revealed\n        >\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\n        />\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n" }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_PASSWORD_INPUT_DEFAULTS]
@@ -2533,7 +2533,7 @@ class ArdiumSimpleInputComponent extends _SimpleInputComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumSimpleInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-simple-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocusMaster($event)\"\n        (blur)=\"onBlurMaster($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-simple-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
             type: Component,
@@ -2547,7 +2547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumSimpleInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [hasError]=\"hasError()\"\n  [isSuccess]=\"isSuccess()\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-simple-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocusMaster($event)\"\n        (blur)=\"onBlurMaster($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-simple-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SIMPLE_INPUT_DEFAULTS]
@@ -3486,7 +3486,7 @@ class ArdiumDeletableChipComponent extends _FocusableComponentBase {
                 useExisting: forwardRef(() => ArdiumDeletableChipComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-chip-wrapper ard-chip-deletable\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-clear-button\n    [title]=\"deleteButtonTitle()\"\n    (click)=\"deleteEvent.emit($event)\"\n    [tabIndex]=\"tabIndex()\"\n  ></ard-clear-button>\n  <div class=\"ard-chip-content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\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-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: "18.2.13", ngImport: i0, type: ArdiumDeletableChipComponent, decorators: [{
             type: Component,
@@ -3496,7 +3496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumDeletableChipComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-chip-wrapper ard-chip-deletable\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-clear-button\n    [title]=\"deleteButtonTitle()\"\n    (click)=\"deleteEvent.emit($event)\"\n    [tabIndex]=\"tabIndex()\"\n  ></ard-clear-button>\n  <div class=\"ard-chip-content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\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-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]
@@ -4334,11 +4334,11 @@ class ArdiumChipComponent extends _DisablableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumChipComponent, deps: [{ token: ARD_CHIP_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumChipComponent, 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\n  class=\"ard-chip-wrapper ard-chip\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-chip-content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\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: "18.2.13", type: ArdiumChipComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-chip-wrapper ard-chip\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-chip-content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\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: [{ 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHIP_DEFAULTS]
@@ -4480,7 +4480,7 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ard-chip-wrapper ard-chip-selectable\"\n  [class.ard-chip-selected]=\"selected()\"\n  [ngClass]=\"ngClasses()\"\n  [title]=\"chipTitle()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"toggleSelected()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div\n    class=\"ard-chip-selection-icon\"\n    role=\"img\"\n  ></div>\n  <div class=\"ard-chip-content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</button>\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]=\"selected()\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
             type: Component,
@@ -4490,7 +4490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  type=\"button\"\n  class=\"ard-chip-wrapper ard-chip-selectable\"\n  [class.ard-chip-selected]=\"selected()\"\n  [ngClass]=\"ngClasses()\"\n  [title]=\"chipTitle()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"toggleSelected()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div\n    class=\"ard-chip-selection-icon\"\n    role=\"img\"\n  ></div>\n  <div class=\"ard-chip-content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</button>\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]=\"selected()\"\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECTABLE_CHIP_DEFAULTS]
@@ -4612,7 +4612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
-class _FileInputComponentBase extends _NgModelComponentBase {
+class _FileInputComponentBase extends _FormFieldComponentBase {
     constructor() {
         super(...arguments);
         this.fileInputEl = viewChild('fileInput');
@@ -4639,7 +4639,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
     ngOnInit() {
         super.ngOnInit();
         if (!(window.File && window.FileReader && window.Blob)) {
-            console.error(new Error(`ARD-${this.componentId}0: Cannot use Ardium UI file features because this browser does not support file handling!`));
+            console.error(new Error(`ARD-FT${this.componentId}0: Cannot use Ardium UI file features because this browser does not support file handling!`));
         }
     }
     ngAfterViewInit() {
@@ -4659,10 +4659,26 @@ class _FileInputComponentBase extends _NgModelComponentBase {
         this._writeValue(v, false);
     }
     _writeValue(v, emitEvents = true) {
+        if (!(v instanceof File) && !Array.isArray(v) && v !== null) {
+            console.error(new Error(`ARD-FT${this.componentId}1: <ard-file-input>'s value must be a File, an array of Files, or null.`));
+            return;
+        }
         if (v instanceof File) {
             v = [v];
         }
-        this.currentViewState.set('uploaded');
+        if (Array.isArray(v) && !this.multiple() && v.length > 1) {
+            console.warn(`ARD-WA${this.componentId}2: <ard-file-input> received an array of files but the 'multiple' input is not set to true. Only the first file will be used.`);
+            v = [v[0]];
+        }
+        if (Array.isArray(v) && v.length === 0) {
+            v = null;
+        }
+        if (v === null) {
+            this.currentViewState.set('idle');
+        }
+        else {
+            this.currentViewState.set('uploaded');
+        }
         this._value = v;
         if (this._wasViewInit)
             this._updateElementValue();
@@ -4950,13 +4966,13 @@ class ArdiumButtonComponent extends _ButtonBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumButtonComponent, deps: [{ token: ARD_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumButtonComponent, selector: "ard-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignIcon: { classPropertyName: "alignIcon", publicName: "alignIcon", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\n  #buttonElement\n  class=\"ard-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  @if (icon()) {\n    <div class=\"ard-button-icon\">\n      {{ icon() }}\n    </div>\n  }\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumButtonComponent, selector: "ard-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignIcon: { classPropertyName: "alignIcon", publicName: "alignIcon", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", 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  #buttonElement\r\n  class=\"ard-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (icon()) {\r\n    <div class=\"ard-button-icon\">\r\n      {{ icon() }}\r\n    </div>\r\n  }\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\n  #buttonElement\n  class=\"ard-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  @if (icon()) {\n    <div class=\"ard-button-icon\">\n      {{ icon() }}\n    </div>\n  }\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\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  class=\"ard-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (icon()) {\r\n    <div class=\"ard-button-icon\">\r\n      {{ icon() }}\r\n    </div>\r\n  }\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_BUTTON_DEFAULTS]
@@ -4973,9 +4989,9 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
         //! triggering file dialog
         this._wasMousedownOnElement = null;
         //! templates
-        this.idleTemplate = null;
-        this.dragoverTemplate = null;
-        this.uploadedTemplate = null;
+        this.idleTemplate = contentChild(ArdiumFileDropAreaIdleContentTemplateDirective);
+        this.dragoverTemplate = contentChild(ArdiumFileDropAreaDragoverContentTemplateDirective);
+        this.uploadedTemplate = contentChild(ArdiumFileDropAreaUploadedContentTemplateDirective);
     }
     onMousedown() {
         this._wasMousedownOnElement = true;
@@ -4996,6 +5012,9 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
     getDragoverContext() {
         return {
             amount: this._draggedFiles,
+            browse: () => {
+                this.openBrowseDialog();
+            },
         };
     }
     getUploadedContext() {
@@ -5004,33 +5023,21 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
             $implicit: files,
             amount: files.length,
             files,
+            browse: () => {
+                this.openBrowseDialog();
+            },
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: [{ token: ARD_FILE_DROP_AREA_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n      }\r\n      @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        ></ng-template>\r\n      }\r\n      @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-drop-area-input-element\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [id]=\"htmlId()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n      <span>Drag & Drop a file</span>\r\n    } @else {\r\n      <span>Drag & Drop files</span>\r\n    }\r\n    here\r\n  </strong>\r\n  <span class=\"ard-file-drop-area-or-text\">or</span>\r\n  <ard-button\r\n    class=\"ard-file-drop-area-browse-button\"\r\n    appearance=\"transparent\"\r\n    [compact]=\"compact()\"\r\n    [variant]=\"variant()\"\r\n    [color]=\"color()\"\r\n    (click)=\"browse()\"\r\n    >Browse files</ard-button\r\n  >\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n  <span class=\"ard-file-drop-area-dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n  @if (amount > 1 && !multiple()) {\r\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-drop-area-uploaded-container\">\r\n    <div class=\"ard-file-drop-area-uploaded-message\">\r\n      <span class=\"ard-file-drop-area-uploaded-amount\">\r\n        {{ amount }}\r\n        <ng-container [ngPlural]=\"amount\">\r\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n          <ng-template ngPluralCase=\"other\">files</ng-template>\r\n        </ng-container>\r\n      </span>\r\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n    </div>\r\n    <div class=\"ard-file-drop-area-uploaded-files\">\r\n      @for (file of files; track $index) {\r\n        <div class=\"ard-file-drop-area-file\">\r\n          <ard-icon>draft</ard-icon>\r\n          <div class=\"ard-file-drop-area-file-info\">\r\n            <span class=\"ard-file-drop-area-filename\">\r\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\r\n            </span>\r\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFilesizePipe, name: "filesize" }, { kind: "pipe", type: i4.ArdiumFilenamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileextPipe, name: "fileext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, 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)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n    <span>Drag & Drop a file</span>\r\n    } @else {\r\n    <span>Drag & Drop files</span>\r\n    } 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: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFilesizePipe, name: "filesize" }, { kind: "pipe", type: i4.ArdiumFilenamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileextPipe, name: "fileext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n      }\r\n      @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        ></ng-template>\r\n      }\r\n      @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-drop-area-input-element\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [id]=\"htmlId()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n      <span>Drag & Drop a file</span>\r\n    } @else {\r\n      <span>Drag & Drop files</span>\r\n    }\r\n    here\r\n  </strong>\r\n  <span class=\"ard-file-drop-area-or-text\">or</span>\r\n  <ard-button\r\n    class=\"ard-file-drop-area-browse-button\"\r\n    appearance=\"transparent\"\r\n    [compact]=\"compact()\"\r\n    [variant]=\"variant()\"\r\n    [color]=\"color()\"\r\n    (click)=\"browse()\"\r\n    >Browse files</ard-button\r\n  >\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n  <span class=\"ard-file-drop-area-dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n  @if (amount > 1 && !multiple()) {\r\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-drop-area-uploaded-container\">\r\n    <div class=\"ard-file-drop-area-uploaded-message\">\r\n      <span class=\"ard-file-drop-area-uploaded-amount\">\r\n        {{ amount }}\r\n        <ng-container [ngPlural]=\"amount\">\r\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n          <ng-template ngPluralCase=\"other\">files</ng-template>\r\n        </ng-container>\r\n      </span>\r\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n    </div>\r\n    <div class=\"ard-file-drop-area-uploaded-files\">\r\n      @for (file of files; track $index) {\r\n        <div class=\"ard-file-drop-area-file\">\r\n          <ard-icon>draft</ard-icon>\r\n          <div class=\"ard-file-drop-area-file-info\">\r\n            <span class=\"ard-file-drop-area-filename\">\r\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\r\n            </span>\r\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+            args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"idleTemplate()?.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)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n    <span>Drag & Drop a file</span>\r\n    } @else {\r\n    <span>Drag & Drop files</span>\r\n    } 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FILE_DROP_AREA_DEFAULTS]
-                }] }], propDecorators: { idleTemplate: [{
-                type: ContentChild,
-                args: [ArdiumFileDropAreaIdleContentTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }], dragoverTemplate: [{
-                type: ContentChild,
-                args: [ArdiumFileDropAreaDragoverContentTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }], uploadedTemplate: [{
-                type: ContentChild,
-                args: [ArdiumFileDropAreaUploadedContentTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }] } });
+                }] }] });
 class ArdiumButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -5185,6 +5192,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: 'ard-file-input > ng-template[ard-dropped-content-tmp]',
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdiumFileInputFolderIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputFolderIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdiumFileInputFolderIconTemplateDirective, selector: "ard-file-input > ng-template[ard-folder-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputFolderIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-file-input > ng-template[ard-folder-icon-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class ArdiumFileInputComponent extends _FileInputComponentBase {
     constructor(defaults) {
@@ -5201,19 +5221,24 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
         this.placeholder = input(this._DEFAULTS.placeholder);
         //! root element classes
         this.ngClasses = computed(() => [`ard-color-${this.color()}`, `ard-state-${this.currentViewState()}`, this.value ? 'ard-has-value' : ''].join(' '));
+        this.placeholderTemplate = contentChild(ArdFileInputPlaceholderTemplateDirective);
         //! clear button
         this.clearable = input(this._DEFAULTS.clearable, { transform: v => coerceBooleanProperty(v) });
         this.clearButtonTitle = input(this._DEFAULTS.clearButtonTitle);
         this.clearEvent = output({ alias: 'clear' });
         //! state
         this.touched = signal(false);
+        //! prefix & suffix
+        this.prefixTemplate = contentChild(ArdFileInputPrefixTemplateDirective);
+        this.suffixTemplate = contentChild(ArdFileInputSuffixTemplateDirective);
         //! templates
-        this.idleTemplate = null;
-        this.dragoverTemplate = null;
-        this.uploadedTemplate = null;
+        this.idleTemplate = contentChild(ArdiumFileInputIdleContentTemplateDirective);
+        this.dragoverTemplate = contentChild(ArdiumFileInputDragoverContentTemplateDirective);
+        this.uploadedTemplate = contentChild(ArdiumFileInputUploadedContentTemplateDirective);
+        this.folderIconTemplate = contentChild(ArdiumFileInputFolderIconTemplateDirective);
     }
     get shouldDisplayPlaceholder() {
-        return Boolean(this.placeholder()) && !this.value;
+        return !!this.placeholder() && !this.value;
     }
     get shouldShowClearButton() {
         return this.clearable() && !this.disabled() && Boolean(this.value);
@@ -5241,6 +5266,9 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
     getDragoverContext() {
         return {
             amount: this._draggedFiles,
+            browse: () => {
+                this.openBrowseDialog();
+            },
         };
     }
     getUploadedContext() {
@@ -5249,6 +5277,9 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
             $implicit: files,
             amount: files.length,
             files,
+            browse: () => {
+                this.openBrowseDialog();
+            },
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, deps: [{ token: ARD_FILE_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -5258,7 +5289,11 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            {
+                provide: _FormFieldComponentBase,
+                useExisting: forwardRef(() => ArdiumFileInputComponent),
+            },
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [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  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -5268,49 +5303,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+                        {
+                            provide: _FormFieldComponentBase,
+                            useExisting: forwardRef(() => ArdiumFileInputComponent),
+                        },
+                    ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [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  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FILE_INPUT_DEFAULTS]
-                }] }], propDecorators: { placeholderTemplate: [{
-                type: ContentChild,
-                args: [ArdFileInputPlaceholderTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }], prefixTemplate: [{
-                type: ContentChild,
-                args: [ArdFileInputPrefixTemplateDirective, { read: TemplateRef }]
-            }], suffixTemplate: [{
-                type: ContentChild,
-                args: [ArdFileInputSuffixTemplateDirective, { read: TemplateRef }]
-            }], idleTemplate: [{
-                type: ContentChild,
-                args: [ArdiumFileInputIdleContentTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }], dragoverTemplate: [{
-                type: ContentChild,
-                args: [ArdiumFileInputDragoverContentTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }], uploadedTemplate: [{
-                type: ContentChild,
-                args: [ArdiumFileInputUploadedContentTemplateDirective, {
-                        read: TemplateRef,
-                    }]
-            }] } });
+                }] }] });
 class ArdiumFileInputModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputModule, declarations: [ArdiumFileInputComponent], imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule], exports: [ArdiumFileInputComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputModule, declarations: [ArdiumFileInputComponent,
+            ArdiumFileInputFolderIconTemplateDirective,
+            ArdiumFileInputUploadedContentTemplateDirective,
+            ArdiumFileInputDragoverContentTemplateDirective,
+            ArdiumFileInputIdleContentTemplateDirective,
+            ArdFileInputSuffixTemplateDirective,
+            ArdFileInputPrefixTemplateDirective,
+            ArdFileInputPlaceholderTemplateDirective], imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule], exports: [ArdiumFileInputComponent,
+            ArdiumFileInputFolderIconTemplateDirective,
+            ArdiumFileInputUploadedContentTemplateDirective,
+            ArdiumFileInputDragoverContentTemplateDirective,
+            ArdiumFileInputIdleContentTemplateDirective,
+            ArdFileInputSuffixTemplateDirective,
+            ArdFileInputPrefixTemplateDirective,
+            ArdFileInputPlaceholderTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumFileInputComponent],
+                    declarations: [
+                        ArdiumFileInputComponent,
+                        ArdiumFileInputFolderIconTemplateDirective,
+                        ArdiumFileInputUploadedContentTemplateDirective,
+                        ArdiumFileInputDragoverContentTemplateDirective,
+                        ArdiumFileInputIdleContentTemplateDirective,
+                        ArdFileInputSuffixTemplateDirective,
+                        ArdFileInputPrefixTemplateDirective,
+                        ArdFileInputPlaceholderTemplateDirective,
+                    ],
                     imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule],
-                    exports: [ArdiumFileInputComponent],
+                    exports: [
+                        ArdiumFileInputComponent,
+                        ArdiumFileInputFolderIconTemplateDirective,
+                        ArdiumFileInputUploadedContentTemplateDirective,
+                        ArdiumFileInputDragoverContentTemplateDirective,
+                        ArdiumFileInputIdleContentTemplateDirective,
+                        ArdFileInputSuffixTemplateDirective,
+                        ArdFileInputPrefixTemplateDirective,
+                        ArdFileInputPlaceholderTemplateDirective,
+                    ],
                 }]
         }] });
@@ -5608,13 +5653,13 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumIconButtonComponent, 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 }, 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\n  class=\"ard-icon-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\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: "18.2.13", type: ArdiumIconButtonComponent, 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 }, 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>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\n  class=\"ard-icon-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\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>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_ICON_BUTTON_DEFAULTS]
@@ -7869,13 +7914,13 @@ class ArdiumFabComponent extends _ButtonBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFabComponent, deps: [{ token: ARD_FAB_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumFabComponent, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-fab\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div\n    class=\"ard-button-content\"\n    #content\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}.ard-fab:not(.ard-fab-extended) .ard-button-content{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: "18.2.13", type: ArdiumFabComponent, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", 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-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>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-button-content\"\r\n    #content\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\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}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}.ard-fab:not(.ard-fab-extended) .ard-button-content{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: "18.2.13", ngImport: i0, type: ArdiumFabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\n  class=\"ard-fab\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div\n    class=\"ard-button-content\"\n    #content\n  >\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}.ard-fab:not(.ard-fab-extended) .ard-button-content{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>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-button-content\"\r\n    #content\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\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}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}.ard-fab:not(.ard-fab-extended) .ard-button-content{aspect-ratio:1}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FAB_DEFAULTS]
@@ -8083,11 +8128,11 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
         this._changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: ARD_RADIO_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, 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\n  #focusableElement\n  class=\"ard-radio\"\n  type=\"button\"\n  [ngClass]=\"ngClasses()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  (mousedown)=\"onMousedown()\"\n  (mouseup)=\"onMouseup()\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-radio-circles\">\n    <div class=\"ard-radio-outer-circle\"></div>\n    <div class=\"ard-radio-inner-circle\"></div>\n    <div class=\"ard-focus-overlay\"></div>\n    <div class=\"ard-hitbox\"></div>\n  </div>\n  <label [for]=\"htmlId()\">\n    <ng-content></ng-content>\n  </label>\n</button>\n\n<input\n  class=\"ard-radio-input-element\"\n  type=\"radio\"\n  [name]=\"name()\"\n  [id]=\"htmlId()\"\n  [checked]=\"selected()\"\n  #radio\n/>\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: "18.2.13", type: ArdiumRadioComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-radio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #focusableElement\n  class=\"ard-radio\"\n  type=\"button\"\n  [ngClass]=\"ngClasses()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  (mousedown)=\"onMousedown()\"\n  (mouseup)=\"onMouseup()\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-radio-circles\">\n    <div class=\"ard-radio-outer-circle\"></div>\n    <div class=\"ard-radio-inner-circle\"></div>\n    <div class=\"ard-focus-overlay\"></div>\n    <div class=\"ard-hitbox\"></div>\n  </div>\n  <label [for]=\"htmlId()\">\n    <ng-content></ng-content>\n  </label>\n</button>\n\n<input\n  class=\"ard-radio-input-element\"\n  type=\"radio\"\n  [name]=\"name()\"\n  [id]=\"htmlId()\"\n  [checked]=\"selected()\"\n  #radio\n/>\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"] }]
+            args: [{ 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_RADIO_DEFAULTS]
@@ -9067,7 +9112,7 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumSegmentComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n    <div\r\n      class=\"ard-segment-row\"\r\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n    >\r\n      @for (option of row.options; track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-segment-option\"\r\n          tabindex=\"-1\"\r\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [ariaSelected]=\"option.selected()\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <span class=\"ard-option-label\">\r\n              <ng-template #defaultOptionTemplate>\r\n                {{ option.label() }}\r\n              </ng-template>\r\n\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n              />\r\n            </span>\r\n          </div>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
@@ -9081,7 +9126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumSegmentComponent,
                         },
-                    ], template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
+                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n    <div\r\n      class=\"ard-segment-row\"\r\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n    >\r\n      @for (option of row.options; track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-segment-option\"\r\n          tabindex=\"-1\"\r\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [ariaSelected]=\"option.selected()\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <span class=\"ard-option-label\">\r\n              <ng-template #defaultOptionTemplate>\r\n                {{ option.label() }}\r\n              </ng-template>\r\n\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n              />\r\n            </span>\r\n          </div>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SEGMENT_DEFAULTS]
@@ -9144,7 +9189,7 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [ariaChecked]=\"selected()\"\n  class=\"ard-slide-toggle\"\n  [class.ard-slide-toggle-selected]=\"selected()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"toggleSelected()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-slide-toggle-track\">\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\n  </div>\n  <div class=\"ard-slide-toggle-handle\">\n    <div class=\"ard-focus-overlay\"></div>\n    @if (selectedIcon() ?? icon()) {\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\n    }\n    @if (unselectedIcon() ?? icon()) {\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\n    }\n  </div>\n</button>\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  [ariaChecked]=\"selected()\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selected()\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
             type: Component,
@@ -9154,7 +9199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [ariaChecked]=\"selected()\"\n  class=\"ard-slide-toggle\"\n  [class.ard-slide-toggle-selected]=\"selected()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"toggleSelected()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-slide-toggle-track\">\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\n  </div>\n  <div class=\"ard-slide-toggle-handle\">\n    <div class=\"ard-focus-overlay\"></div>\n    @if (selectedIcon() ?? icon()) {\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\n    }\n    @if (unselectedIcon() ?? icon()) {\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\n    }\n  </div>\n</button>\n" }]
+                    ], template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  [ariaChecked]=\"selected()\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selected()\"\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" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SLIDE_TOGGLE_DEFAULTS]
@@ -9578,11 +9623,11 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         this.currentHandle.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRangeSliderComponent, deps: [{ token: ARD_SLIDER_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumRangeSliderComponent, selector: "ard-range-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-range-slider-container-master\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\n>\n  <div class=\"ard-slider-container\">\n    <div\n      #track\n      class=\"ard-slider-track\"\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\n    >\n      <div class=\"ard-hitbox\"></div>\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\n      <div\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\n        [style]=\"{\n          left: trackOverlayLeft,\n          width: trackOverlayWidth\n        }\"\n      ></div>\n      @if (showValueTicks()) {\n        <div class=\"ard-value-tick-container\">\n          @for (tick of _tickArray(); track tick) {\n            <div\n              class=\"ard-value-tick\"\n              [style]=\"{ left: tick }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n    <button\n      #focusableElement\n      type=\"button\"\n      class=\"ard-slider-handle\"\n      [tabindex]=\"tabIndex()\"\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\n      (focus)=\"onHandleFocus($event, 1)\"\n      (blur)=\"onBlur($event)\"\n      [style]=\"{ left: getHandlePosition(1) }\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <div class=\"ard-hitbox\"></div>\n    </button>\n    @if (tooltipBehavior() !== 'never') {\n      <div\n        class=\"ard-slider-tooltip-wrapper\"\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\n        [style]=\"{ left: getHandlePosition(1) }\"\n      >\n        <ng-template\n          #defaultTooltipTemplate\n          let-value\n        >\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\n          [ngTemplateOutletContext]=\"getTooltipContext('low')\"\n        >\n        </ng-template>\n      </div>\n    }\n    <button\n      #focusableElement\n      type=\"button\"\n      class=\"ard-slider-handle\"\n      [tabindex]=\"tabIndex()\"\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\n      (focus)=\"onHandleFocus($event, 2)\"\n      (blur)=\"onBlur($event)\"\n      [style]=\"{ left: getHandlePosition(2) }\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <div class=\"ard-hitbox\"></div>\n    </button>\n    @if (tooltipBehavior() !== 'never') {\n      <div\n        class=\"ard-slider-tooltip-wrapper\"\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\n        [style]=\"{ left: getHandlePosition(2) }\"\n      >\n        <ng-template\n          #defaultTooltipTemplate\n          let-value\n        >\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\n          [ngTemplateOutletContext]=\"getTooltipContext('high')\"\n        >\n        </ng-template>\n      </div>\n    }\n  </div>\n  @if (labelObjects().length) {\n    <div\n      class=\"ard-slider-label-container\"\n      *ngIf=\"labelObjects.length\"\n    >\n      @for (label of labelObjects(); track $index) {\n        <div\n          class=\"ard-slider-label\"\n          [style]=\"{ left: label.positionPercent }\"\n        >\n          {{ label.label }}\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #handleThumbBase>\n  <div class=\"ard-slide-thumb\"></div>\n</ng-template>\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumRangeSliderComponent, selector: "ard-range-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-range-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{\r\n          left: trackOverlayLeft,\r\n          width: trackOverlayWidth\r\n        }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n        <div class=\"ard-value-tick-container\">\r\n          @for (tick of _tickArray(); track tick) {\r\n            <div\r\n              class=\"ard-value-tick\"\r\n              [style]=\"{ left: tick }\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n      (focus)=\"onHandleFocus($event, 1)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(1) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('low')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(2) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('high')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    <div\r\n      class=\"ard-slider-label-container\"\r\n      *ngIf=\"labelObjects.length\"\r\n    >\r\n      @for (label of labelObjects(); track $index) {\r\n        <div\r\n          class=\"ard-slider-label\"\r\n          [style]=\"{ left: label.positionPercent }\"\r\n        >\r\n          {{ label.label }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-range-slider-container-master\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\n>\n  <div class=\"ard-slider-container\">\n    <div\n      #track\n      class=\"ard-slider-track\"\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\n    >\n      <div class=\"ard-hitbox\"></div>\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\n      <div\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\n        [style]=\"{\n          left: trackOverlayLeft,\n          width: trackOverlayWidth\n        }\"\n      ></div>\n      @if (showValueTicks()) {\n        <div class=\"ard-value-tick-container\">\n          @for (tick of _tickArray(); track tick) {\n            <div\n              class=\"ard-value-tick\"\n              [style]=\"{ left: tick }\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n    <button\n      #focusableElement\n      type=\"button\"\n      class=\"ard-slider-handle\"\n      [tabindex]=\"tabIndex()\"\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\n      (focus)=\"onHandleFocus($event, 1)\"\n      (blur)=\"onBlur($event)\"\n      [style]=\"{ left: getHandlePosition(1) }\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <div class=\"ard-hitbox\"></div>\n    </button>\n    @if (tooltipBehavior() !== 'never') {\n      <div\n        class=\"ard-slider-tooltip-wrapper\"\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\n        [style]=\"{ left: getHandlePosition(1) }\"\n      >\n        <ng-template\n          #defaultTooltipTemplate\n          let-value\n        >\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\n          [ngTemplateOutletContext]=\"getTooltipContext('low')\"\n        >\n        </ng-template>\n      </div>\n    }\n    <button\n      #focusableElement\n      type=\"button\"\n      class=\"ard-slider-handle\"\n      [tabindex]=\"tabIndex()\"\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\n      (focus)=\"onHandleFocus($event, 2)\"\n      (blur)=\"onBlur($event)\"\n      [style]=\"{ left: getHandlePosition(2) }\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <div class=\"ard-hitbox\"></div>\n    </button>\n    @if (tooltipBehavior() !== 'never') {\n      <div\n        class=\"ard-slider-tooltip-wrapper\"\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\n        [style]=\"{ left: getHandlePosition(2) }\"\n      >\n        <ng-template\n          #defaultTooltipTemplate\n          let-value\n        >\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\n          [ngTemplateOutletContext]=\"getTooltipContext('high')\"\n        >\n        </ng-template>\n      </div>\n    }\n  </div>\n  @if (labelObjects().length) {\n    <div\n      class=\"ard-slider-label-container\"\n      *ngIf=\"labelObjects.length\"\n    >\n      @for (label of labelObjects(); track $index) {\n        <div\n          class=\"ard-slider-label\"\n          [style]=\"{ left: label.positionPercent }\"\n        >\n          {{ label.label }}\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #handleThumbBase>\n  <div class=\"ard-slide-thumb\"></div>\n</ng-template>\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
+            args: [{ selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-range-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{\r\n          left: trackOverlayLeft,\r\n          width: trackOverlayWidth\r\n        }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n        <div class=\"ard-value-tick-container\">\r\n          @for (tick of _tickArray(); track tick) {\r\n            <div\r\n              class=\"ard-value-tick\"\r\n              [style]=\"{ left: tick }\"\r\n            ></div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n      (focus)=\"onHandleFocus($event, 1)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(1) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('low')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n      <div\r\n        class=\"ard-slider-tooltip-wrapper\"\r\n        [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n        [style]=\"{ left: getHandlePosition(2) }\"\r\n      >\r\n        <ng-template\r\n          #defaultTooltipTemplate\r\n          let-value\r\n        >\r\n          <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n          [ngTemplateOutletContext]=\"getTooltipContext('high')\"\r\n        >\r\n        </ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n    <div\r\n      class=\"ard-slider-label-container\"\r\n      *ngIf=\"labelObjects.length\"\r\n    >\r\n      @for (label of labelObjects(); track $index) {\r\n        <div\r\n          class=\"ard-slider-label\"\r\n          [style]=\"{ left: label.positionPercent }\"\r\n        >\r\n          {{ label.label }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SLIDER_DEFAULTS]
@@ -9846,11 +9891,11 @@ class ArdiumStarComponent {
         return coerceBooleanProperty(value) ? StarFillMode.Filled : StarFillMode.None;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ArdStarIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <ng-template\n    #defaultIconTemplate\n    let-fillMode\n  >\n    @if (fillMode === 'filled') {\n      <ard-icon filled>star</ard-icon>\n    } @else if (fillMode === 'half') {\n      <ard-icon>star-half</ard-icon>\n    } @else {\n      <ard-icon>star</ard-icon>\n    }\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\n  />\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ArdStarIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <ng-template\n    #defaultIconTemplate\n    let-fillMode\n  >\n    @if (fillMode === 'filled') {\n      <ard-icon filled>star</ard-icon>\n    } @else if (fillMode === 'half') {\n      <ard-icon>star-half</ard-icon>\n    } @else {\n      <ard-icon>star</ard-icon>\n    }\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\n  />\n</div>\n" }]
+            args: [{ 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" }]
         }] });
 class ArdiumStarButtonComponent extends _BooleanComponentBase {
@@ -9882,7 +9927,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\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n\n  <ng-template\n    #defaultStarTemplate\n    let-fillMode=\"fillMode\"\n    let-color=\"color\"\n  >\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color\"\n    />\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\n  />\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
             type: Component,
@@ -9892,7 +9937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n\n  <ng-template\n    #defaultStarTemplate\n    let-fillMode=\"fillMode\"\n    let-color=\"color\"\n  >\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color\"\n    />\n  </ng-template>\n\n  <ng-template\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\n  />\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_STAR_BUTTON_DEFAULTS]
@@ -10229,7 +10274,7 @@ class ArdiumStateboxComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-statebox\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [style]=\"ngStyle()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  @if (internalState().keepFrame) {\n    <div class=\"ard-statebox-frame\"></div>\n  }\n  <div [class]=\"internalState().displayAsIcon ? 'ard-statebox-icon' : 'ard-statebox-character'\">\n    {{ internalState().display }}\n  </div>\n</button>\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  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-statebox\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [style]=\"ngStyle()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (internalState().keepFrame) {\r\n    <div class=\"ard-statebox-frame\"></div>\r\n  }\r\n  <div [class]=\"internalState().displayAsIcon ? 'ard-statebox-icon' : 'ard-statebox-character'\">\r\n    {{ internalState().display }}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStateboxComponent, decorators: [{
             type: Component,
@@ -10239,7 +10284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-statebox\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [style]=\"ngStyle()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  @if (internalState().keepFrame) {\n    <div class=\"ard-statebox-frame\"></div>\n  }\n  <div [class]=\"internalState().displayAsIcon ? 'ard-statebox-icon' : 'ard-statebox-character'\">\n    {{ internalState().display }}\n  </div>\n</button>\n" }]
+                    ], template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-statebox\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [style]=\"ngStyle()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (internalState().keepFrame) {\r\n    <div class=\"ard-statebox-frame\"></div>\r\n  }\r\n  <div [class]=\"internalState().displayAsIcon ? 'ard-statebox-icon' : 'ard-statebox-character'\">\r\n    {{ internalState().display }}\r\n  </div>\r\n</button>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_STATEBOX_DEFAULTS]
@@ -10625,11 +10670,11 @@ class ArdiumProgressBarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, bufferValue: { classPropertyName: "bufferValue", publicName: "bufferValue", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hideValue: { classPropertyName: "hideValue", publicName: "hideValue", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ard-progress-bar\"\n  role=\"progressbar\"\n  [style]=\"cssVariables()\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-progress-bar__background\"></div>\n  <div class=\"ard-progress-bar__overlay-buffer\"></div>\n  <div class=\"ard-progress-bar__overlay\"></div>\n  <div class=\"ard-progress-bar__value\">\n    <ng-template\n      #defaultValueTemplate\n      let-value\n    >\n      {{ value * 100 | number: '1.0-0' }}%\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\n      [ngTemplateOutletContext]=\"getValueContext()\"\n    ></ng-template>\n  </div>\n</div>\n", styles: ["ard-progress-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{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: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, bufferValue: { classPropertyName: "bufferValue", publicName: "bufferValue", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hideValue: { classPropertyName: "hideValue", publicName: "hideValue", 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-bar\"\r\n  role=\"progressbar\"\r\n  [style]=\"cssVariables()\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-progress-bar__background\"></div>\r\n  <div class=\"ard-progress-bar__overlay-buffer\"></div>\r\n  <div class=\"ard-progress-bar__overlay\"></div>\r\n  <div class=\"ard-progress-bar__value\">\r\n    <ng-template\r\n      #defaultValueTemplate\r\n      let-value\r\n    >\r\n      {{ value * 100 | 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-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{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: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-progress-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-progress-bar\"\n  role=\"progressbar\"\n  [style]=\"cssVariables()\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-progress-bar__background\"></div>\n  <div class=\"ard-progress-bar__overlay-buffer\"></div>\n  <div class=\"ard-progress-bar__overlay\"></div>\n  <div class=\"ard-progress-bar__value\">\n    <ng-template\n      #defaultValueTemplate\n      let-value\n    >\n      {{ value * 100 | number: '1.0-0' }}%\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\n      [ngTemplateOutletContext]=\"getValueContext()\"\n    ></ng-template>\n  </div>\n</div>\n", styles: ["ard-progress-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{position:absolute}\n"] }]
+            args: [{ selector: 'ard-progress-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-progress-bar\"\r\n  role=\"progressbar\"\r\n  [style]=\"cssVariables()\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-progress-bar__background\"></div>\r\n  <div class=\"ard-progress-bar__overlay-buffer\"></div>\r\n  <div class=\"ard-progress-bar__overlay\"></div>\r\n  <div class=\"ard-progress-bar__value\">\r\n    <ng-template\r\n      #defaultValueTemplate\r\n      let-value\r\n    >\r\n      {{ value * 100 | 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-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{position:absolute}\n"] }]
         }], ctorParameters: () => [] });
 class ArdProgressBarValueTemplateDirective {
@@ -10719,11 +10764,11 @@ class ArdiumProgressCircleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumProgressCircleComponent, 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\n  class=\"ard-progress-circle\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-progress-circle-background\"></div>\n  <div\n    class=\"ard-progress-circle-overlay\"\n    [style]=\"fillPercentVariable()\"\n  ></div>\n  <div class=\"ard-progress-circle-value\">\n    <ng-template\n      #defaultValueTemplate\n      let-percents\n    >\n      {{ percents | number: '1.0-0' }}%\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\n      [ngTemplateOutletContext]=\"getValueContext()\"\n    ></ng-template>\n  </div>\n</div>\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: "18.2.13", type: ArdiumProgressCircleComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-progress-circle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-progress-circle\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-progress-circle-background\"></div>\n  <div\n    class=\"ard-progress-circle-overlay\"\n    [style]=\"fillPercentVariable()\"\n  ></div>\n  <div class=\"ard-progress-circle-value\">\n    <ng-template\n      #defaultValueTemplate\n      let-percents\n    >\n      {{ percents | number: '1.0-0' }}%\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"valueTemplate() || defaultValueTemplate\"\n      [ngTemplateOutletContext]=\"getValueContext()\"\n    ></ng-template>\n  </div>\n</div>\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: [{ 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"] }]
         }] });
 class ArdProgressCircleValueTemplateDirective {
@@ -10772,11 +10817,11 @@ class ArdiumSpinnerComponent {
         this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumSpinnerComponent, selector: "ard-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n  class=\"ard-spinner\"\n  [ngClass]=\"ngClasses()\"\n  viewBox=\"0 0 100 100\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <circle\n    class=\"ard-spinner-circle\"\n    cx=\"50\"\n    cy=\"50\"\n    r=\"20\"\n  ></circle>\n</svg>\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: "18.2.13", type: ArdiumSpinnerComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-spinner', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  class=\"ard-spinner\"\n  [ngClass]=\"ngClasses()\"\n  viewBox=\"0 0 100 100\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <circle\n    class=\"ard-spinner-circle\"\n    cx=\"50\"\n    cy=\"50\"\n    r=\"20\"\n  ></circle>\n</svg>\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: [{ 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"] }]
         }] });
 class ArdiumSpinnerModule {
@@ -10835,11 +10880,11 @@ class ArdiumColorDisplayComponent {
             console.warn(`ARD-WA3000: Using <ard-color-display> without specifying the [color] field.`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumColorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumColorDisplayComponent, selector: "ard-color-display", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, withLabel: { classPropertyName: "withLabel", publicName: "withLabel", 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 } }, ngImport: i0, template: "<div\n  class=\"ard-color-display-wrapper\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div\n    class=\"ard-color-display\"\n    [title]=\"color()\"\n    [style]=\"{ background: color() }\"\n  ></div>\n  @if (withLabel()) {\n    <span class=\"ard-color-display-label\">{{ color() }}</span>\n  }\n</div>\n", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-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.0.0", version: "18.2.13", type: ArdiumColorDisplayComponent, selector: "ard-color-display", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, withLabel: { classPropertyName: "withLabel", publicName: "withLabel", 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 } }, ngImport: i0, template: "<div\r\n  class=\"ard-color-display-wrapper\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-color-display\"\r\n    [title]=\"color()\"\r\n    [style]=\"{ background: color() }\"\r\n  ></div>\r\n  @if (withLabel()) {\r\n    <span class=\"ard-color-display-label\">{{ color() }}</span>\r\n  }\r\n</div>\r\n", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-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: "18.2.13", ngImport: i0, type: ArdiumColorDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-color-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-color-display-wrapper\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div\n    class=\"ard-color-display\"\n    [title]=\"color()\"\n    [style]=\"{ background: color() }\"\n  ></div>\n  @if (withLabel()) {\n    <span class=\"ard-color-display-label\">{{ color() }}</span>\n  }\n</div>\n", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-block}\n"] }]
+            args: [{ selector: 'ard-color-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-color-display-wrapper\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-color-display\"\r\n    [title]=\"color()\"\r\n    [style]=\"{ background: color() }\"\r\n  ></div>\r\n  @if (withLabel()) {\r\n    <span class=\"ard-color-display-label\">{{ color() }}</span>\r\n  }\r\n</div>\r\n", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-block}\n"] }]
         }] });
 class ArdiumColorDisplayModule {
@@ -11083,11 +11128,11 @@ class ArdiumKbdComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: { key: { classPropertyName: "key", publicName: "key", 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: "<kbd\n  class=\"ard-kbd\"\n  [ngClass]=\"ngClasses()\"\n>\n  {{ key() || contentWrapper()?.nativeElement?.innerText || '' | kbd: !full() }}\n</kbd>\n\n<div\n  #contentWrapperEl\n  class=\"ard-kbd-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ArdiumKbdPipe, name: "kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: { key: { classPropertyName: "key", publicName: "key", 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: "<kbd\r\n  class=\"ard-kbd\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  {{ key() || contentWrapper()?.nativeElement?.innerText || '' | kbd: !full() }}\r\n</kbd>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-kbd-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ArdiumKbdPipe, name: "kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumKbdComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd\n  class=\"ard-kbd\"\n  [ngClass]=\"ngClasses()\"\n>\n  {{ key() || contentWrapper()?.nativeElement?.innerText || '' | kbd: !full() }}\n</kbd>\n\n<div\n  #contentWrapperEl\n  class=\"ard-kbd-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"] }]
+            args: [{ selector: 'ard-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd\r\n  class=\"ard-kbd\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  {{ key() || contentWrapper()?.nativeElement?.innerText || '' | kbd: !full() }}\r\n</kbd>\r\n\r\n<div\r\n  #contentWrapperEl\r\n  class=\"ard-kbd-content-wrapper\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"] }]
         }] });
 class ArdiumKbdDirective {
@@ -11163,11 +11208,11 @@ class ArdiumKbdShortcutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumKbdShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumKbdShortcutComponent, 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\n  class=\"ard-kbd-shortcut\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (key of keys() ?? contentWrapper()?.nativeElement?.innerText?.split(splitRegex); track $index) {\n    @if ($index !== 0) {\n      <span>+</span>\n    }\n    <ard-kbd\n      [appearance]=\"appearance()\"\n      [full]=\"full()\"\n      [key]=\"key\"\n    />\n  }\n</div>\n\n<div\n  #contentWrapperEl\n  class=\"ard-kbd-shortcut-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\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: "18.2.13", type: ArdiumKbdShortcutComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumKbdShortcutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-kbd-shortcut', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-kbd-shortcut\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (key of keys() ?? contentWrapper()?.nativeElement?.innerText?.split(splitRegex); track $index) {\n    @if ($index !== 0) {\n      <span>+</span>\n    }\n    <ard-kbd\n      [appearance]=\"appearance()\"\n      [full]=\"full()\"\n      [key]=\"key\"\n    />\n  }\n</div>\n\n<div\n  #contentWrapperEl\n  class=\"ard-kbd-shortcut-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".ard-kbd-shortcut{display:inline}.ard-kbd-shortcut-content-wrapper{display:none}\n"] }]
+            args: [{ 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"] }]
         }] });
 class ArdiumKbdShortcutModule {
@@ -12097,11 +12142,11 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
         this._emitPageEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTablePaginationComponent, deps: [{ token: ARD_TABLE_PAGINATION_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTablePaginationComponent, 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\n  class=\"ard-pagination\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-pagination__items-per-page\">\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\n    <ard-select\n      [items]=\"options()\"\n      [compact]=\"compact()\"\n      [value]=\"itemsPerPage()\"\n      autoHighlightFirst=\"false\"\n      [disabled]=\"disabled()\"\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\n      clearable=\"false\"\n    />\n  </div>\n  <div class=\"ard-pagination__current-page\">\n    <div class=\"ard-pagination__text\">\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\n    </div>\n    <div class=\"ard-pagination__buttons\">\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || firstPageDisabled()\"\n          (click)=\"onFirstPage()\"\n        >\n          <ard-icon>first page</ard-icon>\n        </ard-icon-button>\n      }\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || firstPageDisabled()\"\n        (click)=\"onPrevPage()\"\n      >\n        <ard-icon>navigate before</ard-icon>\n      </ard-icon-button>\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || lastPageDisabled()\"\n        (click)=\"onNextPage()\"\n      >\n        <ard-icon>navigate next</ard-icon>\n      </ard-icon-button>\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || lastPageDisabled()\"\n          (click)=\"onLastPage()\"\n        >\n          <ard-icon>last page</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTablePaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-table-pagination', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-pagination\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-pagination__items-per-page\">\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\n    <ard-select\n      [items]=\"options()\"\n      [compact]=\"compact()\"\n      [value]=\"itemsPerPage()\"\n      autoHighlightFirst=\"false\"\n      [disabled]=\"disabled()\"\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\n      clearable=\"false\"\n    />\n  </div>\n  <div class=\"ard-pagination__current-page\">\n    <div class=\"ard-pagination__text\">\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\n    </div>\n    <div class=\"ard-pagination__buttons\">\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || firstPageDisabled()\"\n          (click)=\"onFirstPage()\"\n        >\n          <ard-icon>first page</ard-icon>\n        </ard-icon-button>\n      }\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || firstPageDisabled()\"\n        (click)=\"onPrevPage()\"\n      >\n        <ard-icon>navigate before</ard-icon>\n      </ard-icon-button>\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || lastPageDisabled()\"\n        (click)=\"onNextPage()\"\n      >\n        <ard-icon>navigate next</ard-icon>\n      </ard-icon-button>\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || lastPageDisabled()\"\n          (click)=\"onLastPage()\"\n        >\n          <ard-icon>last page</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ 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" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_TABLE_PAGINATION_DEFAULTS]
@@ -12564,11 +12609,11 @@ class ArdiumTableComponent extends _FocusableComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, deps: [{ token: ARD_TABLE_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTableComponent, 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\n  class=\"ard-table\"\n  [ngClass]=\"ngClasses()\"\n>\n  @if (caption()) {\n    <caption class=\"ard-table__caption\">\n      <div class=\"ard-table__caption-container\">\n        <ng-template\n          #defaultCaptionTemplate\n          let-captionText\n        >\n          {{ captionText }}\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\n        />\n      </div>\n    </caption>\n  }\n  <thead class=\"ard-table__header\">\n    @for (row of headerCells(); track $index) {\n      <tr class=\"ard-table__header-row\">\n        @for (cell of row; track $index) {\n          <th\n            class=\"ard-table__header-cell\"\n            [ngClass]=\"cell.cell().cellClass\"\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\n            [attr.colspan]=\"cell.colspan()\"\n            [attr.rowspan]=\"cell.rowspan()\"\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\n          >\n            <div\n              class=\"ard-table__cell-container\"\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\n              [style.width]=\"cell.width\"\n              [style.minWidth]=\"cell.minWidth\"\n            >\n              @if (isHeaderCellCheckbox(cell)) {\n                <ng-template\n                  #defaultHeaderCheckboxTemplate\n                  let-state\n                  let-onChange=\"onChange\"\n                >\n                  <ard-checkbox\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                    [state]=\"state\"\n                    [color]=\"getHeaderCheckboxColor()\"\n                    unselectedColor=\"currentColor\"\n                    (change)=\"onChange()\"\n                  />\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\n                />\n              } @else {\n                <ng-template\n                  #defaultHeaderCellTemplate\n                  let-content\n                  let-sortable=\"sortable\"\n                  let-sortType=\"sortType\"\n                  let-onTriggerSort=\"onTriggerSort\"\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\n                >\n                  <div\n                    class=\"ard-table__header-template-container\"\n                    [class.ard-sortable]=\"sortable\"\n                    [class.ard-nonsortable]=\"!sortable\"\n                  >\n                    @if (sortable) {\n                      <button\n                        type=\"button\"\n                        class=\"ard-table__header-content-container\"\n                        (click)=\"onTriggerSort($event)\"\n                        [tabindex]=\"tabIndex()\"\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\n                      >\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                        @if (sortType !== null) {\n                          <div class=\"ard-table__header-sort-icon\">\n                            @if (sortType === 'ascending') {\n                              <ard-icon>south</ard-icon>\n                            } @else if (sortType === 'descending') {\n                              <ard-icon>north</ard-icon>\n                            }\n                          </div>\n                        }\n                      </button>\n                    } @else {\n                      <div class=\"ard-table__header-content-container\">\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                      </div>\n                    }\n                  </div>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\n                />\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    }\n    <tr class=\"ard-table__progress-bar-row\">\n      <th\n        class=\"ard-table__progress-bar-cell\"\n        colspan=\"9999\"\n      >\n        @if (isLoading()) {\n          <ard-progress-bar\n            [value]=\"loadingProgress()\"\n            [bufferValue]=\"loadingProgressBuffer()\"\n            [mode]=\"loadingBarMode()\"\n            [color]=\"loadingBarColor()\"\n            variant=\"sharp\"\n            hideValue\n          />\n        }\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"ard-table__body\">\n    @for (row of dataRows(); track $index) {\n      @if (row.isEmpty()) {\n        <tr class=\"ard-table__empty-row\">\n          <td\n            class=\"ard-table__empty-cell\"\n            colspan=\"9999\"\n          ></td>\n        </tr>\n      } @else {\n        <tr\n          class=\"ard-table__body-row\"\n          [class.ard-table__selected-row]=\"row.selected()\"\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\n          [class.ard-table__disabled-row]=\"row.disabled()\"\n          [class.ard-table__bold-row]=\"row.bold()\"\n          (click)=\"onRowClick(row, $event)\"\n          (mouseover)=\"onRowMouseOver($event)\"\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\n        >\n          @for (cell of row.data(); track $index) {\n            <ng-template #cellTmp>\n              <div\n                class=\"ard-table__cell-container\"\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\n              >\n                @if (isCellCheckbox(cell)) {\n                  <ng-template\n                    #defaultCheckboxTemplate\n                    let-isChecked\n                    let-onChange=\"onChange\"\n                    let-disabled=\"disabled\"\n                  >\n                    <ard-checkbox\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                      [selected]=\"isChecked\"\n                      [color]=\"color()\"\n                      [disabled]=\"disabled\"\n                      (change)=\"onChange()\"\n                      (click)=\"$event.stopPropagation()\"\n                    />\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\n                  />\n                } @else {\n                  <ng-template\n                    #defaultCellTemplate\n                    let-content\n                  >\n                    {{ content }}\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\n                  />\n                }\n              </div>\n            </ng-template>\n            @if (!row.dataColumns()[$index].isRowHeader) {\n              <td\n                class=\"ard-table__body-cell\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </td>\n            } @else {\n              <th\n                class=\"ard-table__body-cell ard-table__row-header\"\n                scope=\"row\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </th>\n            }\n          }\n        </tr>\n      }\n    }\n  </tbody>\n  @if (canDisplayPagination()) {\n    <tfoot class=\"ard-table__foot\">\n      <tr class=\"ard-table__foot-row\">\n        <td\n          class=\"ard-table__pagination-cell\"\n          colspan=\"9999\"\n        >\n          <ard-table-pagination\n            [options]=\"paginationOptions()\"\n            [totalItems]=\"totalItems()!\"\n            [disabled]=\"paginationDisabled()\"\n            [(itemsPerPage)]=\"itemsPerPage\"\n            [(page)]=\"page\"\n            [align]=\"paginationAlign()\"\n            [isLoading]=\"isLoading()\"\n            [itemsPerPageText]=\"itemsPerPageText()\"\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n          />\n        </td>\n      </tr>\n    </tfoot>\n  }\n</table>\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: "18.2.13", type: ArdiumTableComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n  class=\"ard-table\"\n  [ngClass]=\"ngClasses()\"\n>\n  @if (caption()) {\n    <caption class=\"ard-table__caption\">\n      <div class=\"ard-table__caption-container\">\n        <ng-template\n          #defaultCaptionTemplate\n          let-captionText\n        >\n          {{ captionText }}\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\n        />\n      </div>\n    </caption>\n  }\n  <thead class=\"ard-table__header\">\n    @for (row of headerCells(); track $index) {\n      <tr class=\"ard-table__header-row\">\n        @for (cell of row; track $index) {\n          <th\n            class=\"ard-table__header-cell\"\n            [ngClass]=\"cell.cell().cellClass\"\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\n            [attr.colspan]=\"cell.colspan()\"\n            [attr.rowspan]=\"cell.rowspan()\"\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\n          >\n            <div\n              class=\"ard-table__cell-container\"\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\n              [style.width]=\"cell.width\"\n              [style.minWidth]=\"cell.minWidth\"\n            >\n              @if (isHeaderCellCheckbox(cell)) {\n                <ng-template\n                  #defaultHeaderCheckboxTemplate\n                  let-state\n                  let-onChange=\"onChange\"\n                >\n                  <ard-checkbox\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                    [state]=\"state\"\n                    [color]=\"getHeaderCheckboxColor()\"\n                    unselectedColor=\"currentColor\"\n                    (change)=\"onChange()\"\n                  />\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\n                />\n              } @else {\n                <ng-template\n                  #defaultHeaderCellTemplate\n                  let-content\n                  let-sortable=\"sortable\"\n                  let-sortType=\"sortType\"\n                  let-onTriggerSort=\"onTriggerSort\"\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\n                >\n                  <div\n                    class=\"ard-table__header-template-container\"\n                    [class.ard-sortable]=\"sortable\"\n                    [class.ard-nonsortable]=\"!sortable\"\n                  >\n                    @if (sortable) {\n                      <button\n                        type=\"button\"\n                        class=\"ard-table__header-content-container\"\n                        (click)=\"onTriggerSort($event)\"\n                        [tabindex]=\"tabIndex()\"\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\n                      >\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                        @if (sortType !== null) {\n                          <div class=\"ard-table__header-sort-icon\">\n                            @if (sortType === 'ascending') {\n                              <ard-icon>south</ard-icon>\n                            } @else if (sortType === 'descending') {\n                              <ard-icon>north</ard-icon>\n                            }\n                          </div>\n                        }\n                      </button>\n                    } @else {\n                      <div class=\"ard-table__header-content-container\">\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                      </div>\n                    }\n                  </div>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\n                />\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    }\n    <tr class=\"ard-table__progress-bar-row\">\n      <th\n        class=\"ard-table__progress-bar-cell\"\n        colspan=\"9999\"\n      >\n        @if (isLoading()) {\n          <ard-progress-bar\n            [value]=\"loadingProgress()\"\n            [bufferValue]=\"loadingProgressBuffer()\"\n            [mode]=\"loadingBarMode()\"\n            [color]=\"loadingBarColor()\"\n            variant=\"sharp\"\n            hideValue\n          />\n        }\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"ard-table__body\">\n    @for (row of dataRows(); track $index) {\n      @if (row.isEmpty()) {\n        <tr class=\"ard-table__empty-row\">\n          <td\n            class=\"ard-table__empty-cell\"\n            colspan=\"9999\"\n          ></td>\n        </tr>\n      } @else {\n        <tr\n          class=\"ard-table__body-row\"\n          [class.ard-table__selected-row]=\"row.selected()\"\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\n          [class.ard-table__disabled-row]=\"row.disabled()\"\n          [class.ard-table__bold-row]=\"row.bold()\"\n          (click)=\"onRowClick(row, $event)\"\n          (mouseover)=\"onRowMouseOver($event)\"\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\n        >\n          @for (cell of row.data(); track $index) {\n            <ng-template #cellTmp>\n              <div\n                class=\"ard-table__cell-container\"\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\n              >\n                @if (isCellCheckbox(cell)) {\n                  <ng-template\n                    #defaultCheckboxTemplate\n                    let-isChecked\n                    let-onChange=\"onChange\"\n                    let-disabled=\"disabled\"\n                  >\n                    <ard-checkbox\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                      [selected]=\"isChecked\"\n                      [color]=\"color()\"\n                      [disabled]=\"disabled\"\n                      (change)=\"onChange()\"\n                      (click)=\"$event.stopPropagation()\"\n                    />\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\n                  />\n                } @else {\n                  <ng-template\n                    #defaultCellTemplate\n                    let-content\n                  >\n                    {{ content }}\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\n                  />\n                }\n              </div>\n            </ng-template>\n            @if (!row.dataColumns()[$index].isRowHeader) {\n              <td\n                class=\"ard-table__body-cell\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </td>\n            } @else {\n              <th\n                class=\"ard-table__body-cell ard-table__row-header\"\n                scope=\"row\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </th>\n            }\n          }\n        </tr>\n      }\n    }\n  </tbody>\n  @if (canDisplayPagination()) {\n    <tfoot class=\"ard-table__foot\">\n      <tr class=\"ard-table__foot-row\">\n        <td\n          class=\"ard-table__pagination-cell\"\n          colspan=\"9999\"\n        >\n          <ard-table-pagination\n            [options]=\"paginationOptions()\"\n            [totalItems]=\"totalItems()!\"\n            [disabled]=\"paginationDisabled()\"\n            [(itemsPerPage)]=\"itemsPerPage\"\n            [(page)]=\"page\"\n            [align]=\"paginationAlign()\"\n            [isLoading]=\"isLoading()\"\n            [itemsPerPageText]=\"itemsPerPageText()\"\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n          />\n        </td>\n      </tr>\n    </tfoot>\n  }\n</table>\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"] }]
+            args: [{ 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_TABLE_DEFAULTS]
@@ -12738,11 +12783,11 @@ class ArdiumTableFromCsvComponent {
         return dataRows;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableFromCsvComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumTableFromCsvComponent, 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\n  treatDataSourceAsString\n  [columns]=\"headers()\"\n  [data]=\"dataRows()\"\n  [selectableRows]=\"selectableRows()\"\n  [maxSelectedItems]=\"maxSelectedItems()\"\n  [clickableRows]=\"clickableRows()\"\n  [isLoading]=\"isLoading()\"\n  [loadingProgress]=\"loadingProgress()\"\n  [caption]=\"caption()\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [color]=\"color()\"\n  [align]=\"align()\"\n  [headerAlign]=\"headerAlign()\"\n  [compact]=\"compact()\"\n  [zebra]=\"zebra()\"\n  [stickyHeader]=\"stickyHeader()\"\n  [paginated]=\"paginated()\"\n  [paginationStrategy]=\"paginationStrategy()\"\n  [totalItems]=\"totalItems()\"\n  [paginationColor]=\"paginationColor()\"\n  [paginationAlign]=\"paginationAlign()\"\n  [itemsPerPageText]=\"itemsPerPageText()\"\n  [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n  [pageFillRemaining]=\"pageFillRemaining()\"\n  [paginationDisabled]=\"paginationDisabled()\"\n  [useFirstLastButtons]=\"useFirstLastButtons()\"\n  [(itemsPerPage)]=\"itemsPerPage\"\n  [(page)]=\"page\"\n/>\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: "18.2.13", type: ArdiumTableFromCsvComponent, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableFromCsvComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-table-from-csv', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-table\n  treatDataSourceAsString\n  [columns]=\"headers()\"\n  [data]=\"dataRows()\"\n  [selectableRows]=\"selectableRows()\"\n  [maxSelectedItems]=\"maxSelectedItems()\"\n  [clickableRows]=\"clickableRows()\"\n  [isLoading]=\"isLoading()\"\n  [loadingProgress]=\"loadingProgress()\"\n  [caption]=\"caption()\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [color]=\"color()\"\n  [align]=\"align()\"\n  [headerAlign]=\"headerAlign()\"\n  [compact]=\"compact()\"\n  [zebra]=\"zebra()\"\n  [stickyHeader]=\"stickyHeader()\"\n  [paginated]=\"paginated()\"\n  [paginationStrategy]=\"paginationStrategy()\"\n  [totalItems]=\"totalItems()\"\n  [paginationColor]=\"paginationColor()\"\n  [paginationAlign]=\"paginationAlign()\"\n  [itemsPerPageText]=\"itemsPerPageText()\"\n  [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n  [pageFillRemaining]=\"pageFillRemaining()\"\n  [paginationDisabled]=\"paginationDisabled()\"\n  [useFirstLastButtons]=\"useFirstLastButtons()\"\n  [(itemsPerPage)]=\"itemsPerPage\"\n  [(page)]=\"page\"\n/>\n" }]
+            args: [{ 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" }]
         }] });
 class ArdiumTableFromCsvModule {
@@ -12826,11 +12871,11 @@ function provideCardDefaults(config) {
 class ArdiumCardHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ArdiumCardHeaderComponent, selector: "ard-card-header", ngImport: i0, template: "<ng-content select=\"[ard-card-avatar]\" />\n<div class=\"ard-card-header-title-container\">\n  <ng-content\n    select=\"ard-card-title, ard-card-subtitle,\n      [ard-card-title], [ard-card-subtitle]\"\n  />\n</div>\n<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ArdiumCardHeaderComponent, selector: "ard-card-header", ngImport: i0, template: "<ng-content select=\"[ard-card-avatar]\" />\r\n<div class=\"ard-card-header-title-container\">\r\n  <ng-content\r\n    select=\"ard-card-title, ard-card-subtitle,\r\n      [ard-card-title], [ard-card-subtitle]\"\r\n  />\r\n</div>\r\n<ng-content />\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-card-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[ard-card-avatar]\" />\n<div class=\"ard-card-header-title-container\">\n  <ng-content\n    select=\"ard-card-title, ard-card-subtitle,\n      [ard-card-title], [ard-card-subtitle]\"\n  />\n</div>\n<ng-content />\n" }]
+            args: [{ selector: 'ard-card-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[ard-card-avatar]\" />\r\n<div class=\"ard-card-header-title-container\">\r\n  <ng-content\r\n    select=\"ard-card-title, ard-card-subtitle,\r\n      [ard-card-title], [ard-card-subtitle]\"\r\n  />\r\n</div>\r\n<ng-content />\r\n" }]
         }] });
 class ArdiumCardSubtitleDirective {
     constructor(renderer, hostElement) {
@@ -13086,11 +13131,11 @@ class ArdiumTabComponent {
         this.selectedChange.emit(this.selected());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumTabComponent, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", selectedChange: "selectedChange" }, host: { properties: { "class.ard-tab-selected": "this._selectedHostAttribute" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumTabComponent, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", selectedChange: "selectedChange" }, host: { properties: { "class.ard-tab-selected": "this._selectedHostAttribute" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'ard-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n" }]
         }], propDecorators: { _selected: [{
                 type: Input,
                 args: ['selected']
@@ -13192,11 +13237,11 @@ class ArdiumTabberComponent {
         this.currentFocusedTab.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTabberComponent, selector: "ard-tabber", inputs: { initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", changeTab: "changeTab" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ard-tabber\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div\n    class=\"ard-tabber-tabs\"\n    [ngClass]=\"tabContainerClasses()\"\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\n  >\n    @for (tab of tabs(); track tab) {\n      <button\n        #focusableElement\n        type=\"button\"\n        role=\"tab\"\n        class=\"ard-tab-button\"\n        [id]=\"tab.tabId()\"\n        [class.ard-tab-active]=\"tab === currentTab()\"\n        [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\n        (click)=\"!tab.selected() && onTabClick(tab)\"\n        (focus)=\"onTabFocus(tab)\"\n        (blur)=\"onTabBlur(tab)\"\n        [tabindex]=\"tabIndex()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div\n    role=\"tabpanel\"\n    class=\"ard-tabber-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTabberComponent, selector: "ard-tabber", inputs: { initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", changeTab: "changeTab" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tab of tabs(); track tab) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tab.tabId()\"\r\n        [class.ard-tab-active]=\"tab === currentTab()\"\r\n        [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\r\n        (click)=\"!tab.selected() && onTabClick(tab)\"\r\n        (focus)=\"onTabFocus(tab)\"\r\n        (blur)=\"onTabBlur(tab)\"\r\n        [tabindex]=\"tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTabberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-tabber\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div\n    class=\"ard-tabber-tabs\"\n    [ngClass]=\"tabContainerClasses()\"\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\n  >\n    @for (tab of tabs(); track tab) {\n      <button\n        #focusableElement\n        type=\"button\"\n        role=\"tab\"\n        class=\"ard-tab-button\"\n        [id]=\"tab.tabId()\"\n        [class.ard-tab-active]=\"tab === currentTab()\"\n        [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\n        (click)=\"!tab.selected() && onTabClick(tab)\"\n        (focus)=\"onTabFocus(tab)\"\n        (blur)=\"onTabBlur(tab)\"\n        [tabindex]=\"tabIndex()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div\n    role=\"tabpanel\"\n    class=\"ard-tabber-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\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: [{ selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tab of tabs(); track tab) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"ard-tab-button\"\r\n        [id]=\"tab.tabId()\"\r\n        [class.ard-tab-active]=\"tab === currentTab()\"\r\n        [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\r\n        (click)=\"!tab.selected() && onTabClick(tab)\"\r\n        (focus)=\"onTabFocus(tab)\"\r\n        (blur)=\"onTabBlur(tab)\"\r\n        [tabindex]=\"tabIndex()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
         }] });
 class ArdiumTabberModule {
@@ -13474,11 +13519,11 @@ class ArdiumDialogComponent {
         this.closeEvent.emit('close');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ArdDialogCloseIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [allActionsDisabled]=\"allActionsDisabled()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n  [_closeIconTemplate]=\"closeIconTemplate()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-allActionsDisabled=\"allActionsDisabled\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              [disabled]=\"allActionsDisabled\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm || allActionsDisabled\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      />\n    </div>\n  </div>\n</ard-modal>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "allActionsDisabled", "open", "_closeIconTemplate"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ArdDialogCloseIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [heading]=\"heading()\"\r\n  [noCloseButton]=\"noCloseButton()\"\r\n  [noBackdrop]=\"noBackdrop()\"\r\n  [disableBackdropClose]=\"disableBackdropClose()\"\r\n  [allActionsDisabled]=\"allActionsDisabled()\"\r\n  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\r\n  [_closeIconTemplate]=\"closeIconTemplate()\"\r\n>\r\n  <div class=\"ard-dialog-container\">\r\n    <div class=\"ard-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-dialog-buttons\">\r\n      <ng-template\r\n        #defaultButtonsTemplate\r\n        let-confirmButton=\"confirmButton\"\r\n        let-rejectButton=\"rejectButton\"\r\n        let-canConfirm=\"canConfirm\"\r\n        let-allActionsDisabled=\"allActionsDisabled\"\r\n        let-onConfirm=\"onConfirm\"\r\n        let-onReject=\"onReject\"\r\n        let-dialogVariant=\"dialogVariant\"\r\n        let-dialogCompact=\"dialogCompact\"\r\n      >\r\n        <div class=\"ard-dialog-buttons-container\">\r\n          @if (rejectButton.enabled) {\r\n            <ard-button\r\n              [color]=\"rejectButton.color\"\r\n              [appearance]=\"rejectButton.appearance\"\r\n              [variant]=\"dialogVariant\"\r\n              [compact]=\"dialogCompact\"\r\n              [disabled]=\"allActionsDisabled\"\r\n              (click)=\"onReject()\"\r\n            >\r\n              {{ rejectButton.text }}\r\n            </ard-button>\r\n          }\r\n          <ard-button\r\n            [color]=\"confirmButton.color\"\r\n            [appearance]=\"confirmButton.appearance\"\r\n            [variant]=\"dialogVariant\"\r\n            [compact]=\"dialogCompact\"\r\n            (click)=\"onConfirm()\"\r\n            [disabled]=\"!canConfirm || allActionsDisabled\"\r\n          >\r\n            {{ confirmButton.text }}\r\n          </ard-button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "allActionsDisabled", "open", "_closeIconTemplate"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [allActionsDisabled]=\"allActionsDisabled()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n  [_closeIconTemplate]=\"closeIconTemplate()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-allActionsDisabled=\"allActionsDisabled\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              [disabled]=\"allActionsDisabled\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm || allActionsDisabled\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      />\n    </div>\n  </div>\n</ard-modal>\n" }]
+            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [heading]=\"heading()\"\r\n  [noCloseButton]=\"noCloseButton()\"\r\n  [noBackdrop]=\"noBackdrop()\"\r\n  [disableBackdropClose]=\"disableBackdropClose()\"\r\n  [allActionsDisabled]=\"allActionsDisabled()\"\r\n  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\r\n  [_closeIconTemplate]=\"closeIconTemplate()\"\r\n>\r\n  <div class=\"ard-dialog-container\">\r\n    <div class=\"ard-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-dialog-buttons\">\r\n      <ng-template\r\n        #defaultButtonsTemplate\r\n        let-confirmButton=\"confirmButton\"\r\n        let-rejectButton=\"rejectButton\"\r\n        let-canConfirm=\"canConfirm\"\r\n        let-allActionsDisabled=\"allActionsDisabled\"\r\n        let-onConfirm=\"onConfirm\"\r\n        let-onReject=\"onReject\"\r\n        let-dialogVariant=\"dialogVariant\"\r\n        let-dialogCompact=\"dialogCompact\"\r\n      >\r\n        <div class=\"ard-dialog-buttons-container\">\r\n          @if (rejectButton.enabled) {\r\n            <ard-button\r\n              [color]=\"rejectButton.color\"\r\n              [appearance]=\"rejectButton.appearance\"\r\n              [variant]=\"dialogVariant\"\r\n              [compact]=\"dialogCompact\"\r\n              [disabled]=\"allActionsDisabled\"\r\n              (click)=\"onReject()\"\r\n            >\r\n              {{ rejectButton.text }}\r\n            </ard-button>\r\n          }\r\n          <ard-button\r\n            [color]=\"confirmButton.color\"\r\n            [appearance]=\"confirmButton.appearance\"\r\n            [variant]=\"dialogVariant\"\r\n            [compact]=\"dialogCompact\"\r\n            (click)=\"onConfirm()\"\r\n            [disabled]=\"!canConfirm || allActionsDisabled\"\r\n          >\r\n            {{ confirmButton.text }}\r\n          </ard-button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n" }]
         }] });
 class ArdiumModalModule {
@@ -13673,11 +13718,11 @@ class _ArdSimpleSnackbarComponent {
         return `ard-color-${this.color}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _ArdSimpleSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: _ArdSimpleSnackbarComponent, isStandalone: true, selector: "ard-simple-snackbar", ngImport: i0, template: "<div\n  class=\"ard-snackbar\"\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\n  [class]=\"colorClass\"\n>\n  <div class=\"ard-snackbar-content\">\n    @if (typeIcon) {\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\n    }\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\n  </div>\n  @if (data.action) {\n    <ard-button\n      class=\"ard-snackbar-action\"\n      appearance=\"transparent\"\n      lightColoring\n      [color]=\"color\"\n      (click)=\"closeWithAction()\"\n      >{{ data.action }}</ard-button\n    >\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { 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: "18.2.13", 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: ["icon", "variant", "alignIcon", "vertical"] }, { 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: "18.2.13", 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\n  class=\"ard-snackbar\"\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\n  [class]=\"colorClass\"\n>\n  <div class=\"ard-snackbar-content\">\n    @if (typeIcon) {\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\n    }\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\n  </div>\n  @if (data.action) {\n    <ard-button\n      class=\"ard-snackbar-action\"\n      appearance=\"transparent\"\n      lightColoring\n      [color]=\"color\"\n      (click)=\"closeWithAction()\"\n      >{{ data.action }}</ard-button\n    >\n  }\n</div>\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" }]
         }] });
 const _snackbarDefaults = {
@@ -13924,5 +13969,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map