@ardium-ui/ui 2.0.2 → 2.0.4

package/fesm2022/ardium-ui-ui.mjs

@@ -182,11 +182,11 @@ class ArdiumChipComponent extends _DisablableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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.0.2", 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.0.2", 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"] }]
         }] });
 
 class _FocusableComponentBase extends _DisablableComponentBase {
@@ -423,7 +423,7 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<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.0.2", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
             type: Component,
@@ -433,16 +433,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                             multi: true,
                         },
-                    ], template: "<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"] }]
         }] });
 
 class _ClearButtonComponent extends _FocusableComponentBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _ClearButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: _ClearButtonComponent, selector: "ard-clear-button", usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  class=\"ard-clear-btn-wrapper\"\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.0.2", 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.0.2", ngImport: i0, type: _ClearButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-clear-button', template: "<button\n  #focusableElement\n  class=\"ard-clear-btn-wrapper\"\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" }]
         }] });
 
 class ArdiumDeletableChipComponent extends _FocusableComponentBase {
@@ -477,7 +477,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.0.2", ngImport: i0, type: ArdiumDeletableChipComponent, decorators: [{
             type: Component,
@@ -487,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             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"] }]
         }] });
 
 class _ClearButtonModule {
@@ -625,13 +625,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.0.2", ngImport: i0, type: ArdiumDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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: { attributes: { "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.0.2", 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.0.2", 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"] }]
+                        '[class.ard-open]': 'isOpen()',
+                    }, template: "<div\r\n  class=\"ard-dropdown-panel-container\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @if (headerTemplate()) {\r\n    <div class=\"ard-dropdown-header\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"headerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n  <div\r\n    #scroll\r\n    class=\"ard-dropdown-panel-content\"\r\n    [attr.id]=\"panelId()\"\r\n    (scroll)=\"onScroll()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (footerTemplate()) {\r\n    <div class=\"ard-dropdown-footer\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"footerTemplate()\"\r\n        [ngTemplateOutletContext]=\"{ searchTerm: filterValue() }\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"] }]
         }] });
 
 class ArdiumDropdownPanelModule {
@@ -1428,11 +1428,11 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
         this.suffixTemplate = contentChild(ArdFormFieldSuffixTemplateDirective);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumFormFieldFrameComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { isFocused: { classPropertyName: "isFocused", 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.0.2", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { isFocused: { classPropertyName: "isFocused", 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.0.2", 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"] }]
         }], propDecorators: { isFocused: [{
                 type: Input
             }] } });
@@ -2226,7 +2226,7 @@ class ArdiumSelectComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n      @if (shouldDisplayValue()) {\r\n        @for (item of itemStorage.selectedItems(); track item.index()) {\r\n          <div\r\n            class=\"ard-select-value\"\r\n            [class.ard-value-disabled]=\"item.disabled()\"\r\n            [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n          >\r\n            <ng-template\r\n              *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n              [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n              [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-item\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n        </ng-template>\r\n        <ng-template\r\n          #defaultMultiValueTemplate\r\n          let-item\r\n          let-unselect=\"unselect\"\r\n        >\r\n          <ard-deletable-chip\r\n            (delete)=\"unselect(item)\"\r\n            [variant]=\"variant()\"\r\n            compact\r\n            appearance=\"outlined-strong\"\r\n          >\r\n            <div\r\n              [ardInnerHTML]=\"item.label()\"\r\n              [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n            ></div>\r\n            <!-- TODO check if can remove div -->\r\n          </ard-deletable-chip>\r\n        </ng-template>\r\n      }\r\n\r\n      @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n        <div class=\"ard-overflow-indicator\">\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n            [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n          />\r\n\r\n          <ng-template\r\n            #defaultItemDisplayLimitTemplate\r\n            let-count=\"overflowCount\"\r\n          >\r\n            <div>{{ count }} more...</div>\r\n          </ng-template>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n        <ng-template #defaultLoadingSpinnerTemplate>\r\n          <div class=\"ard-simple-spinner\"></div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      }\r\n\r\n      @if (shouldShowClearButton()) {\r\n        <ard-clear-button\r\n          [title]=\"clearButtonTitle()\"\r\n          (click)=\"handleClearButtonClick($event)\"\r\n        />\r\n      }\r\n\r\n      <button\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) {\r\n      @for (group of itemStorage.groups(); track $index) {\r\n        <div\r\n          class=\"ard-optgroup\"\r\n          role=\"group\"\r\n          [class.ard-group-disabled]=\"group.disabled()\"\r\n          [class.ard-group-selected]=\"group.selected()\"\r\n          [class.ard-group-highlighted]=\"group.highlighted()\"\r\n          (mouseover)=\"onGroupMouseover(group)\"\r\n          (click)=\"onGroupClick(group)\"\r\n        >\r\n          @if (group.label() !== '' && group.label() !== undefined) {\r\n            <ng-template\r\n              #defaultOptgroupTemplate\r\n              let-group\r\n            >\r\n              <span\r\n                class=\"ard-optgroup-label\"\r\n                [ardInnerHTML]=\"group.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n              [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n            />\r\n          }\r\n\r\n          <div class=\"ard-optgroup-children\">\r\n            @for (option of group.children(); track option.index()) {\r\n              <div\r\n                class=\"ard-option\"\r\n                role=\"option\"\r\n                [class.ard-option-disabled]=\"option.disabled()\"\r\n                [class.ard-option-selected]=\"option.selected()\"\r\n                [class.ard-option-highlighted]=\"option.highlighted()\"\r\n                [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n                [attr.aria-selected]=\"option.selected()\"\r\n                [attr.id]=\"htmlId() + '-' + option.index()\"\r\n                (click)=\"onItemClick(option, $event)\"\r\n                (mouseover)=\"onItemMouseOver($event)\"\r\n                (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n                (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n              >\r\n                <div class=\"ard-option-label\">\r\n                  <ng-template\r\n                    #defaultOptionTemplate\r\n                    let-option\r\n                  >\r\n                    <span\r\n                      [ardInnerHTML]=\"option.label()\"\r\n                      [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n                    ></span>\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n                    [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (shouldShowNoItemsFound()) {\r\n      <ng-template #defaultNoItemsFoundTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n        [ngTemplateOutletContext]=\"getSearchContext()\"\r\n      />\r\n    }\r\n\r\n    @if (shouldShowAddCustom()) {\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <div\r\n          class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n          (click)=\"addCustomOption(searchTerm)\"\r\n        >\r\n          <span class=\"ard-add-custom-label\">Add option</span>\r\n          <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    }\r\n\r\n    @if (isLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n        [ngTemplateOutletContext]=\"getSearchContext()\"\r\n      />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index()) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n          <!-- TODO check if can remove div -->\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-simple-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index()) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index()\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
             type: Component,
@@ -2236,7 +2236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumSelectComponent),
                             multi: true,
                         },
