@ardium-ui/ui 2.3.2 → 2.4.0

package/fesm2022/ardium-ui-ui.mjs

@@ -2,7 +2,7 @@ import 'first-last';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, Directive, Input, HostBinding, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, output, ViewChildren, forwardRef, NgModule, viewChild, inject, ElementRef, contentChild, model, ChangeDetectorRef, ViewContainerRef, TemplateRef, ContentChildren, ViewChild, HostListener, effect, viewChildren, Pipe, ContentChild, contentChildren, Renderer2, InjectionToken, Injector, Injectable } from '@angular/core';
+import { input, signal, Directive, Input, HostBinding, InjectionToken, inject, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, output, ViewChildren, forwardRef, NgModule, viewChild, ElementRef, contentChild, model, ChangeDetectorRef, ViewContainerRef, TemplateRef, ContentChildren, ViewChild, HostListener, effect, viewChildren, Pipe, ContentChild, contentChildren, Renderer2, Injector, Injectable } from '@angular/core';
 import * as i4 from '@ardium-ui/devkit';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumHoldEventModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule } from '@ardium-ui/devkit';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -18,6 +18,53 @@ import { keyToString } from 'key-display-names';
 import * as i4$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 
+const _disablableComponentDefaults = {
+    readonly: false,
+    disabled: false,
+};
+class _DisablableComponentBase {
+    constructor() {
+        //! no value arguments
+        /**
+         * Whether the component is read-only. Defines the `readonly` host attribute and `ard-readonly` host class. Coercible into a boolean.
+         */
+        this.readonly = input(this._DEFAULTS.readonly, { transform: v => coerceBooleanProperty(v) });
+        /**
+         * Whether the component is disabled. Defines the `disabled` host attribute and `ard-disabled` host class. Coercible into a boolean.
+         */
+        this.disabled = signal(this._DEFAULTS.disabled);
+    }
+    set _disabled(v) {
+        this.disabled.set(coerceBooleanProperty(v));
+    }
+    get _readonlyHostAttribute() {
+        return this.readonly();
+    }
+    get _disabledHostAttribute() {
+        return this.disabled();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _DisablableComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: _DisablableComponentBase, inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.readonly": "this._readonlyHostAttribute", "class.ard-readonly": "this._readonlyHostAttribute", "attr.disabled": "this._disabledHostAttribute", "class.ard-disabled": "this._disabledHostAttribute" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _DisablableComponentBase, decorators: [{
+            type: Directive
+        }], propDecorators: { _disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], _readonlyHostAttribute: [{
+                type: HostBinding,
+                args: ['attr.readonly']
+            }, {
+                type: HostBinding,
+                args: ['class.ard-readonly']
+            }], _disabledHostAttribute: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.ard-disabled']
+            }] } });
+
 const SimpleOneAxisAlignment = {
     Left: 'left',
     Right: 'right',
@@ -119,58 +166,28 @@ const FormElementVariant = {
     Pill: 'pill',
 };
 
-class _DisablableComponentBase {
-    constructor() {
-        //! no value arguments
-        /**
-         * Whether the component is read-only. Defines the `readonly` host attribute and `ard-readonly` host class. Coearcible into a boolean.
-         */
-        this.readonly = input(false, { transform: v => coerceBooleanProperty(v) });
-        /**
-         * Whether the component is disabled. Defines the `disabled` host attribute and `ard-disabled` host class. Coearcible into a boolean.
-         */
-        this.disabled = signal(false);
-    }
-    set _disabled(v) {
-        this.disabled.set(coerceBooleanProperty(v));
-    }
-    get _readonlyHostAttribute() {
-        return this.readonly();
-    }
-    get _disabledHostAttribute() {
-        return this.disabled();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _DisablableComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: _DisablableComponentBase, inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.readonly": "this._readonlyHostAttribute", "class.ard-readonly": "this._readonlyHostAttribute", "attr.disabled": "this._disabledHostAttribute", "class.ard-disabled": "this._disabledHostAttribute" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _DisablableComponentBase, decorators: [{
-            type: Directive
-        }], propDecorators: { _disabled: [{
-                type: Input,
-                args: ['disabled']
-            }], _readonlyHostAttribute: [{
-                type: HostBinding,
-                args: ['attr.readonly']
-            }, {
-                type: HostBinding,
-                args: ['class.ard-readonly']
-            }], _disabledHostAttribute: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }, {
-                type: HostBinding,
-                args: ['class.ard-disabled']
-            }] } });
+const _chipDefaults = {
+    ..._disablableComponentDefaults,
+    contentAlignment: SimpleOneAxisAlignment.Left,
+    appearance: DecorationElementAppearance.Outlined,
+    variant: FormElementVariant.Rounded,
+    color: ComponentColor.Primary,
+    compact: false,
+};
+const ARD_CHIP_DEFAULTS = new InjectionToken('ard-chip-defaults', {
+    factory: () => _chipDefaults,
+});
 
 class ArdiumChipComponent extends _DisablableComponentBase {
     constructor() {
         super(...arguments);
+        this._DEFAULTS = inject(ARD_CHIP_DEFAULTS);
         //! appearance
-        this.contentAlignment = input(SimpleOneAxisAlignment.Left);
-        this.appearance = input(DecorationElementAppearance.Outlined);
-        this.variant = input(FormElementVariant.Rounded);
-        this.color = input(ComponentColor.Primary);
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.contentAlignment = input(this._DEFAULTS.contentAlignment);
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.variant = input(this._DEFAULTS.variant);
+        this.color = input(this._DEFAULTS.color);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.wrapperClasses = input('');
         this.ngClasses = computed(() => [
             this.wrapperClasses(),
@@ -189,6 +206,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             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"] }]
         }] });
 