-                    ], template: "<ard-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>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n      @if (shouldDisplayValue()) {\r\n        @for (item of itemStorage.selectedItems(); track item.index()) {\r\n          <div\r\n            class=\"ard-select-value\"\r\n            [class.ard-value-disabled]=\"item.disabled()\"\r\n            [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n          >\r\n            <ng-template\r\n              *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n              [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n              [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-item\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n        </ng-template>\r\n        <ng-template\r\n          #defaultMultiValueTemplate\r\n          let-item\r\n          let-unselect=\"unselect\"\r\n        >\r\n          <ard-deletable-chip\r\n            (delete)=\"unselect(item)\"\r\n            [variant]=\"variant()\"\r\n            compact\r\n            appearance=\"outlined-strong\"\r\n          >\r\n            <div\r\n              [ardInnerHTML]=\"item.label()\"\r\n              [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n            ></div>\r\n            <!-- TODO check if can remove div -->\r\n          </ard-deletable-chip>\r\n        </ng-template>\r\n      }\r\n\r\n      @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n        <div class=\"ard-overflow-indicator\">\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n            [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n          />\r\n\r\n          <ng-template\r\n            #defaultItemDisplayLimitTemplate\r\n            let-count=\"overflowCount\"\r\n          >\r\n            <div>{{ count }} more...</div>\r\n          </ng-template>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n        <ng-template #defaultLoadingSpinnerTemplate>\r\n          <div class=\"ard-simple-spinner\"></div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      }\r\n\r\n      @if (shouldShowClearButton()) {\r\n        <ard-clear-button\r\n          [title]=\"clearButtonTitle()\"\r\n          (click)=\"handleClearButtonClick($event)\"\r\n        />\r\n      }\r\n\r\n      <button\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) {\r\n      @for (group of itemStorage.groups(); track $index) {\r\n        <div\r\n          class=\"ard-optgroup\"\r\n          role=\"group\"\r\n          [class.ard-group-disabled]=\"group.disabled()\"\r\n          [class.ard-group-selected]=\"group.selected()\"\r\n          [class.ard-group-highlighted]=\"group.highlighted()\"\r\n          (mouseover)=\"onGroupMouseover(group)\"\r\n          (click)=\"onGroupClick(group)\"\r\n        >\r\n          @if (group.label() !== '' && group.label() !== undefined) {\r\n            <ng-template\r\n              #defaultOptgroupTemplate\r\n              let-group\r\n            >\r\n              <span\r\n                class=\"ard-optgroup-label\"\r\n                [ardInnerHTML]=\"group.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n              [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n            />\r\n          }\r\n\r\n          <div class=\"ard-optgroup-children\">\r\n            @for (option of group.children(); track option.index()) {\r\n              <div\r\n                class=\"ard-option\"\r\n                role=\"option\"\r\n                [class.ard-option-disabled]=\"option.disabled()\"\r\n                [class.ard-option-selected]=\"option.selected()\"\r\n                [class.ard-option-highlighted]=\"option.highlighted()\"\r\n                [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n                [attr.aria-selected]=\"option.selected()\"\r\n                [attr.id]=\"htmlId() + '-' + option.index()\"\r\n                (click)=\"onItemClick(option, $event)\"\r\n                (mouseover)=\"onItemMouseOver($event)\"\r\n                (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n                (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n              >\r\n                <div class=\"ard-option-label\">\r\n                  <ng-template\r\n                    #defaultOptionTemplate\r\n                    let-option\r\n                  >\r\n                    <span\r\n                      [ardInnerHTML]=\"option.label()\"\r\n                      [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n                    ></span>\r\n                  </ng-template>\r\n\r\n                  <ng-template\r\n                    [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n                    [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (shouldShowNoItemsFound()) {\r\n      <ng-template #defaultNoItemsFoundTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n        [ngTemplateOutletContext]=\"getSearchContext()\"\r\n      />\r\n    }\r\n\r\n    @if (shouldShowAddCustom()) {\r\n      <ng-template\r\n        #defaultAddCustomTemplate\r\n        let-searchTerm\r\n      >\r\n        <div\r\n          class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n          (click)=\"addCustomOption(searchTerm)\"\r\n        >\r\n          <span class=\"ard-add-custom-label\">Add option</span>\r\n          <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n      />\r\n    }\r\n\r\n    @if (isLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n        [ngTemplateOutletContext]=\"getSearchContext()\"\r\n      />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index()) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n          <!-- TODO check if can remove div -->\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-simple-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index()) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index()\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { _groupItemsHostAttribute: [{
                 type: HostBinding,
                 args: ['class.ard-group-items']
@@ -2815,7 +2815,7 @@ class ArdiumSimpleInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumSimpleInputComponent),
                 multi: true,
             },
-        ], 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 }], 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  [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\n          #defaultPlaceholderTemplate\n        >\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}.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: ["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 }], 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  [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\r\n          #defaultPlaceholderTemplate\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (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}.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: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
             type: Component,
@@ -2825,7 +2825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumSimpleInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact\"\n  [isFocused]=\"isFocused\"\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\n          #defaultPlaceholderTemplate\n        >\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}.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  [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\r\n          #defaultPlaceholderTemplate\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (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}.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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -3313,7 +3313,7 @@ class ArdiumInputComponent extends ArdiumSimpleInputComponent {
                 useExisting: forwardRef(() => ArdiumInputComponent),
                 multi: true,
             },
-        ], 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: ArdSuggestionTemplateDirective, 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  [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\n          #defaultPlaceholderTemplate\n        >\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}.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: ["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: ArdSuggestionTemplateDirective, 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  [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\r\n          #defaultPlaceholderTemplate\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <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}.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: ["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.0.2", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
@@ -3323,7 +3323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\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\n          #defaultPlaceholderTemplate\n        >\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}.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  [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\r\n          #defaultPlaceholderTemplate\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <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}.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: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i1$1.ScrollStrategyOptions }], propDecorators: { suggestions: [{
                 type: Input
             }], onWindowResize: [{
@@ -3759,7 +3759,7 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumDigitInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-digit-input\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (data of configArrayData(); track $index) {\n    <div class=\"ard-digit-input__item\">\n      @if (data.type === 'input') {\n        <input\n          #input\n          #focusableElement\n          class=\"ard-digit-input__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          [readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\n          (paste)=\"onPaste($event, data.index!)\"\n          (input)=\"onInput($event, data.index!)\"\n          (focus)=\"onFocusMaster($event, data.index!)\"\n          (blur)=\"onBlurMaster($event, data.index!)\"\n          (keydown)=\"onKeydown($event, data.index!)\"\n        />\n      } @else {\n        <div class=\"ard-digit-input__static\">\n          {{ data.char }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n    <div class=\"ard-digit-input__item\">\r\n      @if (data.type === 'input') {\r\n        <input\r\n          #input\r\n          #focusableElement\r\n          class=\"ard-digit-input__input\"\r\n          type=\"text\"\r\n          autocomplete=\"off\"\r\n          [readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n          (paste)=\"onPaste($event, data.index!)\"\r\n          (input)=\"onInput($event, data.index!)\"\r\n          (focus)=\"onFocusMaster($event, data.index!)\"\r\n          (blur)=\"onBlurMaster($event, data.index!)\"\r\n          (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n      } @else {\r\n        <div class=\"ard-digit-input__static\">\r\n          {{ data.char }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\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.0.2", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
@@ -3769,7 +3769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumDigitInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-digit-input\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (data of configArrayData(); track $index) {\n    <div class=\"ard-digit-input__item\">\n      @if (data.type === 'input') {\n        <input\n          #input\n          #focusableElement\n          class=\"ard-digit-input__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          [readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\n          (paste)=\"onPaste($event, data.index!)\"\n          (input)=\"onInput($event, data.index!)\"\n          (focus)=\"onFocusMaster($event, data.index!)\"\n          (blur)=\"onBlurMaster($event, data.index!)\"\n          (keydown)=\"onKeydown($event, data.index!)\"\n        />\n      } @else {\n        <div class=\"ard-digit-input__static\">\n          {{ data.char }}\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n    <div class=\"ard-digit-input__item\">\r\n      @if (data.type === 'input') {\r\n        <input\r\n          #input\r\n          #focusableElement\r\n          class=\"ard-digit-input__input\"\r\n          type=\"text\"\r\n          autocomplete=\"off\"\r\n          [readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n          (paste)=\"onPaste($event, data.index!)\"\r\n          (input)=\"onInput($event, data.index!)\"\r\n          (focus)=\"onFocusMaster($event, data.index!)\"\r\n          (blur)=\"onBlurMaster($event, data.index!)\"\r\n          (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n      } @else {\r\n        <div class=\"ard-digit-input__static\">\r\n          {{ data.char }}\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -3889,11 +3889,11 @@ class ArdiumIconComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.2", 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.0.2", 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.0.2", 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 _NgModelComponentBase {
@@ -4023,7 +4023,7 @@ class ArdiumPasswordInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumPasswordInputComponent),
                 multi: true,
             },
-        ], 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  [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        (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: ["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  [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: ["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.0.2", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -4033,7 +4033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumPasswordInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\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        (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  [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" }]
         }] });
 
 class ArdiumIconModule {
@@ -4084,6 +4084,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+const ButtonType = {
+    Button: 'button',
+    Submit: 'submit',
+    Reset: 'reset',
+};
+
 /**
  * General button appearance. Controls which parts of the button can be colored.
  *
@@ -4160,6 +4166,7 @@ class ArdiumButtonComponent extends _ButtonBase {
     constructor() {
         super(...arguments);
         this.icon = input('');
+        this.type = input(ButtonType.Button);
         //! button settings
         this.variant = input(ButtonVariant.Rounded);
         this.alignIcon = input(SimpleOneAxisAlignment.Left);
@@ -4176,11 +4183,11 @@ class ArdiumButtonComponent extends _ButtonBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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 } }, usesInheritance: true, ngImport: i0, template: "<button\n  #buttonElement\n  class=\"ard-button\"\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.0.2", type: ArdiumButtonComponent, selector: "ard-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 } }, 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.0.2", ngImport: i0, type: ArdiumButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #buttonElement\n  class=\"ard-button\"\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"] }]
+            args: [{ selector: 'ard-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 
 class ArdiumButtonModule {
@@ -4403,7 +4410,7 @@ class ArdiumNumberInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumNumberInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-number-input\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-has-value]=\"value\"\n  (mousedown)=\"$event.preventDefault()\"\n  (mouseup)=\"onMouseup()\"\n>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button decrement\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canDecrement()\"\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(-1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(-1)\"\n      ardHoldSpaceKey\n    >\n      -\n    </ard-button>\n  }\n  <div class=\"ard-input-container\">\n    @if (shouldDisplayPlaceholder()) {\n      <ng-template\n        #defaultPlaceholderTemplate\n        let-plchldr\n      >\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      (mousedown)=\"$event.stopPropagation()\"\n      (mouseup)=\"$event.stopPropagation()\"\n      (copy)=\"onCopy($event)\"\n    />\n  </div>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button increment\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canIncrement()\"\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(1)\"\n      ardHoldSpaceKey\n    >\n      +\n    </ard-button>\n  }\n</div>\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardHoldSpaceKey", "ardHoldEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n      (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n      <ng-template\r\n        #defaultPlaceholderTemplate\r\n        let-plchldr\r\n      >\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n      (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n      (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardHoldSpaceKey", "ardHoldEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "type", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
@@ -4413,7 +4420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumNumberInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-number-input\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-has-value]=\"value\"\n  (mousedown)=\"$event.preventDefault()\"\n  (mouseup)=\"onMouseup()\"\n>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button decrement\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canDecrement()\"\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(-1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(-1)\"\n      ardHoldSpaceKey\n    >\n      -\n    </ard-button>\n  }\n  <div class=\"ard-input-container\">\n    @if (shouldDisplayPlaceholder()) {\n      <ng-template\n        #defaultPlaceholderTemplate\n        let-plchldr\n      >\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      (mousedown)=\"$event.stopPropagation()\"\n      (mouseup)=\"$event.stopPropagation()\"\n      (copy)=\"onCopy($event)\"\n    />\n  </div>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button increment\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canIncrement()\"\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(1)\"\n      ardHoldSpaceKey\n    >\n      +\n    </ard-button>\n  }\n</div>\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n      (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n      <ng-template\r\n        #defaultPlaceholderTemplate\r\n        let-plchldr\r\n      >\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n      (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n      (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -4665,11 +4672,11 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-file-drop-area\"\n  (ardClickOutside)=\"onDragleave()\"\n  (dragleave)=\"onDragleave()\"\n  (dragover)=\"onDragover($event)\"\n  (drop)=\"onDrop($event)\"\n  [ngClass]=\"ngClasses\"\n>\n  <div class=\"ard-file-drop-area-outline\">\n    <div class=\"ard-file-drop-area-content\">\n      @if (currentViewState() === 'idle') {\n        <ng-template\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n          [ngTemplateOutletContext]=\"getIdleContext()\"\n        />\n      }\n      <ng-template\n        *ngIf=\"currentViewState() === 'dragover'\"\n        [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\n      ></ng-template>\n      <ng-template\n        *ngIf=\"currentViewState() === 'uploaded'\"\n        [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n<input\n  #fileInput\n  class=\"ard-file-drop-area-input-element\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\n  <strong class=\"ard-file-drop-area-drop-text\">\n    <span *ngIf=\"!multiple\">Drag & Drop a file</span>\n    <span *ngIf=\"multiple\">Drag & Drop files</span>\n    here\n  </strong>\n  <span class=\"ard-file-drop-area-or-text\">or</span>\n  <ard-button\n    class=\"ard-file-drop-area-browse-button\"\n    appearance=\"transparent\"\n    [compact]=\"compact()\"\n    [variant]=\"variant()\"\n    [color]=\"color()\"\n    (click)=\"browse()\"\n    >Browse files</ard-button\n  >\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\n  <span class=\"ard-file-drop-area-dragover-amount\">\n    {{ amount }}\n    <ng-container [ngPlural]=\"amount\">\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\n      <ng-template ngPluralCase=\"other\">files</ng-template>\n    </ng-container>\n  </span>\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\n  @if (amount > 1 && !multiple()) {\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\n  }\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n  let-files=\"files\"\n>\n  <div class=\"ard-file-drop-area-uploaded-container\">\n    <div class=\"ard-file-drop-area-uploaded-message\">\n      <span class=\"ard-file-drop-area-uploaded-amount\">\n        {{ amount }}\n        <ng-container [ngPlural]=\"amount\">\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\n          <ng-template ngPluralCase=\"other\">files</ng-template>\n        </ng-container>\n      </span>\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\n    </div>\n    <div class=\"ard-file-drop-area-uploaded-files\">\n      @for (file of files; track $index) {\n        <div class=\"ard-file-drop-area-file\">\n          <ard-icon>draft</ard-icon>\n          <div class=\"ard-file-drop-area-file-info\">\n            <span class=\"ard-file-drop-area-filename\">\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\n            </span>\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFilesizePipe, name: "filesize" }, { kind: "pipe", type: i4.ArdiumFilenamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileextPipe, name: "fileext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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      <ng-template\r\n        *ngIf=\"currentViewState() === 'dragover'\"\r\n        [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      ></ng-template>\r\n      <ng-template\r\n        *ngIf=\"currentViewState() === 'uploaded'\"\r\n        [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      ></ng-template>\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    <span *ngIf=\"!multiple\">Drag & Drop a file</span>\r\n    <span *ngIf=\"multiple\">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    >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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "type", "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.0.2", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-file-drop-area\"\n  (ardClickOutside)=\"onDragleave()\"\n  (dragleave)=\"onDragleave()\"\n  (dragover)=\"onDragover($event)\"\n  (drop)=\"onDrop($event)\"\n  [ngClass]=\"ngClasses\"\n>\n  <div class=\"ard-file-drop-area-outline\">\n    <div class=\"ard-file-drop-area-content\">\n      @if (currentViewState() === 'idle') {\n        <ng-template\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n          [ngTemplateOutletContext]=\"getIdleContext()\"\n        />\n      }\n      <ng-template\n        *ngIf=\"currentViewState() === 'dragover'\"\n        [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\n      ></ng-template>\n      <ng-template\n        *ngIf=\"currentViewState() === 'uploaded'\"\n        [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n<input\n  #fileInput\n  class=\"ard-file-drop-area-input-element\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\n  <strong class=\"ard-file-drop-area-drop-text\">\n    <span *ngIf=\"!multiple\">Drag & Drop a file</span>\n    <span *ngIf=\"multiple\">Drag & Drop files</span>\n    here\n  </strong>\n  <span class=\"ard-file-drop-area-or-text\">or</span>\n  <ard-button\n    class=\"ard-file-drop-area-browse-button\"\n    appearance=\"transparent\"\n    [compact]=\"compact()\"\n    [variant]=\"variant()\"\n    [color]=\"color()\"\n    (click)=\"browse()\"\n    >Browse files</ard-button\n  >\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\n  <span class=\"ard-file-drop-area-dragover-amount\">\n    {{ amount }}\n    <ng-container [ngPlural]=\"amount\">\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\n      <ng-template ngPluralCase=\"other\">files</ng-template>\n    </ng-container>\n  </span>\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\n  @if (amount > 1 && !multiple()) {\n    <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\n  }\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n  let-files=\"files\"\n>\n  <div class=\"ard-file-drop-area-uploaded-container\">\n    <div class=\"ard-file-drop-area-uploaded-message\">\n      <span class=\"ard-file-drop-area-uploaded-amount\">\n        {{ amount }}\n        <ng-container [ngPlural]=\"amount\">\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\n          <ng-template ngPluralCase=\"other\">files</ng-template>\n        </ng-container>\n      </span>\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\n    </div>\n    <div class=\"ard-file-drop-area-uploaded-files\">\n      @for (file of files; track $index) {\n        <div class=\"ard-file-drop-area-file\">\n          <ard-icon>draft</ard-icon>\n          <div class=\"ard-file-drop-area-file-info\">\n            <span class=\"ard-file-drop-area-filename\">\n              <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\n              <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext: true }}</span>\n            </span>\n            <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+            args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n      }\r\n      <ng-template\r\n        *ngIf=\"currentViewState() === 'dragover'\"\r\n        [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      ></ng-template>\r\n      <ng-template\r\n        *ngIf=\"currentViewState() === 'uploaded'\"\r\n        [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      ></ng-template>\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    <span *ngIf=\"!multiple\">Drag & Drop a file</span>\r\n    <span *ngIf=\"multiple\">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    >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"] }]
         }], propDecorators: { idleTemplate: [{
                 type: ContentChild,
                 args: [ArdiumFileDropAreaIdleContentTemplateDirective, {
@@ -4982,7 +4989,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdColorInputPlaceholderTemplateDirective, 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\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\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: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdColorInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate\"\r\n  [suffixTemplate]=\"suffixTemplate\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @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: ["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.0.2", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -4992,7 +4999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             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\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\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"] }]
+                    ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate\"\r\n  [suffixTemplate]=\"suffixTemplate\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @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"] }]
         }], propDecorators: { placeholderTemplate: [{
                 type: ContentChild,
                 args: [ArdColorInputPlaceholderTemplateDirective, {
@@ -5311,7 +5318,7 @@ class ArdiumHexInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumHexInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-hex-input\"\n    [class.ard-has-value]=\"value\"\n    (mouseup)=\"onMouseup()\"\n  >\n    <div\n      class=\"ard-hash-container\"\n      *ngIf=\"showHash\"\n    >\n      #\n    </div>\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, $event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (mouseup)=\"$event.stopPropagation()\"\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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n    <ard-clear-button\r\n      [title]=\"clearButtonTitle()\"\r\n      (click)=\"onClearButtonClick($event)\"\r\n    />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
@@ -5321,7 +5328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumHexInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-hex-input\"\n    [class.ard-has-value]=\"value\"\n    (mouseup)=\"onMouseup()\"\n  >\n    <div\n      class=\"ard-hash-container\"\n      *ngIf=\"showHash\"\n    >\n      #\n    </div>\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, $event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (mouseup)=\"$event.stopPropagation()\"\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}\n"] }]
+                    ], template: "<ard-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>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n    <ard-clear-button\r\n      [title]=\"clearButtonTitle()\"\r\n      (click)=\"onClearButtonClick($event)\"\r\n    />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -5388,11 +5395,11 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
         this._changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, 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 } }, usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-radio\"\n  [ngClass]=\"ngClasses()\"\n  #focusableElement\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.0.2", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, 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 } }, 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.0.2", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-radio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"ard-radio\"\n  [ngClass]=\"ngClasses()\"\n  #focusableElement\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"] }]
         }] });
 
 class ArdiumRadioGroupComponent extends _NgModelComponentBase {
@@ -6321,11 +6328,11 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
         this.itemStorage.unhighlightAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumSegmentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { 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 }, iconBased: { classPropertyName: "iconBased", publicName: "iconBased", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, uniformWidths: { classPropertyName: "uniformWidths", publicName: "uniformWidths", isSignal: true, isRequired: false, transformFunction: null }, itemsPerRow: { classPropertyName: "itemsPerRow", publicName: "itemsPerRow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\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  #focusableElement\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      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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { 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 }, iconBased: { classPropertyName: "iconBased", publicName: "iconBased", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, uniformWidths: { classPropertyName: "uniformWidths", publicName: "uniformWidths", isSignal: true, isRequired: false, transformFunction: null }, itemsPerRow: { classPropertyName: "itemsPerRow", publicName: "itemsPerRow", isSignal: true, isRequired: false, transformFunction: null } }, 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.0.2", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\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  #focusableElement\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      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"] }]
+            args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 
 class ArdiumSegmentModule {
@@ -6667,7 +6674,7 @@ class ArdiumSliderComponent extends _AbstractSlider {
                 useExisting: forwardRef(() => ArdiumSliderComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{ width: getHandlePosition(1) }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n      <div class=\"ard-value-tick-container\">\r\n        @for (tick of _tickArray(); track tick) {\r\n        <div\r\n          class=\"ard-value-tick\"\r\n          [style]=\"{ left: tick }\"\r\n        ></div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed()\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n      (touchstart)=\"onPointerDownOnHandle($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n    <div\r\n      class=\"ard-slider-tooltip-wrapper\"\r\n      [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <ng-template\r\n        #defaultTooltipTemplate\r\n        let-value\r\n      >\r\n        <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n        [ngTemplateOutletContext]=\"getTooltipContext()\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n  <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", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{ width: getHandlePosition(1) }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n      <div class=\"ard-value-tick-container\">\r\n        @for (tick of _tickArray(); track tick) {\r\n        <div\r\n          class=\"ard-value-tick\"\r\n          [style]=\"{ left: tick }\"\r\n        ></div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed()\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n      (touchstart)=\"onPointerDownOnHandle($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n    <div\r\n      class=\"ard-slider-tooltip-wrapper\"\r\n      [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <ng-template\r\n        #defaultTooltipTemplate\r\n        let-value\r\n      >\r\n        <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n        [ngTemplateOutletContext]=\"getTooltipContext()\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n  <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", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumSliderComponent, decorators: [{
             type: Component,
@@ -6677,7 +6684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumSliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"ard-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{ width: getHandlePosition(1) }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n      <div class=\"ard-value-tick-container\">\r\n        @for (tick of _tickArray(); track tick) {\r\n        <div\r\n          class=\"ard-value-tick\"\r\n          [style]=\"{ left: tick }\"\r\n        ></div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed()\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n      (touchstart)=\"onPointerDownOnHandle($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n    <div\r\n      class=\"ard-slider-tooltip-wrapper\"\r\n      [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <ng-template\r\n        #defaultTooltipTemplate\r\n        let-value\r\n      >\r\n        <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n        [ngTemplateOutletContext]=\"getTooltipContext()\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n  <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", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-slider-container-master\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n  [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n  <div class=\"ard-slider-container\">\r\n    <div\r\n      #track\r\n      class=\"ard-slider-track\"\r\n      (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n    >\r\n      <div class=\"ard-hitbox\"></div>\r\n      <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n      <div\r\n        class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n        [style]=\"{ width: getHandlePosition(1) }\"\r\n      ></div>\r\n      @if (showValueTicks()) {\r\n      <div class=\"ard-value-tick-container\">\r\n        @for (tick of _tickArray(); track tick) {\r\n        <div\r\n          class=\"ard-value-tick\"\r\n          [style]=\"{ left: tick }\"\r\n        ></div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed()\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n      (touchstart)=\"onPointerDownOnHandle($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n    <div\r\n      class=\"ard-slider-tooltip-wrapper\"\r\n      [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n      [style]=\"{ left: getHandlePosition(1) }\"\r\n    >\r\n      <ng-template\r\n        #defaultTooltipTemplate\r\n        let-value\r\n      >\r\n        <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n        [ngTemplateOutletContext]=\"getTooltipContext()\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n  <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", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"] }]
         }], propDecorators: { onPointerMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -6827,11 +6834,11 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         this.currentHandle.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumRangeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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      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      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n    <div\r\n      class=\"ard-slider-tooltip-wrapper\"\r\n      [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <ng-template\r\n        #defaultTooltipTemplate\r\n        let-value\r\n      >\r\n        <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n        [ngTemplateOutletContext]=\"getTooltipContext('high')\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n  <div\r\n    class=\"ard-slider-label-container\"\r\n    *ngIf=\"labelObjects.length\"\r\n  >\r\n    @for (label of labelObjects(); track $index) {\r\n    <div\r\n      class=\"ard-slider-label\"\r\n      [style]=\"{ left: label.positionPercent }\"\r\n    >\r\n      {{ label.label }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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.0.2", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
             type: Component,
-            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      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      class=\"ard-slider-handle\"\r\n      [tabindex]=\"tabIndex()\"\r\n      [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n      (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n      (focus)=\"onHandleFocus($event, 2)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-hitbox\"></div>\r\n    </button>\r\n    @if (tooltipBehavior() !== 'never') {\r\n    <div\r\n      class=\"ard-slider-tooltip-wrapper\"\r\n      [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n      [style]=\"{ left: getHandlePosition(2) }\"\r\n    >\r\n      <ng-template\r\n        #defaultTooltipTemplate\r\n        let-value\r\n      >\r\n        <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n        [ngTemplateOutletContext]=\"getTooltipContext('high')\"\r\n      >\r\n      </ng-template>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (labelObjects().length) {\r\n  <div\r\n    class=\"ard-slider-label-container\"\r\n    *ngIf=\"labelObjects.length\"\r\n  >\r\n    @for (label of labelObjects(); track $index) {\r\n    <div\r\n      class=\"ard-slider-label\"\r\n      [style]=\"{ left: label.positionPercent }\"\r\n    >\r\n      {{ label.label }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n  <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
+            args: [{ 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"] }]
         }], propDecorators: { onPointerMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -6890,11 +6897,11 @@ class ArdiumStarComponent {
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color()}`, `ard-star-fill-${this.fill()}`].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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 }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-star-icon ard-star-selected\"></div>\n  <div class=\"ard-star-icon ard-star-half\"></div>\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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 }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-star-icon ard-star-selected\"></div>\r\n  <div class=\"ard-star-icon ard-star-half\"></div>\r\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\r\n</div>\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.0.2", ngImport: i0, type: ArdiumStarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-star-icon ard-star-selected\"></div>\n  <div class=\"ard-star-icon ard-star-half\"></div>\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\n</div>\n" }]
+            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-star-icon ard-star-selected\"></div>\r\n  <div class=\"ard-star-icon ard-star-half\"></div>\r\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\r\n</div>\r\n" }]
         }] });
 
 class ArdiumStarButtonComponent extends _BooleanComponentBase {
@@ -6919,7 +6926,7 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-star\n    [fill]=\"starFillState()\"\n    [color]=\"color()\"\n  ></ard-star>\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "fill"] }], 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-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  <ard-star\r\n    [fill]=\"starFillState()\"\r\n    [color]=\"color()\"\r\n  ></ard-star>\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: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
             type: Component,
@@ -6929,7 +6936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  #focusableElement\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-star\n    [fill]=\"starFillState()\"\n    [color]=\"color()\"\n  ></ard-star>\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  <ard-star\r\n    [fill]=\"starFillState()\"\r\n    [color]=\"color()\"\r\n  ></ard-star>\r\n</button>\r\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
         }] });
 
 class ArdiumStarModule {
@@ -7121,7 +7128,7 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumStarInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-star-input\"\n  [ngClass]=\"ngClasses()\"\n  (mouseleave)=\"setDisplayToValue()\"\n>\n  @for (object of starArray(); track $index) {\n    <ard-star-button\n      #starButton\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\n      [color]=\"object.isInValue ? color() : 'none'\"\n      clickStrategy=\"noop\"\n      [selected]=\"object.filled\"\n      (click)=\"onStarClick($index)\"\n      (focus)=\"onStarButtonFocus($index, $event)\"\n      (blur)=\"onStarButtonBlur($event)\"\n      (mouseenter)=\"onStarHighlight($index)\"\n      [tabIndex]=\"tabIndex()\"\n    />\n  }\n</div>\n", styles: [".ard-star-input{width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-star-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n  @for (object of starArray(); track $index) {\r\n    <ard-star-button\r\n      #starButton\r\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\r\n      [color]=\"object.isInValue ? color() : 'none'\"\r\n      clickStrategy=\"noop\"\r\n      [selected]=\"object.filled\"\r\n      (click)=\"onStarClick($index)\"\r\n      (focus)=\"onStarButtonFocus($index, $event)\"\r\n      (blur)=\"onStarButtonBlur($event)\"\r\n      (mouseenter)=\"onStarHighlight($index)\"\r\n      [tabIndex]=\"tabIndex()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".ard-star-input{width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumStarInputComponent, decorators: [{
             type: Component,
@@ -7131,7 +7138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumStarInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-star-input\"\n  [ngClass]=\"ngClasses()\"\n  (mouseleave)=\"setDisplayToValue()\"\n>\n  @for (object of starArray(); track $index) {\n    <ard-star-button\n      #starButton\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\n      [color]=\"object.isInValue ? color() : 'none'\"\n      clickStrategy=\"noop\"\n      [selected]=\"object.filled\"\n      (click)=\"onStarClick($index)\"\n      (focus)=\"onStarButtonFocus($index, $event)\"\n      (blur)=\"onStarButtonBlur($event)\"\n      (mouseenter)=\"onStarHighlight($index)\"\n      [tabIndex]=\"tabIndex()\"\n    />\n  }\n</div>\n", styles: [".ard-star-input{width:max-content}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-star-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n  @for (object of starArray(); track $index) {\r\n    <ard-star-button\r\n      #starButton\r\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\r\n      [color]=\"object.isInValue ? color() : 'none'\"\r\n      clickStrategy=\"noop\"\r\n      [selected]=\"object.filled\"\r\n      (click)=\"onStarClick($index)\"\r\n      (focus)=\"onStarButtonFocus($index, $event)\"\r\n      (blur)=\"onStarButtonBlur($event)\"\r\n      (mouseenter)=\"onStarHighlight($index)\"\r\n      [tabIndex]=\"tabIndex()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".ard-star-input{width:max-content}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onKeyPress: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -7251,7 +7258,7 @@ class ArdiumStateboxComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-statebox\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"onClick($event)\"\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($event)\"\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.0.2", ngImport: i0, type: ArdiumStateboxComponent, decorators: [{
             type: Component,
@@ -7261,7 +7268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  class=\"ard-statebox\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (click)=\"onClick($event)\"\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($event)\"\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: () => [] });
 
 class ArdiumStateboxModule {
@@ -7304,7 +7311,7 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<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    } @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.0.2", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
             type: Component,
@@ -7314,7 +7321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                             multi: true,
                         },
-                    ], template: "<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    } @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" }]
         }] });
 
 class ArdiumSlideToggleModule {
@@ -7376,7 +7383,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-checkbox\"\n  role=\"checkbox\"\n  [id]=\"htmlId()\"\n  [ariaChecked]=\"selected()\"\n  [tabindex]=\"tabIndex()\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"toggleState()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\n</button>\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -7386,7 +7393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  class=\"ard-checkbox\"\n  role=\"checkbox\"\n  [id]=\"htmlId()\"\n  [ariaChecked]=\"selected()\"\n  [tabindex]=\"tabIndex()\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"toggleState()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\n</button>\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
         }] });
 
 class ArdiumCheckboxModule {
@@ -7406,6 +7413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 class ArdiumFabComponent extends _ButtonBase {
     constructor() {
         super(...arguments);
+        this.type = input(ButtonType.Button);
         //! appearance
         this.size = input(FABSize.Standard);
         this.extended = input(false, { transform: v => coerceBooleanProperty(v) });
@@ -7418,11 +7426,11 @@ class ArdiumFabComponent extends _ButtonBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumFabComponent, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-fab\"\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.0.2", type: ArdiumFabComponent, selector: "ard-fab", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, 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.0.2", ngImport: i0, type: ArdiumFabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"ard-fab\"\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"] }]
+            args: [{ selector: 'ard-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 
 class ArdiumFabModule {
@@ -7443,6 +7451,7 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
     constructor() {
         super(...arguments);
         this.wrapperClasses = input('');
+        this.type = input(ButtonType.Button);
         //! button settings
         this.color = input(ComponentColor.Primary);
         this.lightColoring = input(false, { transform: v => coerceBooleanProperty(v) });
@@ -7455,11 +7464,11 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", 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 } }, usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-icon-button\"\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-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-fab .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.0.2", 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 } }, 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.0.2", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"ard-icon-button\"\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-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 
 class ArdiumIconButtonModule {
@@ -7573,11 +7582,11 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.selectItem(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumCheckboxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-checkbox-list\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (item of items; track item.index()) {\n    <div\n      class=\"ard-checkbox-list__item\"\n      [class.ard-item-highlighted]=\"item.highlighted()\"\n      [class.ard-item-disabled]=\"item.disabled()\"\n      (mouseover)=\"onItemHighlight(item)\"\n      (mouseleave)=\"onItemBlur()\"\n      (click)=\"toggleItem(item)\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <ard-checkbox\n        [selected]=\"item.selected()\"\n        [disabled]=\"item.disabled()\"\n        [color]=\"color()\"\n        [htmlId]=\"htmlId() + item.index()\"\n        [tabIndex]=\"tabIndex()\"\n        (focus)=\"onFocus($event)\"\n        (focus)=\"onItemFocus(item)\"\n        (blur)=\"onBlur($event)\"\n        (blur)=\"onItemBlur()\"\n        (select)=\"selectItem(item)\"\n        (unselect)=\"unselectItem(item)\"\n      />\n      <label [for]=\"htmlId() + item.index()\">\n        {{ item.label() }}\n      </label>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["wrapperClasses", "htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index()) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      />\r\n      <label [for]=\"htmlId() + item.index()\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["wrapperClasses", "htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-checkbox-list\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (item of items; track item.index()) {\n    <div\n      class=\"ard-checkbox-list__item\"\n      [class.ard-item-highlighted]=\"item.highlighted()\"\n      [class.ard-item-disabled]=\"item.disabled()\"\n      (mouseover)=\"onItemHighlight(item)\"\n      (mouseleave)=\"onItemBlur()\"\n      (click)=\"toggleItem(item)\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <ard-checkbox\n        [selected]=\"item.selected()\"\n        [disabled]=\"item.disabled()\"\n        [color]=\"color()\"\n        [htmlId]=\"htmlId() + item.index()\"\n        [tabIndex]=\"tabIndex()\"\n        (focus)=\"onFocus($event)\"\n        (focus)=\"onItemFocus(item)\"\n        (blur)=\"onBlur($event)\"\n        (blur)=\"onItemBlur()\"\n        (select)=\"selectItem(item)\"\n        (unselect)=\"unselectItem(item)\"\n      />\n      <label [for]=\"htmlId() + item.index()\">\n        {{ item.label() }}\n      </label>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index()) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      />\r\n      <label [for]=\"htmlId() + item.index()\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { _htmlIdHostAttribute: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -7608,11 +7617,11 @@ class ArdiumSpinnerComponent {
         this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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.0.2", 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.0.2", 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 {
@@ -7700,11 +7709,11 @@ class ArdiumProgressBarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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: ArdProgressBarValueTemplateDirective, descendants: true, read: TemplateRef }], 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.1.0", version: "18.0.2", 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: ArdProgressBarValueTemplateDirective, descendants: true, read: TemplateRef }], 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.0.2", 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: () => [], propDecorators: { valueTemplate: [{
                 type: ContentChild,
                 args: [ArdProgressBarValueTemplateDirective, { read: TemplateRef }]
@@ -7776,11 +7785,11 @@ class ArdiumProgressCircleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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: ArdProgressCircleValueTemplateDirective, descendants: true, read: TemplateRef }], 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-value\n    >\n      {{ value }}%\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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: ArdProgressCircleValueTemplateDirective, descendants: true, read: TemplateRef }], 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-value\r\n    >\r\n      {{ value }}%\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", 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-value\n    >\n      {{ value }}%\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-value\r\n    >\r\n      {{ value }}%\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"] }]
         }], propDecorators: { valueTemplate: [{
                 type: ContentChild,
                 args: [ArdProgressCircleValueTemplateDirective, {
@@ -7947,11 +7956,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.0.2", ngImport: i0, type: ArdiumColorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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  <span\n    class=\"ard-color-display-label\"\n    *ngIf=\"withLabel\"\n    >{{ 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"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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  <span\r\n    class=\"ard-color-display-label\"\r\n    *ngIf=\"withLabel\"\r\n    >{{ 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"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", 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  <span\n    class=\"ard-color-display-label\"\n    *ngIf=\"withLabel\"\n    >{{ 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  <span\r\n    class=\"ard-color-display-label\"\r\n    *ngIf=\"withLabel\"\r\n    >{{ 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 {
@@ -7997,11 +8006,11 @@ class ArdiumKbdComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.2", 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.0.2", 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.0.2", 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 ArdiumKbdModule {
@@ -8043,11 +8052,11 @@ class ArdiumKbdShortcutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumKbdShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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-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.0.2", 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-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.0.2", 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-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-content-wrapper{display:none}\n"] }]
         }] });
 
 class ArdiumKbdShortcutModule {
@@ -8912,11 +8921,11 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
         this._emitPageEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumTablePaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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", "inputProps", "htmlId", "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", "color", "lightColoring", "compact"] }, { 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.0.2", 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", "inputProps", "htmlId", "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"] }, { 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.0.2", 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" }]
         }] });
 
 class ArdiumTableComponent extends _FocusableComponentBase {
@@ -9240,11 +9249,11 @@ class ArdiumTableComponent extends _FocusableComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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 }, 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 }, _suppressErrors: { classPropertyName: "_suppressErrors", publicName: "_suppressErrors", 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                        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  </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: ["wrapperClasses", "htmlId", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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 }, 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 }, _suppressErrors: { classPropertyName: "_suppressErrors", publicName: "_suppressErrors", 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  </thead>\r\n  <tbody class=\"ard-table__body\">\r\n    @for (row of dataRows(); track $index) { @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    </tr>\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: ["wrapperClasses", "htmlId", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", 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                        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  </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  </thead>\r\n  <tbody class=\"ard-table__body\">\r\n    @for (row of dataRows(); track $index) { @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    </tr>\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"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -9410,11 +9419,11 @@ class ArdiumTableFromCsvComponent {
         return dataRows;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumTableFromCsvComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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 }, data: { classPropertyName: "data", 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", "appearance", "variant", "color", "align", "headerAlign", "compact", "zebra", "stickyHeader", "paginated", "paginationStrategy", "paginationOptions", "totalItems", "paginationColor", "paginationAlign", "itemsPerPageText", "currentItemsFormatFn", "pageFillRemaining", "paginationDisabled", "useFirstLastButtons", "itemsPerPage", "page", "columns", "data", "treatDataSourceAsString", "_suppressErrors"], 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.0.2", 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 }, data: { classPropertyName: "data", 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", "appearance", "variant", "color", "align", "headerAlign", "compact", "zebra", "stickyHeader", "paginated", "paginationStrategy", "paginationOptions", "totalItems", "paginationColor", "paginationAlign", "itemsPerPageText", "currentItemsFormatFn", "pageFillRemaining", "paginationDisabled", "useFirstLastButtons", "itemsPerPage", "page", "columns", "data", "treatDataSourceAsString", "_suppressErrors"], outputs: ["itemsPerPageChange", "pageChange", "selectedRowsChange", "failedSelectRow", "selectRow", "unselectRow", "clickRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", 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 {
@@ -9476,11 +9485,11 @@ class ArdiumStarDisplayComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumStarDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumStarDisplayComponent, selector: "ard-star-display", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ard-star-display\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (fillMode of starArray(); track $index) {\n    <ard-star\n      [fill]=\"fillMode\"\n      [color]=\"color()\"\n    />\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumStarDisplayComponent, selector: "ard-star-display", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"ard-star-display\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (fillMode of starArray(); track $index) {\r\n    <ard-star\r\n      [fill]=\"fillMode\"\r\n      [color]=\"color()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumStarDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star-display\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (fillMode of starArray(); track $index) {\n    <ard-star\n      [fill]=\"fillMode\"\n      [color]=\"color()\"\n    />\n  }\n</div>\n" }]
+            args: [{ selector: 'ard-star-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-star-display\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (fillMode of starArray(); track $index) {\r\n    <ard-star\r\n      [fill]=\"fillMode\"\r\n      [color]=\"color()\"\r\n    />\r\n  }\r\n</div>\r\n" }]
         }] });
 
 class ArdiumStarDisplayModule {
@@ -9523,11 +9532,11 @@ class ArdiumTabComponent {
         this.selectedChange.emit(this.selected());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", 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.0.2", 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.0.2", 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']
@@ -9605,11 +9614,11 @@ class ArdiumTabberComponent {
         this.currentFocusedTab.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumTabberComponent, selector: "ard-tabber", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", 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  >\n    @for (tab of tabs(); track tab) {\n      <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}\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.0.2", type: ArdiumTabberComponent, selector: "ard-tabber", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", 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  >\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}\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.0.2", 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  >\n    @for (tab of tabs(); track tab) {\n      <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}\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  >\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}\n"] }]
         }] });
 
 class ArdiumTabberModule {
@@ -9628,11 +9637,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 
 class ArdiumCardHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", 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.0.2", 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.0.2", 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) {
@@ -9907,11 +9916,11 @@ class ArdiumModalComponent {
         this._destroyOverlay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumModalComponent, selector: "ard-modal", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\n  @if (noBackdrop()) {\n    <div\n      class=\"ard-modal\"\n      [ngClass]=\"ngClasses\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  } @else {\n    <div\n      class=\"ard-modal ard-modal-backdrop\"\n      [ngClass]=\"ngClasses\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  }\n</ng-template>\n\n<ng-template #_modalInsidePanel>\n  <div\n    class=\"ard-modal-panel\"\n    cdkTrapFocus\n    [class.ard-modal-no-heading-text]=\"!heading\"\n    [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"ard-modal-heading\">\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\n      @if (!noCloseButton()) {\n        <ard-icon-button\n          class=\"ard-modal-close-button\"\n          color=\"none\"\n          [compact]=\"compact()\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          <ard-icon>close</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n    <div class=\"ard-modal-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumModalComponent, selector: "ard-modal", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n    <div\r\n      class=\"ard-modal\"\r\n      [ngClass]=\"ngClasses\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"ard-modal ard-modal-backdrop\"\r\n      [ngClass]=\"ngClasses\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading\"\r\n    [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\r\n      @if (!noCloseButton()) {\r\n        <ard-icon-button\r\n          class=\"ard-modal-close-button\"\r\n          color=\"none\"\r\n          [compact]=\"compact()\"\r\n          (click)=\"onCloseButtonClick()\"\r\n        >\r\n          <ard-icon>close</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\n  @if (noBackdrop()) {\n    <div\n      class=\"ard-modal\"\n      [ngClass]=\"ngClasses\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  } @else {\n    <div\n      class=\"ard-modal ard-modal-backdrop\"\n      [ngClass]=\"ngClasses\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  }\n</ng-template>\n\n<ng-template #_modalInsidePanel>\n  <div\n    class=\"ard-modal-panel\"\n    cdkTrapFocus\n    [class.ard-modal-no-heading-text]=\"!heading\"\n    [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"ard-modal-heading\">\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\n      @if (!noCloseButton()) {\n        <ard-icon-button\n          class=\"ard-modal-close-button\"\n          color=\"none\"\n          [compact]=\"compact()\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          <ard-icon>close</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n    <div class=\"ard-modal-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-modal-content{width:100%}\n"] }]
+            args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n    <div\r\n      class=\"ard-modal\"\r\n      [ngClass]=\"ngClasses\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"ard-modal ard-modal-backdrop\"\r\n      [ngClass]=\"ngClasses\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading\"\r\n    [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\r\n      @if (!noCloseButton()) {\r\n        <ard-icon-button\r\n          class=\"ard-modal-close-button\"\r\n          color=\"none\"\r\n          [compact]=\"compact()\"\r\n          (click)=\"onCloseButtonClick()\"\r\n        >\r\n          <ard-icon>close</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"] }]
         }], propDecorators: { _open: [{
                 type: Input,
                 args: [{ alias: 'open' }]
@@ -10017,11 +10026,11 @@ class ArdiumDialogComponent {
         this.closeEvent.emit('close');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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 }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</ard-modal>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "open"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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 }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\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  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\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-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              (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\"\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      ></ng-template>\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", "type", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "open"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</ard-modal>\n" }]
+            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\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  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\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-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              (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\"\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      ></ng-template>\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n" }]
         }] });
 
 class ArdiumDialogModule {
@@ -10208,11 +10217,11 @@ class _ArdSimpleSnackbarComponent {
         return `ard-color-${this.color}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _ArdSimpleSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", 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.0.2", 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", "type", "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.0.2", 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 _DEFAULT_OPTIONS_STATIC = {