+const _focusableComponentDefaults = {
+    ..._disablableComponentDefaults,
+    tabIndex: 0,
+};
 class _FocusableComponentBase extends _DisablableComponentBase {
     constructor() {
         super(...arguments);
@@ -197,7 +218,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
          * The component's overall tab index. If the component is disabled, it is always `-1`. Coercible into a number, defaults to `0`.
          */
         this.tabIndex = computed(() => (this.disabled() ? -1 : this._tabIndex()));
-        this._tabIndex = input(0, { alias: 'tabIndex', transform: v => coerceNumberProperty(v) });
+        this._tabIndex = input(this._DEFAULTS.tabIndex, { alias: 'tabIndex', transform: v => coerceNumberProperty(v) });
         //! events
         /**
          * The event emitter responsible for firing `focus` events.
@@ -263,8 +284,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: ['focusableElement']
             }] } });
 
+;
+const _ngModelComponentDefaults = _focusableComponentDefaults;
 /**
- * Common code for components, which implement the ControlValueAccessor.
+ * Common code for components which implement the ControlValueAccessor.
  *
  * **Warning**: `writeValue` function should be implemented on the child component!
  */
@@ -302,6 +325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Directive
         }] });
 
+const _booleanComponentDefaults = _ngModelComponentDefaults;
 /**
  * Common code for components, which only operate on the "selected" state.
  */
@@ -392,20 +416,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: ['class.ard-selected']
             }] } });
 
+const ARD_SELECTABLE_CHIP_DEFAULTS = new InjectionToken('ard-selectable-chip-defaults', {
+    factory: () => ({
+        ..._booleanComponentDefaults,
+        ..._chipDefaults,
+        chipTitle: 'Select',
+        hideSelectionIcon: false,
+    }),
+});
+
 class ArdiumSelectableChipComponent extends _BooleanComponentBase {
     constructor() {
         super(...arguments);
-        this.DEFAULTS = {
-            chipTitle: 'Select',
-        };
-        this.chipTitle = input(this.DEFAULTS.chipTitle);
-        this.hideSelectionIcon = input(false, { transform: v => coerceBooleanProperty(v) });
+        this._DEFAULTS = inject(ARD_SELECTABLE_CHIP_DEFAULTS);
+        this.chipTitle = input(this._DEFAULTS.chipTitle);
+        this.hideSelectionIcon = input(this._DEFAULTS.hideSelectionIcon, {
+            transform: v => coerceBooleanProperty(v),
+        });
         //! appearance
-        this.contentAlignment = input(SimpleOneAxisAlignment.Left);
-        this.appearance = input(DecorationElementAppearance.Outlined);
-        this.variant = input(FormElementVariant.Rounded);
-        this.color = input(ComponentColor.Primary);
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.contentAlignment = input(this._DEFAULTS.contentAlignment);
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.variant = input(this._DEFAULTS.variant);
+        this.color = input(this._DEFAULTS.color);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.wrapperClasses = input('');
         this.ngClasses = computed(() => [
             this.wrapperClasses(),
@@ -436,6 +469,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     ], 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"] }]
         }] });
 
+const ARD_DELETABLE_CHIP_DEFAULTS = new InjectionToken('ard-deletable-chip-defaults', {
+    factory: () => ({
+        ..._focusableComponentDefaults,
+        ..._chipDefaults,
+        deleteButtonTitle: 'Delete',
+    }),
+});
+
 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\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: [""] }); }
@@ -448,16 +489,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 class ArdiumDeletableChipComponent extends _FocusableComponentBase {
     constructor() {
         super(...arguments);
-        this.DEFAULTS = {
-            deleteButtonTitle: 'Delete',
-        };
-        this.deleteButtonTitle = input(this.DEFAULTS.deleteButtonTitle);
+        this._DEFAULTS = inject(ARD_DELETABLE_CHIP_DEFAULTS);
+        this.deleteButtonTitle = input(this._DEFAULTS.deleteButtonTitle);
         //! appearance
-        this.contentAlignment = input(SimpleOneAxisAlignment.Left);
-        this.appearance = input(DecorationElementAppearance.Outlined);
-        this.variant = input(FormElementVariant.Rounded);
-        this.color = input(ComponentColor.Primary);
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.contentAlignment = input(this._DEFAULTS.contentAlignment);
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.variant = input(this._DEFAULTS.variant);
+        this.color = input(this._DEFAULTS.color);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.wrapperClasses = input('');
         this.ngClasses = computed(() => [
             this.wrapperClasses(),
@@ -4084,6 +4123,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+class _ButtonBase extends _FocusableComponentBase {
+    constructor() {
+        super(...arguments);
+        this.wrapperClasses = input('');
+        this.type = input(this._DEFAULTS.type);
+        //! button settings
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.color = input(this._DEFAULTS.color);
+        this.lightColoring = input(this._DEFAULTS.lightColoring, { transform: v => coerceBooleanProperty(v) });
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _ButtonBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: _ButtonBase, inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _ButtonBase, decorators: [{
+            type: Directive
+        }] });
+
 const ButtonType = {
     Button: 'button',
     Submit: 'submit',
@@ -4145,32 +4202,36 @@ const FABSize = {
     Small: 'small',
 };
 
-class _ButtonBase extends _FocusableComponentBase {
-    constructor() {
-        super(...arguments);
-        this.wrapperClasses = input('');
-        //! button settings
-        this.appearance = input(ButtonAppearance.Raised);
-        this.color = input(ComponentColor.Primary);
-        this.lightColoring = input(false, { transform: v => coerceBooleanProperty(v) });
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _ButtonBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: _ButtonBase, inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", 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 }, 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _ButtonBase, decorators: [{
-            type: Directive
-        }] });
+const _simpleButtonDefaults = {
+    ..._focusableComponentDefaults,
+    color: ComponentColor.Primary,
+    lightColoring: false,
+    compact: false,
+    type: ButtonType.Button,
+};
+const _buttonBaseDefaults = {
+    ..._simpleButtonDefaults,
+    appearance: ButtonAppearance.Raised,
+};
+
+const ARD_BUTTON_DEFAULTS = new InjectionToken('ard-button-defaults', {
+    factory: () => ({
+        ..._buttonBaseDefaults,
+        variant: ButtonVariant.Rounded,
+        alignIcon: SimpleOneAxisAlignment.Left,
+        vertical: false,
+    }),
+});
 
 class ArdiumButtonComponent extends _ButtonBase {
     constructor() {
         super(...arguments);
+        this._DEFAULTS = inject(ARD_BUTTON_DEFAULTS);
         this.icon = input('');
-        this.type = input(ButtonType.Button);
         //! button settings
-        this.variant = input(ButtonVariant.Rounded);
-        this.alignIcon = input(SimpleOneAxisAlignment.Left);
-        this.vertical = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.variant = input(this._DEFAULTS.variant);
+        this.alignIcon = input(this._DEFAULTS.alignIcon);
+        this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [
             this.wrapperClasses(),
             `ard-appearance-${this.appearance()}`,
@@ -4183,7 +4244,7 @@ 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 }, 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 }); }
+    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\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,
@@ -4410,7 +4471,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\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 }); }
+        ], 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", "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,
@@ -4672,7 +4733,7 @@ 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\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 }); }
+    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", "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,
@@ -5945,32 +6006,41 @@ class SimpleItemStorage {
     }
 }
 
+const _selectableListComponentDefaults = {
+    ..._ngModelComponentDefaults,
+    valueFrom: 'value',
+    labelFrom: 'label',
+    disabledFrom: 'disabled',
+    compareWith: undefined,
+    multiselectable: false,
+    requireValue: false,
+    invertDisabled: false,
+    maxSelectedItems: undefined,
+};
 class _SelectableListComponentBase extends _NgModelComponentBase {
-    constructor(_cd) {
-        super();
-        this._cd = _cd;
+    constructor() {
+        super(...arguments);
         //! public constants
         this.itemStorage = new SimpleItemStorage(this);
         this.htmlId = crypto.randomUUID();
-        this.DEFAULTS = {
-            valueFrom: 'value',
-            labelFrom: 'label',
-            disabledFrom: 'disabled',
-        };
+        this.DEFAULTS = this._DEFAULTS;
+        this._cd = inject(ChangeDetectorRef);
         //! binding-related inputs
-        this.valueFrom = input(undefined);
-        this.labelFrom = input(undefined);
-        this.disabledFrom = input(undefined);
-        this.compareWith = input(undefined);
+        this.valueFrom = input(this._DEFAULTS.valueFrom);
+        this.labelFrom = input(this._DEFAULTS.labelFrom);
+        this.disabledFrom = input(this._DEFAULTS.disabledFrom);
+        this.compareWith = input(this._DEFAULTS.compareWith);
         //! multiselectable
-        this.multiselectable = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.multiselectable = input(this._DEFAULTS.multiselectable, { transform: v => coerceBooleanProperty(v) });
         this.singleselectable = computed(() => !this.multiselectable());
         //! require value
-        this.requireValue = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.requireValue = input(this._DEFAULTS.requireValue, { transform: v => coerceBooleanProperty(v) });
         this.isValueRequired = computed(() => this.requireValue() || !this.multiselectable());
         //! coerced properties
-        this.invertDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
-        this.maxSelectedItems = input(undefined, { transform: v => coerceNumberProperty(v, undefined) });
+        this.invertDisabled = input(this._DEFAULTS.invertDisabled, { transform: v => coerceBooleanProperty(v) });
+        this.maxSelectedItems = input(this._DEFAULTS.maxSelectedItems, {
+            transform: v => coerceNumberProperty(v, undefined),
+        });
         //! change & touch event emitters
         this.touched = signal(false);
         //! focus & blur handlers
@@ -6194,12 +6264,12 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
     _highlightAll() {
         this.itemStorage.highlightAllItems();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _SelectableListComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _SelectableListComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: _SelectableListComponentBase, inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, requireValue: { classPropertyName: "requireValue", publicName: "requireValue", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", removeEvent: "remove" }, host: { listeners: { "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" }, properties: { "attr.multiple": "this._multiselectableHostAttribute", "class.ard-multiselect": "this._multiselectableHostAttribute", "class.ard-require-value": "this._requireValueHostAttribute", "class.ard-touched": "this._touchedHostAttribute" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _SelectableListComponentBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
+        }], propDecorators: { items: [{
                 type: Input
             }], _multiselectableHostAttribute: [{
                 type: HostBinding,
@@ -7343,6 +7413,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+const ARD_CHECKBOX_DEFAULTS = new InjectionToken('ard-checkbox-defaults', {
+    factory: () => ({
+        ..._booleanComponentDefaults,
+        color: SimpleComponentColor.Primary,
+        unselectedColor: SimpleComponentColor.None,
+    }),
+});
+
 const CheckboxState = {
     Unselected: 'unselected',
     Indeterminate: 'indeterminate',
@@ -7354,9 +7432,10 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         super(...arguments);
         this.wrapperClasses = input('');
         this.htmlId = input('');
+        this._DEFAULTS = inject(ARD_CHECKBOX_DEFAULTS);
         //! appearance
-        this.color = input(SimpleComponentColor.Primary);
-        this.unselectedColor = input(SimpleComponentColor.None);
+        this.color = input(this._DEFAULTS.color);
+        this.unselectedColor = input(this._DEFAULTS.unselectedColor);
         this.ngClasses = computed(() => [
             this.wrapperClasses(),
             `ard-color-${this.color()}`,
@@ -7415,10 +7494,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+const ARD_FAB_DEFAULTS = new InjectionToken('ard-fab-defaults', {
+    factory: () => ({
+        ..._buttonBaseDefaults,
+        size: FABSize.Standard,
+        extended: false,
+    }),
+});
+
 class ArdiumFabComponent extends _ButtonBase {
     constructor() {
         super(...arguments);
-        this.type = input(ButtonType.Button);
+        this._DEFAULTS = inject(ARD_FAB_DEFAULTS);
         //! appearance
         this.size = input(FABSize.Standard);
         this.extended = input(false, { transform: v => coerceBooleanProperty(v) });
@@ -7431,7 +7518,7 @@ 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: { 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 }); }
+    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\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,
@@ -7452,15 +7539,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+const ARD_ICON_BUTTON_DEFAULTS = new InjectionToken('ard-icon-button-defaults', {
+    factory: () => _simpleButtonDefaults,
+});
+
 class ArdiumIconButtonComponent extends _FocusableComponentBase {
     constructor() {
         super(...arguments);
         this.wrapperClasses = input('');
-        this.type = input(ButtonType.Button);
+        this._DEFAULTS = inject(ARD_ICON_BUTTON_DEFAULTS);
+        this.type = input(this._DEFAULTS.type);
         //! button settings
-        this.color = input(ComponentColor.Primary);
-        this.lightColoring = input(false, { transform: v => coerceBooleanProperty(v) });
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.color = input(this._DEFAULTS.color);
+        this.lightColoring = input(this._DEFAULTS.lightColoring, { transform: v => coerceBooleanProperty(v) });
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [
             'ard-appearance-transparent',
             `ard-color-${this.disabled() ? ComponentColor.None : this.color()}`,
@@ -7497,15 +7589,27 @@ const CheckboxListAlignType = {
     RightClumped: 'right-clumped',
 };
 
+const ARD_CHECKBOX_LIST_DEFAULTS = new InjectionToken('ard-checkbox-list-defaults', {
+    factory: () => ({
+        ..._ngModelComponentDefaults,
+        valueFrom: 'value',
+        labelFrom: 'label',
+        disabledFrom: 'disabled',
+        compareWith: null,
+        invertDisabled: false,
+        maxSelectedItems: Infinity,
+        color: ComponentColor.Primary,
+        align: CheckboxListAlignType.LeftClumped,
+        compact: false,
+    }),
+});
+
 class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     constructor() {
         super(...arguments);
         this.htmlId = input(crypto.randomUUID());
-        this.DEFAULTS = {
-            valueFrom: 'value',
-            labelFrom: 'label',
-            disabledFrom: 'disabled',
-        };
+        this._DEFAULTS = inject(ARD_CHECKBOX_LIST_DEFAULTS);
+        this.DEFAULTS = this._DEFAULTS;
         // static values. Not meant to be changed.
         this.multiselectable = signal(true);
         this.isValueRequired = signal(false);
@@ -7515,13 +7619,13 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.valueFrom = input(this.DEFAULTS.valueFrom);
         this.labelFrom = input(this.DEFAULTS.labelFrom);
         this.disabledFrom = input(this.DEFAULTS.disabledFrom);
-        this.compareWith = input(undefined);
-        this.invertDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
-        this.maxSelectedItems = input(Infinity, { transform: v => coerceNumberProperty(v) });
+        this.compareWith = input(this._DEFAULTS.compareWith);
+        this.invertDisabled = input(this._DEFAULTS.invertDisabled, { transform: v => coerceBooleanProperty(v) });
+        this.maxSelectedItems = input(this._DEFAULTS.maxSelectedItems, { transform: v => coerceNumberProperty(v) });
         //! appearance
-        this.color = input(ComponentColor.Primary);
-        this.align = input(CheckboxListAlignType.LeftClumped);
-        this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.color = input(this._DEFAULTS.color);
+        this.align = input(this._DEFAULTS.align);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [`ard-color-${this.color()}`, `ard-align-${this.align()}`, this.compact() ? 'ard-compact' : ''].join(' '));
         this.valueChange = output();
         this.changeEvent = output({ alias: 'change' });
@@ -7832,15 +7936,26 @@ const BadgePosition = {
     Below: 'below',
 };
 
+const ARD_BADGE_DEFAULTS = new InjectionToken('ard-badge-defaults', {
+    factory: () => ({
+        color: ComponentColor.Primary,
+        variant: FormElementVariant.Rounded,
+        size: BadgeSize.Medium,
+        position: BadgePosition.AboveAfter,
+        overlap: false,
+    }),
+});
+
 class ArdiumBadgeDirective {
-    constructor(_elRef, _renderer) {
-        this._elRef = _elRef;
-        this._renderer = _renderer;
+    constructor() {
+        this._elRef = inject(ElementRef);
+        this._renderer = inject(Renderer2);
+        this._DEFAULTS = inject(ARD_BADGE_DEFAULTS);
         this.text = input('', { alias: 'ardBadge' });
-        this.color = input(ComponentColor.Primary, { alias: 'ardBadgeColor' });
-        this.variant = input(FormElementVariant.Pill, { alias: 'ardBadgeVariant' });
-        this.size = input(BadgeSize.Medium, { alias: 'ardBadgeSize' });
-        this.position = input(BadgePosition.AboveAfter, {
+        this.color = input(this._DEFAULTS.color, { alias: 'ardBadgeColor' });
+        this.variant = input(this._DEFAULTS.variant, { alias: 'ardBadgeVariant' });
+        this.size = input(this._DEFAULTS.size, { alias: 'ardBadgeSize' });
+        this.position = input(this._DEFAULTS.position, {
             alias: 'ardBadgePosition',
             transform: v => {
                 switch (v) {
@@ -7858,7 +7973,10 @@ class ArdiumBadgeDirective {
         });
         this.ariaLabel = input('', { alias: 'ardBadgeAriaLabel' });
         this.hidden = input(false, { alias: 'ardBadgeHidden', transform: v => coerceBooleanProperty(v) });
-        this.overlap = input(false, { alias: 'ardBadgeOverlap', transform: v => coerceBooleanProperty(v) });
+        this.overlap = input(this._DEFAULTS.overlap, {
+            alias: 'ardBadgeOverlap',
+            transform: v => coerceBooleanProperty(v),
+        });
         this._elementClasses = computed(() => [
             'ard-badge',
             `ard-color-${this.color()}`,
@@ -7910,7 +8028,7 @@ class ArdiumBadgeDirective {
         }
         this._renderer.removeClass(this._elRef.nativeElement, 'ard-badge-host');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumBadgeDirective, selector: "[ardBadge]", inputs: { text: { classPropertyName: "text", publicName: "ardBadge", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "ardBadgeColor", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "ardBadgeVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "ardBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "ardBadgePosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ardBadgeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "ardBadgeHidden", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "ardBadgeOverlap", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumBadgeDirective, decorators: [{
@@ -7918,7 +8036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{
                     selector: '[ardBadge]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 class ArdiumBadgeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -9578,6 +9696,7 @@ class ArdiumTabberComponent {
         this.tabs = contentChildren(ArdiumTabComponent, { descendants: true });
         this.currentTab = signal(null);
         this.currentFocusedTab = signal(null);
+        this.initialTab = input(undefined);
         this.focusEvent = output({ alias: 'focus' });
         this.blurEvent = output({ alias: 'blur' });
         this.changeTab = output();
@@ -9619,7 +9738,8 @@ class ArdiumTabberComponent {
             });
         }
         if (!selectedCmp) {
-            selectedCmp = this.tabs()[0] ?? null;
+            const initiallySelectedTab = this.tabs().find(tab => tab.tabId() === this.initialTab());
+            selectedCmp = initiallySelectedTab ?? this.tabs()[0] ?? null;
             if (selectedCmp) {
                 selectedCmp.selected.set(true);
             }
@@ -9647,7 +9767,7 @@ 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 }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", changeTab: "changeTab" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tab of tabs(); track tab) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      role=\"tab\"\r\n      class=\"ard-tab-button\"\r\n      [id]=\"tab.tabId()\"\r\n      [class.ard-tab-active]=\"tab === currentTab()\"\r\n      [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\r\n      (click)=\"!tab.selected() && onTabClick(tab)\"\r\n      (focus)=\"onTabFocus(tab)\"\r\n      (blur)=\"onTabBlur(tab)\"\r\n      [tabindex]=\"tabIndex()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      {{ tab.label() }}\r\n    </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ArdiumTabberComponent, selector: "ard-tabber", inputs: { initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", changeTab: "changeTab" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-tabber\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div\r\n    class=\"ard-tabber-tabs\"\r\n    [ngClass]=\"tabContainerClasses()\"\r\n    [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n  >\r\n    @for (tab of tabs(); track tab) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      role=\"tab\"\r\n      class=\"ard-tab-button\"\r\n      [id]=\"tab.tabId()\"\r\n      [class.ard-tab-active]=\"tab === currentTab()\"\r\n      [class.ard-tab-focused]=\"tab === currentFocusedTab()\"\r\n      (click)=\"!tab.selected() && onTabClick(tab)\"\r\n      (focus)=\"onTabFocus(tab)\"\r\n      (blur)=\"onTabBlur(tab)\"\r\n      [tabindex]=\"tabIndex()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      {{ tab.label() }}\r\n    </button>\r\n    }\r\n  </div>\r\n  <div\r\n    role=\"tabpanel\"\r\n    class=\"ard-tabber-content\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumTabberComponent, decorators: [{
             type: Component,
@@ -9668,6 +9788,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+const CardAppearance = {
+    Outlined: 'outlined',
+    Raised: 'raised',
+};
+const CardVariant = {
+    Rounded: 'rounded',
+    Sharp: 'sharp',
+};
+
+const ARD_CARD_DEFAULTS = new InjectionToken('ard-card-defaults', {
+    factory: () => ({
+        appearance: CardAppearance.Raised,
+        variant: CardVariant.Rounded,
+        actionButtonsAlign: OneAxisAlignment.Right,
+    }),
+});
+
 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]\" />\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 }); }
@@ -9733,22 +9870,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
 class ArdiumCardActionButtonsDirective {
     constructor() {
-        this.align = input(OneAxisAlignment.Right);
+        this._DEFAULTS = inject(ARD_CARD_DEFAULTS);
+        this.align = input(this._DEFAULTS.actionButtonsAlign);
         this.alignClass = computed(() => `ard-card-action-buttons ard-align-${this.align()}`);
     }
-    get _alignClassHostAttribute() {
-        return this.alignClass();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumCardActionButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumCardActionButtonsDirective, selector: "ard-card-action-buttons, [ard-card-action-buttons]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._alignClassHostAttribute" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumCardActionButtonsDirective, selector: "ard-card-action-buttons, [ard-card-action-buttons]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "alignClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumCardActionButtonsDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ard-card-action-buttons, [ard-card-action-buttons]' }]
-        }], propDecorators: { _alignClassHostAttribute: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{
+                    selector: 'ard-card-action-buttons, [ard-card-action-buttons]',
+                    host: {
+                        '[class]': 'alignClass()',
+                    },
+                }]
+        }] });
 class ArdiumCardFooterDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-footer');
@@ -9761,20 +9898,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ selector: 'ard-card-footer, [ard-card-footer]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
 
-const CardAppearance = {
-    Outlined: 'outlined',
-    Raised: 'raised',
-};
-const CardVariant = {
-    Rounded: 'rounded',
-    Sharp: 'sharp',
-};
-
 class ArdiumCardDirective {
     constructor() {
+        this._DEFAULTS = inject(ARD_CARD_DEFAULTS);
         //! appearance
-        this.appearance = input(CardAppearance.Raised);
-        this.variant = input(CardVariant.Rounded);
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.variant = input(this._DEFAULTS.variant);
         this.ngClasses = computed(() => ['ard-card', `ard-appearance-${this.appearance()}`, `ard-variant-${this.variant()}`].join(' '));
     }
     get _ngClassesHostAttribute() {
@@ -9858,23 +9987,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+const ARD_DIVIDER_DEFAULTS = new InjectionToken('ard-divider-defaults', {
+    factory: () => ({
+        vertical: false,
+    }),
+});
+
 class ArdiumDividerComponent {
     constructor() {
-        this.vertical = input(false, { transform: v => coerceBooleanProperty(v) });
-    }
-    get _verticalHostAttribute() {
-        return this.vertical();
+        this._DEFAULTS = inject(ARD_DIVIDER_DEFAULTS);
+        this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumDividerComponent, selector: "ard-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-divider-vertical": "this._verticalHostAttribute" } }, ngImport: i0, template: '', isInline: true, styles: ["ard-divider{display:block}ard-divider:not(.ard-divider-vertical){width:100%;height:0}ard-divider.ard-divider-vertical{width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: ArdiumDividerComponent, selector: "ard-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-divider-vertical": "vertical()" } }, ngImport: i0, template: '', isInline: true, styles: ["ard-divider{display:block}ard-divider:not(.ard-divider-vertical){width:100%;height:0}ard-divider.ard-divider-vertical{width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-divider', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["ard-divider{display:block}ard-divider:not(.ard-divider-vertical){width:100%;height:0}ard-divider.ard-divider-vertical{width:0}\n"] }]
-        }], propDecorators: { _verticalHostAttribute: [{
-                type: HostBinding,
-                args: ['class.ard-divider-vertical']
-            }] } });
+            args: [{ selector: 'ard-divider', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ard-divider-vertical]': 'vertical()',
+                    }, styles: ["ard-divider{display:block}ard-divider:not(.ard-divider-vertical){width:100%;height:0}ard-divider.ard-divider-vertical{width:0}\n"] }]
+        }] });
 
 class ArdiumDividerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ArdiumDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -10059,7 +10191,7 @@ 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\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 }); }
+    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", "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,
@@ -10250,7 +10382,7 @@ 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\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 }); }
+    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", "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,
@@ -10500,5 +10632,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULT_OPTIONS, ArdAddCustomTemplateDirective, ArdDialogButtonsTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdSuggestionTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DialogResult, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FABSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _DEFAULT_OPTIONS_STATIC, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_FAB_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULT_OPTIONS, ArdAddCustomTemplateDirective, ArdDialogButtonsTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdSuggestionTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DialogResult, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FABSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _DEFAULT_OPTIONS_STATIC, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map