@ardium-ui/ui 1.0.2 → 1.0.3

package/fesm2022/ardium-ui-ui.mjs

@@ -7,7 +7,7 @@ import * as i4 from '@ardium-ui/devkit';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumHoldEventModule, ArdiumInnerHTMLModule, getEventRelativePos, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule } from '@ardium-ui/devkit';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import resolvePath from 'resolve-object-path';
-import { isDefined, isPrimitive, any, evaluate, isObject, isAnyString, isNull, isNumber, isString, isFloat, isArray, isPromise, isFunction, isRegExp } from 'simple-bool';
+import { isDefined, any, isPrimitive, evaluate, isObject, isAnyString, isNull, isNumber, isString, isFloat, isArray, isPromise, isFunction, isRegExp } from 'simple-bool';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
@@ -101,10 +101,10 @@ class _DisablableComponentBase {
     set disabled(v) {
         this._disabled = coerceBooleanProperty(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _DisablableComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _DisablableComponentBase, inputs: { readonly: "readonly", disabled: "disabled" }, host: { properties: { "attr.readonly": "this.readonly", "class.ard-readonly": "this.readonly", "attr.disabled": "this.disabled", "class.ard-disabled": "this.disabled" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _DisablableComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _DisablableComponentBase, inputs: { readonly: "readonly", disabled: "disabled" }, host: { properties: { "attr.readonly": "this.readonly", "class.ard-readonly": "this.readonly", "attr.disabled": "this.disabled", "class.ard-disabled": "this.disabled" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _DisablableComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _DisablableComponentBase, decorators: [{
             type: Directive
         }], propDecorators: { readonly: [{
                 type: Input
@@ -193,10 +193,10 @@ class _FocusableComponentBase extends _DisablableComponentBase {
         this.isFocused = false;
         this.blurEvent.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _FocusableComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _FocusableComponentBase, inputs: { tabIndex: "tabIndex" }, outputs: { focusEvent: "focus", blurEvent: "blur" }, viewQueries: [{ propertyName: "_focusableElement", predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _FocusableComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _FocusableComponentBase, inputs: { tabIndex: "tabIndex" }, outputs: { focusEvent: "focus", blurEvent: "blur" }, viewQueries: [{ propertyName: "_focusableElement", predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _FocusableComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _FocusableComponentBase, decorators: [{
             type: Directive
         }], propDecorators: { _focusableElement: [{
                 type: ViewChildren,
@@ -276,10 +276,10 @@ class _ButtonBase extends _FocusableComponentBase {
     set compact(v) {
         this._compact = coerceBooleanProperty(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ButtonBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _ButtonBase, inputs: { wrapperClasses: "wrapperClasses", appearance: "appearance", color: "color", lightColoring: "lightColoring", compact: "compact" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ButtonBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _ButtonBase, inputs: { wrapperClasses: "wrapperClasses", appearance: "appearance", color: "color", lightColoring: "lightColoring", compact: "compact" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ButtonBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ButtonBase, decorators: [{
             type: Directive
         }], propDecorators: { wrapperClasses: [{
                 type: Input
@@ -319,10 +319,10 @@ class ArdiumButtonComponent extends _ButtonBase {
             this.vertical ? 'ard-button-vertical' : '',
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumButtonComponent, selector: "ard-button", inputs: { variant: "variant", alignIcon: "alignIcon", vertical: "vertical", icon: "icon" }, usesInheritance: true, ngImport: i0, template: "<button #buttonElement\r\n    class=\"ard-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\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    <div class=\"ard-button-icon\" *ngIf=\"icon\">{{icon}}</div>\r\n    <div class=\"ard-button-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", 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"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumButtonComponent, selector: "ard-button", inputs: { variant: "variant", alignIcon: "alignIcon", vertical: "vertical", icon: "icon" }, usesInheritance: true, ngImport: i0, template: "<button #buttonElement\r\n    class=\"ard-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\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    <div class=\"ard-button-icon\" *ngIf=\"icon\">{{icon}}</div>\r\n    <div class=\"ard-button-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", 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"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #buttonElement\r\n    class=\"ard-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\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    <div class=\"ard-button-icon\" *ngIf=\"icon\">{{icon}}</div>\r\n    <div class=\"ard-button-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", 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"] }]
         }], propDecorators: { variant: [{
@@ -336,11 +336,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumButtonModule, declarations: [ArdiumButtonComponent], imports: [CommonModule], exports: [ArdiumButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumButtonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumButtonModule, declarations: [ArdiumButtonComponent], imports: [CommonModule], exports: [ArdiumButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumButtonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumButtonComponent],
@@ -371,10 +371,10 @@ class ArdiumFabComponent extends _ButtonBase {
             this.extended ? 'ard-fab-extended' : '',
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFabComponent, selector: "ard-fab", inputs: { size: "size", extended: "extended" }, usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-fab\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    [style]=\"'--ard-_fab-content-size:'+content.clientWidth+'px'\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-button-content\" #content>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFabComponent, selector: "ard-fab", inputs: { size: "size", extended: "extended" }, usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-fab\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    [style]=\"'--ard-_fab-content-size:'+content.clientWidth+'px'\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-button-content\" #content>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", 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: "17.0.7", ngImport: i0, type: ArdiumFabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    class=\"ard-fab\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    [style]=\"'--ard-_fab-content-size:'+content.clientWidth+'px'\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-button-content\" #content>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", 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"] }]
         }], propDecorators: { size: [{
@@ -384,11 +384,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumFabModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFabModule, declarations: [ArdiumFabComponent], imports: [CommonModule], exports: [ArdiumFabComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFabModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFabModule, declarations: [ArdiumFabComponent], imports: [CommonModule], exports: [ArdiumFabComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFabModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFabModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFabModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumFabComponent],
@@ -414,10 +414,10 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
     get ngClasses() {
         return ['ard-appearance-transparent', `ard-color-${this.disabled ? ComponentColor.None : this.color}`, this.compact ? 'ard-compact' : ''].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: { wrapperClasses: "wrapperClasses", color: "color", compact: "compact" }, usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-icon-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-button-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: { wrapperClasses: "wrapperClasses", color: "color", compact: "compact" }, usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-icon-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-button-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    class=\"ard-icon-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-button-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { wrapperClasses: [{
@@ -429,11 +429,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumIconButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconButtonModule, declarations: [ArdiumIconButtonComponent], imports: [CommonModule], exports: [ArdiumIconButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconButtonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconButtonModule, declarations: [ArdiumIconButtonComponent], imports: [CommonModule], exports: [ArdiumIconButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconButtonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumIconButtonComponent],
@@ -474,10 +474,10 @@ class _NgModelComponentBase extends _FocusableComponentBase {
         super.onBlur(event);
         this._onTouchedRegistered?.();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _NgModelComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _NgModelComponentBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _NgModelComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _NgModelComponentBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _NgModelComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _NgModelComponentBase, decorators: [{
             type: Directive
         }] });
 
@@ -559,10 +559,10 @@ class _BooleanComponentBase extends _NgModelComponentBase {
         if (oldState != false)
             this._emitChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _BooleanComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _BooleanComponentBase, inputs: { selected: "selected" }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this.selected", "class.ard-selected": "this.selected" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _BooleanComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _BooleanComponentBase, inputs: { selected: "selected" }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this.selected", "class.ard-selected": "this.selected" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _BooleanComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _BooleanComponentBase, decorators: [{
             type: Directive
         }], propDecorators: { selectEvent: [{
                 type: Output,
@@ -619,8 +619,8 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         super._emitChange();
         this.stateChange.emit(this.state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { wrapperClasses: "wrapperClasses", htmlId: "htmlId", color: "color", unselectedColor: "unselectedColor", state: "state" }, outputs: { stateChange: "stateChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { wrapperClasses: "wrapperClasses", htmlId: "htmlId", color: "color", unselectedColor: "unselectedColor", state: "state" }, outputs: { stateChange: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
@@ -628,7 +628,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
             },
         ], usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-checkbox\"\r\n    role=\"checkbox\"\r\n    [id]=\"htmlId\"\r\n    [ariaChecked]=\"selected\"\r\n    [tabindex]=\"tabIndex\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n    (click)=\"toggleState()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n    <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n    <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-checkbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -652,11 +652,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxModule, declarations: [ArdiumCheckboxComponent], imports: [CommonModule], exports: [ArdiumCheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxModule, declarations: [ArdiumCheckboxComponent], imports: [CommonModule], exports: [ArdiumCheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumCheckboxComponent],
@@ -1123,10 +1123,10 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         }
         this.selectItem(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { htmlId: "htmlId", items: "items", invertDisabled: "invertDisabled", maxSelectedItems: "maxSelectedItems", color: "color", align: "align", compact: "compact", value: "value" }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this.htmlId" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-checkbox-list\"\r\n    [class.ard-compact]=\"compact\"\r\n    [ngClass]=\"ngClasses\"\r\n>\r\n    <div\r\n        *ngFor=\"let item of items\"\r\n        class=\"ard-checkbox-list__item\"\r\n        [class.ard-item-highlighted]=\"item.highlighted\"\r\n        [class.ard-item-disabled]=\"item.disabled\"\r\n        (mouseover)=\"onItemHighlight(item)\"\r\n        (mouseleave)=\"onItemBlur()\"\r\n        (click)=\"toggleItem(item)\"\r\n    >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <ard-checkbox\r\n            [selected]=\"item.selected\"\r\n            [disabled]=\"item.disabled\"\r\n            [color]=\"color\"\r\n            [htmlId]=\"htmlId + item.index\"\r\n            [tabIndex]=\"tabIndex\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"onItemFocus(item)\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"onItemBlur()\"\r\n            (select)=\"selectItem(item)\"\r\n            (unselect)=\"unselectItem(item)\"\r\n        ></ard-checkbox>\r\n        <label [for]=\"htmlId + item.index\">\r\n            {{ item.label }}\r\n        </label>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["wrapperClasses", "htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { htmlId: "htmlId", items: "items", invertDisabled: "invertDisabled", maxSelectedItems: "maxSelectedItems", color: "color", align: "align", compact: "compact", value: "value" }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this.htmlId" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-checkbox-list\"\r\n    [class.ard-compact]=\"compact\"\r\n    [ngClass]=\"ngClasses\"\r\n>\r\n    <div\r\n        *ngFor=\"let item of items\"\r\n        class=\"ard-checkbox-list__item\"\r\n        [class.ard-item-highlighted]=\"item.highlighted\"\r\n        [class.ard-item-disabled]=\"item.disabled\"\r\n        (mouseover)=\"onItemHighlight(item)\"\r\n        (mouseleave)=\"onItemBlur()\"\r\n        (click)=\"toggleItem(item)\"\r\n    >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <ard-checkbox\r\n            [selected]=\"item.selected\"\r\n            [disabled]=\"item.disabled\"\r\n            [color]=\"color\"\r\n            [htmlId]=\"htmlId + item.index\"\r\n            [tabIndex]=\"tabIndex\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"onItemFocus(item)\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"onItemBlur()\"\r\n            (select)=\"selectItem(item)\"\r\n            (unselect)=\"unselectItem(item)\"\r\n        ></ard-checkbox>\r\n        <label [for]=\"htmlId + item.index\">\r\n            {{ item.label }}\r\n        </label>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["wrapperClasses", "htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-checkbox-list\"\r\n    [class.ard-compact]=\"compact\"\r\n    [ngClass]=\"ngClasses\"\r\n>\r\n    <div\r\n        *ngFor=\"let item of items\"\r\n        class=\"ard-checkbox-list__item\"\r\n        [class.ard-item-highlighted]=\"item.highlighted\"\r\n        [class.ard-item-disabled]=\"item.disabled\"\r\n        (mouseover)=\"onItemHighlight(item)\"\r\n        (mouseleave)=\"onItemBlur()\"\r\n        (click)=\"toggleItem(item)\"\r\n    >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <ard-checkbox\r\n            [selected]=\"item.selected\"\r\n            [disabled]=\"item.disabled\"\r\n            [color]=\"color\"\r\n            [htmlId]=\"htmlId + item.index\"\r\n            [tabIndex]=\"tabIndex\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"onItemFocus(item)\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"onItemBlur()\"\r\n            (select)=\"selectItem(item)\"\r\n            (unselect)=\"unselectItem(item)\"\r\n        ></ard-checkbox>\r\n        <label [for]=\"htmlId + item.index\">\r\n            {{ item.label }}\r\n        </label>\r\n    </div>\r\n</div>" }]
         }], propDecorators: { htmlId: [{
@@ -1156,11 +1156,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumCheckboxListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxListModule, declarations: [ArdiumCheckboxListComponent], imports: [CommonModule, ArdiumCheckboxModule], exports: [ArdiumCheckboxListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxListModule, imports: [CommonModule, ArdiumCheckboxModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxListModule, declarations: [ArdiumCheckboxListComponent], imports: [CommonModule, ArdiumCheckboxModule], exports: [ArdiumCheckboxListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxListModule, imports: [CommonModule, ArdiumCheckboxModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCheckboxListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCheckboxListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumCheckboxListComponent],
@@ -1244,10 +1244,10 @@ class ArdiumChipComponent extends _DisablableComponentBase {
             this.compact ? 'ard-compact' : '',
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumChipComponent, selector: "ard-chip", inputs: { contentAlignment: "contentAlignment", appearance: "appearance", variant: "variant", color: "color", compact: "compact", wrapperClasses: "wrapperClasses" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-chip-wrapper ard-chip\" [ngClass]=\"ngClasses\">\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>", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumChipComponent, selector: "ard-chip", inputs: { contentAlignment: "contentAlignment", appearance: "appearance", variant: "variant", color: "color", compact: "compact", wrapperClasses: "wrapperClasses" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-chip-wrapper ard-chip\" [ngClass]=\"ngClasses\">\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>", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-chip-wrapper ard-chip\" [ngClass]=\"ngClasses\">\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>", 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"] }]
         }], propDecorators: { contentAlignment: [{
@@ -1296,8 +1296,8 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
             this.compact ? 'ard-compact' : '',
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectableChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSelectableChipComponent, selector: "ard-selectable-chip", inputs: { chipTitle: "chipTitle", useSelectionIcon: "useSelectionIcon", contentAlignment: "contentAlignment", appearance: "appearance", variant: "variant", color: "color", compact: "compact", wrapperClasses: "wrapperClasses" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectableChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSelectableChipComponent, selector: "ard-selectable-chip", inputs: { chipTitle: "chipTitle", useSelectionIcon: "useSelectionIcon", contentAlignment: "contentAlignment", appearance: "appearance", variant: "variant", color: "color", compact: "compact", wrapperClasses: "wrapperClasses" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSelectableChipComponent),
@@ -1305,7 +1305,7 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
             },
         ], usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-chip-wrapper ard-chip-selectable\"\r\n    [class.ard-chip-selected]=\"selected\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\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 class=\"ard-chip-selection-icon\" role=\"img\"></div>\r\n    <div class=\"ard-chip-content-wrapper\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</button>", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-selectable-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1333,10 +1333,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class _ClearButtonComponent extends _FocusableComponentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ClearButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: _ClearButtonComponent, selector: "ard-_clear-button", usesInheritance: true, ngImport: i0, template: "<button #focusableElement\r\n    class=\"ard-clear-btn-wrapper\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-clear-btn\" aria-hidden=\"true\"></div>\r\n</button>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ClearButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: _ClearButtonComponent, selector: "ard-_clear-button", usesInheritance: true, ngImport: i0, template: "<button #focusableElement\r\n    class=\"ard-clear-btn-wrapper\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-clear-btn\" aria-hidden=\"true\"></div>\r\n</button>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ClearButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ClearButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-_clear-button', template: "<button #focusableElement\r\n    class=\"ard-clear-btn-wrapper\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-clear-btn\" aria-hidden=\"true\"></div>\r\n</button>" }]
         }] });
@@ -1374,8 +1374,8 @@ class ArdiumDeletableChipComponent extends _FocusableComponentBase {
             this.compact ? 'ard-compact' : '',
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDeletableChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: { deleteButtonTitle: "deleteButtonTitle", contentAlignment: "contentAlignment", appearance: "appearance", variant: "variant", color: "color", compact: "compact", wrapperClasses: "wrapperClasses" }, outputs: { deleteEvent: "delete" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDeletableChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: { deleteButtonTitle: "deleteButtonTitle", contentAlignment: "contentAlignment", appearance: "appearance", variant: "variant", color: "color", compact: "compact", wrapperClasses: "wrapperClasses" }, outputs: { deleteEvent: "delete" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumDeletableChipComponent),
@@ -1383,7 +1383,7 @@ class ArdiumDeletableChipComponent extends _FocusableComponentBase {
             },
         ], usesInheritance: true, ngImport: i0, template: "<div\r\n    class=\"ard-chip-wrapper ard-chip-deletable\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <ard-_clear-button\r\n        [title]=\"deleteButtonTitle\"\r\n        (click)=\"deleteEvent.emit($event)\"\r\n        [tabIndex]=\"tabIndex\"\r\n    ></ard-_clear-button>\r\n    <div class=\"ard-chip-content-wrapper\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDeletableChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDeletableChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-deletable-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1412,11 +1412,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class _ClearButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ClearButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: _ClearButtonModule, declarations: [_ClearButtonComponent], imports: [CommonModule], exports: [_ClearButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ClearButtonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ClearButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: _ClearButtonModule, declarations: [_ClearButtonComponent], imports: [CommonModule], exports: [_ClearButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ClearButtonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ClearButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ClearButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [_ClearButtonComponent],
@@ -1426,11 +1426,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
         }] });
 
 class ArdiumChipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumChipModule, declarations: [ArdiumChipComponent, ArdiumSelectableChipComponent, ArdiumDeletableChipComponent], imports: [CommonModule, _ClearButtonModule], exports: [ArdiumChipComponent, ArdiumSelectableChipComponent, ArdiumDeletableChipComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumChipModule, imports: [CommonModule, _ClearButtonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumChipModule, declarations: [ArdiumChipComponent, ArdiumSelectableChipComponent, ArdiumDeletableChipComponent], imports: [CommonModule, _ClearButtonModule], exports: [ArdiumChipComponent, ArdiumSelectableChipComponent, ArdiumDeletableChipComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumChipModule, imports: [CommonModule, _ClearButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumChipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumChipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumChipComponent, ArdiumSelectableChipComponent, ArdiumDeletableChipComponent],
@@ -1538,10 +1538,10 @@ class ArdiumDropdownPanelComponent {
         const leftPadd = paddings[3] ?? rightPadd ?? topPadd;
         return new DOMRect(elRect.x + leftPadd, elRect.y + topPadd, elRect.width - leftPadd - rightPadd, elRect.height - topPadd - bottomPadd);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: { panelId: "panelId", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue", appearance: "appearance", variant: "variant", compact: "compact", isOpen: "isOpen" }, outputs: { scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, host: { properties: { "class.ard-open": "this.isOpen" } }, viewQueries: [{ propertyName: "_scrollRef", first: true, predicate: ["scroll"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ard-dropdown-panel-container\" [ngClass]=\"ngClasses\">\r\n    <div *ngIf=\"headerTemplate\" class=\"ard-dropdown-header\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ searchTerm: filterValue }\">\r\n        </ng-template>\r\n    </div>\r\n    <div #scroll\r\n        class=\"ard-dropdown-panel-content\"\r\n        [attr.id]=\"panelId\"\r\n        (scroll)=\"onScroll()\"\r\n    >\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"ard-dropdown-footer\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"  [ngTemplateOutletContext]=\"{ searchTerm: filterValue }\">\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [".ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: { panelId: "panelId", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue", appearance: "appearance", variant: "variant", compact: "compact", isOpen: "isOpen" }, outputs: { scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, host: { properties: { "class.ard-open": "this.isOpen" } }, viewQueries: [{ propertyName: "_scrollRef", first: true, predicate: ["scroll"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ard-dropdown-panel-container\" [ngClass]=\"ngClasses\">\r\n    <div *ngIf=\"headerTemplate\" class=\"ard-dropdown-header\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ searchTerm: filterValue }\">\r\n        </ng-template>\r\n    </div>\r\n    <div #scroll\r\n        class=\"ard-dropdown-panel-content\"\r\n        [attr.id]=\"panelId\"\r\n        (scroll)=\"onScroll()\"\r\n    >\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"ard-dropdown-footer\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"  [ngTemplateOutletContext]=\"{ searchTerm: filterValue }\">\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [".ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDropdownPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-dropdown-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-dropdown-panel-container\" [ngClass]=\"ngClasses\">\r\n    <div *ngIf=\"headerTemplate\" class=\"ard-dropdown-header\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ searchTerm: filterValue }\">\r\n        </ng-template>\r\n    </div>\r\n    <div #scroll\r\n        class=\"ard-dropdown-panel-content\"\r\n        [attr.id]=\"panelId\"\r\n        (scroll)=\"onScroll()\"\r\n    >\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"ard-dropdown-footer\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"  [ngTemplateOutletContext]=\"{ searchTerm: filterValue }\">\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [".ard-dropdown-panel{display:none}.ard-dropdown-panel.ard-open{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _scrollRef: [{
@@ -1575,11 +1575,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumDropdownPanelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDropdownPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDropdownPanelModule, declarations: [ArdiumDropdownPanelComponent], imports: [CommonModule], exports: [ArdiumDropdownPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDropdownPanelModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDropdownPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDropdownPanelModule, declarations: [ArdiumDropdownPanelComponent], imports: [CommonModule], exports: [ArdiumDropdownPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDropdownPanelModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDropdownPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDropdownPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumDropdownPanelComponent],
@@ -1592,10 +1592,10 @@ class ArdFormFieldPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFormFieldPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdFormFieldPrefixTemplateDirective, selector: "ard-form-field-frame > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFormFieldPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdFormFieldPrefixTemplateDirective, selector: "ard-form-field-frame > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFormFieldPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFormFieldPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-form-field-frame > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -1603,10 +1603,10 @@ class ArdFormFieldSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFormFieldSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdFormFieldSuffixTemplateDirective, selector: "ard-form-field-frame > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFormFieldSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdFormFieldSuffixTemplateDirective, selector: "ard-form-field-frame > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFormFieldSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFormFieldSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-form-field-frame > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -1650,10 +1650,10 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
             this.isFocused ? 'ard-focused' : 'ard-unfocused',
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFormFieldFrameComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { isFocused: "isFocused", appearance: "appearance", variant: "variant", compact: "compact", prefixTemplateInput: ["prefixTemplate", "prefixTemplateInput"], suffixTemplateInput: ["suffixTemplate", "suffixTemplateInput"] }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-form-field-frame\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-form-field-overlay\"></div>\r\n    <div class=\"ard-form-field-prefix-container\" *ngIf=\"prefixTemplateInput ?? prefixTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplateInput ?? prefixTemplate\"></ng-template>\r\n    </div>\r\n    <div class=\"ard-form-field-content-container\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-form-field-suffix-container\" *ngIf=\"suffixTemplateInput ?? suffixTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplateInput ?? suffixTemplate\"></ng-template>\r\n    </div>\r\n</div>", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFormFieldFrameComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { isFocused: "isFocused", appearance: "appearance", variant: "variant", compact: "compact", prefixTemplateInput: ["prefixTemplate", "prefixTemplateInput"], suffixTemplateInput: ["suffixTemplate", "suffixTemplateInput"] }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-form-field-frame\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-form-field-overlay\"></div>\r\n    <div class=\"ard-form-field-prefix-container\" *ngIf=\"prefixTemplateInput ?? prefixTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplateInput ?? prefixTemplate\"></ng-template>\r\n    </div>\r\n    <div class=\"ard-form-field-content-container\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-form-field-suffix-container\" *ngIf=\"suffixTemplateInput ?? suffixTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplateInput ?? suffixTemplate\"></ng-template>\r\n    </div>\r\n</div>", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFormFieldFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFormFieldFrameComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-form-field-frame', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-form-field-frame\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-form-field-overlay\"></div>\r\n    <div class=\"ard-form-field-prefix-container\" *ngIf=\"prefixTemplateInput ?? prefixTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplateInput ?? prefixTemplate\"></ng-template>\r\n    </div>\r\n    <div class=\"ard-form-field-content-container\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-form-field-suffix-container\" *ngIf=\"suffixTemplateInput ?? suffixTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplateInput ?? suffixTemplate\"></ng-template>\r\n    </div>\r\n</div>", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"] }]
         }], propDecorators: { isFocused: [{
@@ -1679,11 +1679,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumFormFieldFrameModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFormFieldFrameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFormFieldFrameModule, declarations: [ArdiumFormFieldFrameComponent, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective], imports: [CommonModule], exports: [ArdiumFormFieldFrameComponent, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFormFieldFrameModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFormFieldFrameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFormFieldFrameModule, declarations: [ArdiumFormFieldFrameComponent, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective], imports: [CommonModule], exports: [ArdiumFormFieldFrameComponent, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFormFieldFrameModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFormFieldFrameModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFormFieldFrameModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumFormFieldFrameComponent, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective],
@@ -2118,10 +2118,10 @@ class ArdSimpleInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSimpleInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSimpleInputPlaceholderTemplateDirective, selector: "ard-simple-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSimpleInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSimpleInputPlaceholderTemplateDirective, selector: "ard-simple-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSimpleInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSimpleInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-simple-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2129,10 +2129,10 @@ class ArdSimpleInputPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSimpleInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSimpleInputPrefixTemplateDirective, selector: "ard-simple-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSimpleInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSimpleInputPrefixTemplateDirective, selector: "ard-simple-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSimpleInputPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSimpleInputPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-simple-input > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2140,10 +2140,10 @@ class ArdSimpleInputSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSimpleInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSimpleInputSuffixTemplateDirective, selector: "ard-simple-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSimpleInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSimpleInputSuffixTemplateDirective, selector: "ard-simple-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSimpleInputSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSimpleInputSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-simple-input > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2284,8 +2284,8 @@ class ArdiumSimpleInputComponent extends _NgModelComponentBase {
             input.setAttribute(key, String(attributes[key]));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSimpleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSimpleInputComponent, selector: "ard-simple-input", inputs: { placeholder: "placeholder", inputId: "inputId", clearButtonTitle: "clearButtonTitle", appearance: "appearance", variant: "variant", alignText: "alignText", compact: "compact", inputAttrs: "inputAttrs", maxLength: "maxLength", clearable: "clearable", value: "value" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, host: { properties: { "class.ard-clearable": "this.clearable" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSimpleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSimpleInputComponent, selector: "ard-simple-input", inputs: { placeholder: "placeholder", inputId: "inputId", clearButtonTitle: "clearButtonTitle", appearance: "appearance", variant: "variant", alignText: "alignText", compact: "compact", inputAttrs: "inputAttrs", maxLength: "maxLength", clearable: "clearable", value: "value" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, host: { properties: { "class.ard-clearable": "this.clearable" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSimpleInputComponent),
@@ -2293,7 +2293,7 @@ class ArdiumSimpleInputComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n>\r\n    <div class=\"ard-simple-input\"\r\n        [ngClass]=\"ngClasses\"\r\n        [class.ard-has-value]=\"value\"\r\n        (click)=\"focus()\"\r\n    >\r\n        <div class=\"ard-input-container\">\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate>\r\n                    <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n            </ng-container>\r\n            \r\n            <input #textInput\r\n                #focusableElement\r\n                type=\"text\"\r\n                [attr.id]=\"inputId\"\r\n                [attr.tabindex]=\"tabIndex\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (input)=\"onInput(textInput.value)\"\r\n                (focus)=\"onFocusMaster($event)\"\r\n                (blur)=\"onBlurMaster($event)\"\r\n                (change)=\"onChange($event)\"\r\n                (copy)=\"onCopy($event)\"\r\n            >\r\n        </div>\r\n\r\n        <ard-_clear-button\r\n            *ngIf=\"shouldShowClearButton\"\r\n            [title]=\"clearButtonTitle\"\r\n            (click)=\"onClearButtonClick($event)\"\r\n        ></ard-_clear-button>\r\n    </div>\r\n</ard-form-field-frame>", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-simple-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2358,10 +2358,10 @@ class ArdSuggestionTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSuggestionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSuggestionTemplateDirective, selector: "ard-input > ng-template[ard-suggestion-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSuggestionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSuggestionTemplateDirective, selector: "ard-input > ng-template[ard-suggestion-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSuggestionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSuggestionTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-input > ng-template[ard-suggestion-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2369,10 +2369,10 @@ class ArdInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdInputPlaceholderTemplateDirective, selector: "ard-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdInputPlaceholderTemplateDirective, selector: "ard-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2380,10 +2380,10 @@ class ArdInputLoadingTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputLoadingTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdInputLoadingTemplateDirective, selector: "ard-input > ng-template[ard-loading-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputLoadingTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdInputLoadingTemplateDirective, selector: "ard-input > ng-template[ard-loading-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputLoadingTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-input > ng-template[ard-loading-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2391,10 +2391,10 @@ class ArdInputPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdInputPrefixTemplateDirective, selector: "ard-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdInputPrefixTemplateDirective, selector: "ard-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-input > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2402,10 +2402,10 @@ class ArdInputSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdInputSuffixTemplateDirective, selector: "ard-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdInputSuffixTemplateDirective, selector: "ard-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdInputSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdInputSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-input > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -2657,8 +2657,8 @@ class ArdiumInputComponent extends ArdiumSimpleInputComponent {
         this._isMouseBeingUsed = false;
         this.suggestionStorage.highlightNextItem(-1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumInputComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumInputComponent, selector: "ard-input", inputs: { charlist: "charlist", charlistCaseInsensitive: "charlistCaseInsensitive", autocomplete: "autocomplete", valueFrom: ["suggValueFrom", "valueFrom"], labelFrom: ["suggLabelFrom", "labelFrom"], suggestions: "suggestions", areSuggestionsLoading: "areSuggestionsLoading", suggestionsLoadingText: "suggestionsLoadingText", dropdowonAppearance: "dropdowonAppearance", dropdowonVariant: "dropdowonVariant" }, outputs: { acceptAutocompleteEvent: "acceptAutocomplete", acceptSuggestionEvent: "acceptSuggestion" }, host: { listeners: { "window:resize": "onWindowResize()", "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumInputComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumInputComponent, selector: "ard-input", inputs: { charlist: "charlist", charlistCaseInsensitive: "charlistCaseInsensitive", autocomplete: "autocomplete", valueFrom: ["suggValueFrom", "valueFrom"], labelFrom: ["suggLabelFrom", "labelFrom"], suggestions: "suggestions", areSuggestionsLoading: "areSuggestionsLoading", suggestionsLoadingText: "suggestionsLoadingText", dropdowonAppearance: "dropdowonAppearance", dropdowonVariant: "dropdowonVariant" }, outputs: { acceptAutocompleteEvent: "acceptAutocomplete", acceptSuggestionEvent: "acceptSuggestion" }, host: { listeners: { "window:resize": "onWindowResize()", "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumInputComponent),
@@ -2666,7 +2666,7 @@ class ArdiumInputComponent extends ArdiumSimpleInputComponent {
             },
         ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suggestionTemplate", first: true, predicate: ArdSuggestionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n>\r\n    <div class=\"ard-input\"\r\n        #suggestionsHost\r\n        [ngClass]=\"ngClasses\"\r\n        [class.ard-has-value]=\"value\"\r\n        (click)=\"focus()\"\r\n    >\r\n        <div class=\"ard-input-container\">\r\n            <div class=\"ard-autocomplete\" *ngIf=\"shouldDisplayAutocomplete\">{{ autocomplete }}</div>\r\n\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate>\r\n                    <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n            </ng-container>\r\n            \r\n            <input #textInput\r\n                #focusableElement\r\n                type=\"text\"\r\n                [attr.id]=\"inputId\"\r\n                [attr.tabindex]=\"tabIndex\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (input)=\"onInput(textInput.value)\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                (copy)=\"onCopy($event)\"\r\n            >\r\n        </div>\r\n\r\n        <ard-_clear-button\r\n            *ngIf=\"shouldShowClearButton\"\r\n            [title]=\"clearButtonTitle\"\r\n            (click)=\"onClearButtonClick($event)\"\r\n        ></ard-_clear-button>\r\n    </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n    <ard-dropdown-panel\r\n        class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n        role=\"listbox\"\r\n        [compact]=\"compact\"\r\n        aria-label=\"Suggestions\"\r\n        [appearance]=\"dropdownAppearance\"\r\n        [variant]=\"dropdownVariant\"\r\n        [isOpen]=\"shouldDisplaySuggestions\"\r\n        (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n        (mousemove)=\"onMouseMove()\"\r\n    >\r\n        <div\r\n            class=\"ard-option\"\r\n            role=\"option\"\r\n            *ngFor=\"let item of suggestionItems\"\r\n            [class.ard-option-disabled]=\"item.disabled\"\r\n            [class.ard-option-selected]=\"item.selected\"\r\n            [class.ard-option-highlighted]=\"item.highlighted\"\r\n            [class.ard-option-highlighted-recent]=\"item.highlighted_recently\"\r\n            [attr.aria-selected]=\"item.selected\"\r\n            (click)=\"selectSuggestion(item, $event)\"\r\n            (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n            (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n        >\r\n            <span class=\"ard-option-label\">\r\n                <ng-template #defaultOptionTemplate>\r\n                    {{item.label}}\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"suggestionTemplate || defaultOptionTemplate\"\r\n                    [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n                ></ng-template>\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"areSuggestionsLoading\">\r\n            <ng-template #defaultLoadingPlaceholderTemplate>\r\n                <div class=\"ard-option ard-option-disabled\">{{suggestionsLoadingText}}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n        </ng-container>\r\n    </ard-dropdown-panel>\r\n</ng-template>", styles: ["@import\"@angular/cdk/overlay-prebuilt.css\";.ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2736,8 +2736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumInputModule, declarations: [ArdiumInputComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumInputModule, declarations: [ArdiumInputComponent,
             ArdSuggestionTemplateDirective,
             ArdInputPlaceholderTemplateDirective,
             ArdInputLoadingTemplateDirective,
@@ -2748,9 +2748,9 @@ class ArdiumInputModule {
             ArdInputLoadingTemplateDirective,
             ArdInputPrefixTemplateDirective,
             ArdInputSuffixTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumDropdownPanelModule, ArdiumClickOutsideEventModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumDropdownPanelModule, ArdiumClickOutsideEventModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2774,17 +2774,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
         }] });
 
 class ArdiumSimpleInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSimpleInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSimpleInputModule, declarations: [ArdiumSimpleInputComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSimpleInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSimpleInputModule, declarations: [ArdiumSimpleInputComponent,
             ArdSimpleInputPlaceholderTemplateDirective,
             ArdSimpleInputPrefixTemplateDirective,
             ArdSimpleInputSuffixTemplateDirective], imports: [CommonModule, _ClearButtonModule, ArdiumFormFieldFrameModule], exports: [ArdiumSimpleInputComponent,
             ArdSimpleInputPlaceholderTemplateDirective,
             ArdSimpleInputPrefixTemplateDirective,
             ArdSimpleInputSuffixTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSimpleInputModule, imports: [CommonModule, _ClearButtonModule, ArdiumFormFieldFrameModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSimpleInputModule, imports: [CommonModule, _ClearButtonModule, ArdiumFormFieldFrameModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSimpleInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSimpleInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2807,10 +2807,10 @@ class ArdNumberInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdNumberInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdNumberInputPlaceholderTemplateDirective, selector: "ard-number-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdNumberInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdNumberInputPlaceholderTemplateDirective, selector: "ard-number-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdNumberInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdNumberInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-number-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -3020,8 +3020,8 @@ class ArdiumNumberInputComponent extends _NgModelComponentBase {
             input.setAttribute(key, String(attributes[key]));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumNumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumNumberInputComponent, selector: "ard-number-input", inputs: { inputId: "inputId", placeholder: "placeholder", appearance: "appearance", variant: "variant", alignText: "alignText", compact: "compact", inputAttrs: "inputAttrs", value: "value", min: "min", max: "max", allowFloat: "allowFloat", allowQuickChange: "allowQuickChange", stepSize: "stepSize" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumNumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumNumberInputComponent, selector: "ard-number-input", inputs: { inputId: "inputId", placeholder: "placeholder", appearance: "appearance", variant: "variant", alignText: "alignText", compact: "compact", inputAttrs: "inputAttrs", value: "value", min: "min", max: "max", allowFloat: "allowFloat", allowQuickChange: "allowQuickChange", stepSize: "stepSize" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumNumberInputComponent),
@@ -3029,7 +3029,7 @@ class ArdiumNumberInputComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-number-input\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (mouseup)=\"onMouseup($event)\"\r\n>\r\n    <ard-button *ngIf=\"allowQuickChange\"\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    >-</ard-button>\r\n    <div class=\"ard-input-container\">\r\n        <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n            <ng-template #defaultPlaceholderTemplate>\r\n                <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n            </ng-template>\r\n\r\n            <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n        </ng-container>\r\n\r\n        <input #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    <ard-button *ngIf=\"allowQuickChange\"\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    >+</ard-button>\r\n</div>", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["variant", "alignIcon", "vertical", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-number-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -3089,11 +3089,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumNumberInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumNumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumNumberInputModule, declarations: [ArdiumNumberInputComponent, ArdNumberInputPlaceholderTemplateDirective], imports: [CommonModule, ArdiumHoldEventModule, ArdiumButtonModule], exports: [ArdiumNumberInputComponent, ArdNumberInputPlaceholderTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumNumberInputModule, imports: [CommonModule, ArdiumHoldEventModule, ArdiumButtonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumNumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumNumberInputModule, declarations: [ArdiumNumberInputComponent, ArdNumberInputPlaceholderTemplateDirective], imports: [CommonModule, ArdiumHoldEventModule, ArdiumButtonModule], exports: [ArdiumNumberInputComponent, ArdNumberInputPlaceholderTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumNumberInputModule, imports: [CommonModule, ArdiumHoldEventModule, ArdiumButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumNumberInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumNumberInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumNumberInputComponent, ArdNumberInputPlaceholderTemplateDirective],
@@ -3215,10 +3215,10 @@ class ArdHexInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdHexInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdHexInputPlaceholderTemplateDirective, selector: "ard-hex-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdHexInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdHexInputPlaceholderTemplateDirective, selector: "ard-hex-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdHexInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdHexInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-hex-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -3226,10 +3226,10 @@ class ArdHexInputPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdHexInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdHexInputPrefixTemplateDirective, selector: "ard-hex-input ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdHexInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdHexInputPrefixTemplateDirective, selector: "ard-hex-input ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdHexInputPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdHexInputPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-hex-input ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -3237,10 +3237,10 @@ class ArdHexInputSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdHexInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdHexInputSuffixTemplateDirective, selector: "ard-hex-input ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdHexInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdHexInputSuffixTemplateDirective, selector: "ard-hex-input ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdHexInputSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdHexInputSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-hex-input ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -3397,8 +3397,8 @@ class ArdiumHexInputComponent extends _NgModelComponentBase {
             input.setAttribute(key, String(attributes[key]));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumHexInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumHexInputComponent, selector: "ard-hex-input", inputs: { inputId: "inputId", placeholder: "placeholder", appearance: "appearance", variant: "variant", compact: "compact", case: "case", maxDigits: "maxDigits", hideHash: "hideHash", clearable: "clearable", clearButtonTitle: "clearButtonTitle", inputAttrs: "inputAttrs", value: "value" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumHexInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumHexInputComponent, selector: "ard-hex-input", inputs: { inputId: "inputId", placeholder: "placeholder", appearance: "appearance", variant: "variant", compact: "compact", case: "case", maxDigits: "maxDigits", hideHash: "hideHash", clearable: "clearable", clearButtonTitle: "clearButtonTitle", inputAttrs: "inputAttrs", value: "value" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumHexInputComponent),
@@ -3406,7 +3406,7 @@ class ArdiumHexInputComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n>\r\n    <div class=\"ard-hex-input\"\r\n        [class.ard-has-value]=\"value\"\r\n        (mouseup)=\"onMouseup($event)\"\r\n    >\r\n        <div class=\"ard-hash-container\" *ngIf=\"showHash\">#</div>\r\n        <div class=\"ard-input-container\">\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate>\r\n                    <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n            </ng-container>\r\n\r\n            <input #textInput\r\n                #focusableElement\r\n                type=\"text\"\r\n                [attr.id]=\"inputId\"\r\n                [attr.tabindex]=\"tabIndex\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (input)=\"onInput(textInput.value)\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                (change)=\"onChange($event)\"\r\n                (mouseup)=\"$event.stopPropagation()\"\r\n                (copy)=\"onCopy($event)\"\r\n            >\r\n        </div>\r\n\r\n        <ard-_clear-button\r\n            *ngIf=\"shouldShowClearButton\"\r\n            [title]=\"clearButtonTitle\"\r\n            (click)=\"onClearButtonClick($event)\"\r\n        ></ard-_clear-button>\r\n    </div>\r\n</ard-form-field-frame>", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-hex-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -3467,11 +3467,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumHexInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumHexInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumHexInputModule, declarations: [ArdiumHexInputComponent, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective], imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule], exports: [ArdiumHexInputComponent, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumHexInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumHexInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumHexInputModule, declarations: [ArdiumHexInputComponent, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective], imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule], exports: [ArdiumHexInputComponent, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumHexInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumHexInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumHexInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumHexInputComponent, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective],
@@ -3968,10 +3968,10 @@ class ArdiumOptionComponent {
     ngOnDestroy() {
         this.stateChange$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumOptionComponent, selector: "ard-option", inputs: { value: "value", label: "label", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumOptionComponent, selector: "ard-option", inputs: { value: "value", label: "label", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumOptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ard-option',
@@ -4062,10 +4062,10 @@ class ArdSelectPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSelectPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSelectPrefixTemplateDirective, selector: "ard-select > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSelectPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSelectPrefixTemplateDirective, selector: "ard-select > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSelectPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSelectPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4073,10 +4073,10 @@ class ArdSelectSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSelectSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSelectSuffixTemplateDirective, selector: "ard-select > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSelectSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSelectSuffixTemplateDirective, selector: "ard-select > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSelectSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSelectSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4084,10 +4084,10 @@ class ArdValueTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdValueTemplateDirective, selector: "ard-select > ng-template[ard-value-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdValueTemplateDirective, selector: "ard-select > ng-template[ard-value-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdValueTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdValueTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-value-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4095,10 +4095,10 @@ class ArdValueChipTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdValueChipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdValueChipTemplateDirective, selector: "ard-select > ng-template[ard-value-chip-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdValueChipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdValueChipTemplateDirective, selector: "ard-select > ng-template[ard-value-chip-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdValueChipTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdValueChipTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-value-chip-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4106,10 +4106,10 @@ class ArdOptionTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdOptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdOptionTemplateDirective, selector: "ard-select > ng-template[ard-option-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdOptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdOptionTemplateDirective, selector: "ard-select > ng-template[ard-option-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdOptionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdOptionTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-option-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4117,10 +4117,10 @@ class ArdOptgroupTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdOptgroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdOptgroupTemplateDirective, selector: "ard-select > ng-template[ard-optgroup-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdOptgroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdOptgroupTemplateDirective, selector: "ard-select > ng-template[ard-optgroup-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdOptgroupTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdOptgroupTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-optgroup-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4128,10 +4128,10 @@ class ArdSelectPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSelectPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSelectPlaceholderTemplateDirective, selector: "ard-select > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSelectPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSelectPlaceholderTemplateDirective, selector: "ard-select > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSelectPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSelectPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4139,10 +4139,10 @@ class ArdLoadingSpinnerTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdLoadingSpinnerTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdLoadingSpinnerTemplateDirective, selector: "ard-select > ng-template[ard-loading-spinner-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdLoadingSpinnerTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdLoadingSpinnerTemplateDirective, selector: "ard-select > ng-template[ard-loading-spinner-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdLoadingSpinnerTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdLoadingSpinnerTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-loading-spinner-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4150,10 +4150,10 @@ class ArdLoadingPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdLoadingPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdLoadingPlaceholderTemplateDirective, selector: "ard-select > ng-template[ard-loading-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdLoadingPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdLoadingPlaceholderTemplateDirective, selector: "ard-select > ng-template[ard-loading-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdLoadingPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdLoadingPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-select > ng-template[ard-loading-placeholder-tmp]',
@@ -4163,10 +4163,10 @@ class ArdDropdownHeaderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDropdownHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdDropdownHeaderTemplateDirective, selector: "ard-select > ng-template[ard-dropdown-header-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDropdownHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdDropdownHeaderTemplateDirective, selector: "ard-select > ng-template[ard-dropdown-header-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDropdownHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDropdownHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-dropdown-header-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4174,10 +4174,10 @@ class ArdDropdownFooterTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDropdownFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdDropdownFooterTemplateDirective, selector: "ard-select > ng-template[ard-dropdown-footer-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDropdownFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdDropdownFooterTemplateDirective, selector: "ard-select > ng-template[ard-dropdown-footer-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDropdownFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDropdownFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-dropdown-footer-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4185,10 +4185,10 @@ class ArdNoItemsFoundTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdNoItemsFoundTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdNoItemsFoundTemplateDirective, selector: "ard-select > ng-template[ard-no-items-found-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdNoItemsFoundTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdNoItemsFoundTemplateDirective, selector: "ard-select > ng-template[ard-no-items-found-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdNoItemsFoundTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdNoItemsFoundTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-no-items-found-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4196,10 +4196,10 @@ class ArdAddCustomTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdAddCustomTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdAddCustomTemplateDirective, selector: "ard-select > ng-template[ard-add-custom-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdAddCustomTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdAddCustomTemplateDirective, selector: "ard-select > ng-template[ard-add-custom-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdAddCustomTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdAddCustomTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-add-custom-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4207,10 +4207,10 @@ class ArdItemLimitReachedTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdItemLimitReachedTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdItemLimitReachedTemplateDirective, selector: "ard-select > ng-template[ard-item-limit-reached-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdItemLimitReachedTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdItemLimitReachedTemplateDirective, selector: "ard-select > ng-template[ard-item-limit-reached-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdItemLimitReachedTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdItemLimitReachedTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-item-limit-reached-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -4218,10 +4218,10 @@ class ArdItemDisplayLimitTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdItemDisplayLimitTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdItemDisplayLimitTemplateDirective, selector: "ard-select > ng-template[ard-item-display-limit-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdItemDisplayLimitTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdItemDisplayLimitTemplateDirective, selector: "ard-select > ng-template[ard-item-display-limit-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdItemDisplayLimitTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdItemDisplayLimitTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-select > ng-template[ard-item-display-limit-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -5143,8 +5143,8 @@ class ArdiumSelectComponent extends _NgModelComponentBase {
     _onCtrlAPress(event) {
         this.itemStorage.highlightAllItems();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSelectComponent, selector: "ard-select", inputs: { valueFrom: "valueFrom", labelFrom: "labelFrom", disabledFrom: "disabledFrom", groupLabelFrom: "groupLabelFrom", groupDisabledFrom: "groupDisabledFrom", childrenFrom: "childrenFrom", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", dropdownPosition: "dropdownPosition", clearButtonTitle: "clearButtonTitle", noItemsFoundText: "noItemsFoundText", loadingPlaceholderText: "loadingPlaceholderText", searchInputId: "searchInputId", isLoading: "isLoading", inputAttrs: "inputAttrs", htmlId: "htmlId", itemsAlreadyGrouped: "itemsAlreadyGrouped", invertDisabled: "invertDisabled", noGroupActions: "noGroupActions", autoHighlightFirst: "autoHighlightFirst", autoFocus: "autoFocus", keepOpen: "keepOpen", hideSelected: "hideSelected", noBackspaceClear: "noBackspaceClear", sortMultipleValues: "sortMultipleValues", searchCaseSensitive: "searchCaseSensitive", keepSearchAfterSelect: "keepSearchAfterSelect", maxSelectedItems: "maxSelectedItems", itemDisplayLimit: "itemDisplayLimit", searchFn: "searchFn", compareWith: "compareWith", appearance: "appearance", variant: "variant", compact: "compact", dropdowonAppearance: "dropdowonAppearance", dropdowonVariant: "dropdowonVariant", groupItems: "groupItems", items: "items", multiselectable: "multiselectable", clearable: "clearable", searchable: "searchable", addCustom: "addCustom", value: "value", isDropdownOpen: ["isOpen", "isDropdownOpen"] }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", failedToAddEvent: "failedToAdd", removeEvent: "remove", clearEvent: "clear", openEvent: "open", closeEvent: "close", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd", searchEvent: "search", isDropdownOpenChange: "isOpenChange" }, host: { listeners: { "window:resize": "onWindowResize()", "mouseup": "onMouseup()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-group-items": "this.groupItems", "attr.multiple": "this.multiselectable" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSelectComponent, selector: "ard-select", inputs: { valueFrom: "valueFrom", labelFrom: "labelFrom", disabledFrom: "disabledFrom", groupLabelFrom: "groupLabelFrom", groupDisabledFrom: "groupDisabledFrom", childrenFrom: "childrenFrom", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", dropdownPosition: "dropdownPosition", clearButtonTitle: "clearButtonTitle", noItemsFoundText: "noItemsFoundText", loadingPlaceholderText: "loadingPlaceholderText", searchInputId: "searchInputId", isLoading: "isLoading", inputAttrs: "inputAttrs", htmlId: "htmlId", itemsAlreadyGrouped: "itemsAlreadyGrouped", invertDisabled: "invertDisabled", noGroupActions: "noGroupActions", autoHighlightFirst: "autoHighlightFirst", autoFocus: "autoFocus", keepOpen: "keepOpen", hideSelected: "hideSelected", noBackspaceClear: "noBackspaceClear", sortMultipleValues: "sortMultipleValues", searchCaseSensitive: "searchCaseSensitive", keepSearchAfterSelect: "keepSearchAfterSelect", maxSelectedItems: "maxSelectedItems", itemDisplayLimit: "itemDisplayLimit", searchFn: "searchFn", compareWith: "compareWith", appearance: "appearance", variant: "variant", compact: "compact", dropdowonAppearance: "dropdowonAppearance", dropdowonVariant: "dropdowonVariant", groupItems: "groupItems", items: "items", multiselectable: "multiselectable", clearable: "clearable", searchable: "searchable", addCustom: "addCustom", value: "value", isDropdownOpen: ["isOpen", "isDropdownOpen"] }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", failedToAddEvent: "failedToAdd", removeEvent: "remove", clearEvent: "clear", openEvent: "open", closeEvent: "close", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd", searchEvent: "search", isDropdownOpenChange: "isOpenChange" }, host: { listeners: { "window:resize": "onWindowResize()", "mouseup": "onMouseup()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-group-items": "this.groupItems", "attr.multiple": "this.multiselectable" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSelectComponent),
@@ -5152,7 +5152,7 @@ class ArdiumSelectComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => ArdiumDropdownPanelComponent), descendants: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n>\r\n    <div class=\"ard-select\"\r\n        #dropdownHost\r\n        (click)=\"handleAnywhereClick($event)\"\r\n        [class.ard-has-value]=\"itemStorage.isAnyItemSelected\"\r\n        [ngClass]=\"ngClasses\"\r\n    >\r\n        <div class=\"ard-select-value-container\">\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate let-plhldr>\r\n                    <div class=\"ard-placeholder\">{{ plhldr }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"\r\n                    [ngTemplateOutletContext]=\"getPlaceholderContext()\"\r\n                ></ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"shouldDisplayValue\">\r\n                <div class=\"ard-select-value\"\r\n                    *ngFor=\"let item of itemStorage.selectedItems; let i = index\"\r\n                    [class.ard-value-disabled]=\"item.disabled\"\r\n                    [attr.hidden]=\"!isValueWithinDisplayLimit(i) ? true : null\"\r\n                >\r\n                    <ng-template *ngIf=\"isValueWithinDisplayLimit(i)\"\r\n                        [ngTemplateOutlet]=\"valueTemplate || (multiselectable ? defaultMultiValueTemplate :  defaultValueTemplate)\"\r\n                        [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n                    ></ng-template>\r\n                </div>\r\n\r\n                <ng-template #defaultValueTemplate let-item>\r\n                    <div [ardInnerHTML]=\"item.label\" [ardEscapeInnerHTML]=\"isItemsInputUsed\"></div>\r\n                </ng-template>\r\n                <ng-template #defaultMultiValueTemplate let-item let-unselect=\"unselect\">\r\n                    <ard-deletable-chip\r\n                        (delete)=\"unselect(item)\"\r\n                        [variant]=\"variant\"\r\n                        compact\r\n                        appearance=\"outlined-strong\"\r\n                    >\r\n                        <div [ardInnerHTML]=\"item.label\" [ardEscapeInnerHTML]=\"isItemsInputUsed\"></div>\r\n                    </ard-deletable-chip>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemStorage.isAnyItemSelected && shouldShowItemDisplayLimit\">\r\n                <div class=\"ard-overflow-indicator\">\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"itemDisplayLimitTemplate || defaultItemDisplayLimitTemplate\"\r\n                        [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n                    ></ng-template>\r\n\r\n                    <ng-template #defaultItemDisplayLimitTemplate let-count=\"overflowCount\">\r\n                        <div>{{count}} more...</div>\r\n                    </ng-template>\r\n                </div>\r\n            </ng-container>\r\n            \r\n            <div class=\"ard-search-input\"\r\n                role=\"combobox\"\r\n                aria-haspopup=\"listbox\"\r\n                [attr.aria-expanded]=\"isDropdownOpen\"\r\n                [attr.aria-owns]=\"isDropdownOpen ? htmlId : null\"\r\n            >\r\n                <input #searchInput\r\n                    #focusableElement\r\n                    type=\"text\"\r\n                    [attr.id]=\"searchInputId\"\r\n                    [attr.tabindex]=\"tabIndex\"\r\n                    [readonly]=\"isInputElementReadonly\"\r\n                    [disabled]=\"disabled\"\r\n                    [value]=\"searchTerm\"\r\n                    aria-autocomplete=\"list\"\r\n                    [attr.aria-controls]=\"isDropdownOpen ? htmlId : null\"\r\n                    (input)=\"filter(searchInput.value)\"\r\n                    (change)=\"$event.stopPropagation()\"\r\n                    (focus)=\"onFocus($event)\"\r\n                    (focus)=\"onSearchInputFocus($event)\"\r\n                    (blur)=\"onBlur($event)\"\r\n                    (blur)=\"onSearchInputBlur($event)\"\r\n                >\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"ard-select-controls\">\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-template #defaultLoadingSpinnerTemplate>\r\n                    <div class=\"ard-simple-spinner\"></div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ard-_clear-button *ngIf=\"shouldShowClearButton\"\r\n                [title]=\"clearButtonTitle\"\r\n                (click)=\"handleClearButtonClick($event)\"\r\n            ></ard-_clear-button>\r\n\r\n            <div class=\"ard-dropdown-arrow-wrapper\"\r\n                role=\"button\"\r\n                (click)=\"handleDropdownArrowClick($event)\"\r\n            >\r\n                <span class=\"ard-dropdown-arrow\"></span>\r\n                <div class=\"ard-hitbox\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ard-form-field-frame>\r\n\r\n\r\n<ng-template #dropdownTemplate>\r\n    <ard-dropdown-panel\r\n        class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n        role=\"listbox\"\r\n        aria-label=\"Options list\"\r\n        [headerTemplate]=\"dropdownHeaderTemplate\"\r\n        [footerTemplate]=\"dropdownFooterTemplate\"\r\n        [appearance]=\"dropdownAppearance\"\r\n        [variant]=\"dropdownVariant\"\r\n        [isOpen]=\"true\"\r\n        [filterValue]=\"searchTerm\"\r\n        [panelId]=\"htmlId\"\r\n        [compact]=\"compact\"\r\n        (ardClickOutside)=\"handleOutsideClick($event)\"\r\n        (mousemove)=\"onMouseMove()\"\r\n        (scroll)=\"scrollEvent.emit($event)\"\r\n        (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n    >\r\n        <ng-container *ngIf=\"!shouldShowNoItemsFound\">\r\n            <div\r\n                class=\"ard-optgroup\"\r\n                role=\"group\"\r\n                *ngFor=\"let group of itemStorage.groups\"\r\n                [class.ard-group-disabled]=\"group.disabled\"\r\n                [class.ard-group-selected]=\"group.selected\"\r\n                [class.ard-group-highlighted]=\"group.highlighted\"\r\n                (mouseover)=\"onGroupMouseover(group)\"\r\n                (click)=\"onGroupClick(group)\"\r\n            >\r\n                <ng-container *ngIf=\"group.label !== '' && group.label !== undefined\">\r\n                    <ng-template #defaultOptgroupTemplate>\r\n                        <span class=\"ard-optgroup-label\" [ardInnerHTML]=\"group.label\" [ardEscapeInnerHTML]=\"isItemsInputUsed\"></span>\r\n                    </ng-template>\r\n\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"optgroupTemplate || defaultOptgroupTemplate\"\r\n                        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n                    ></ng-template>\r\n                </ng-container>\r\n\r\n                <div class=\"ard-optgroup-children\">\r\n                    <div\r\n                        class=\"ard-option\"\r\n                        role=\"option\"\r\n                        *ngFor=\"let option of group.children\"\r\n                        [class.ard-option-disabled]=\"option.disabled\"\r\n                        [class.ard-option-selected]=\"option.selected\"\r\n                        [class.ard-option-highlighted]=\"option.highlighted\"\r\n                        [class.ard-option-highlighted-recent]=\"option.highlighted_recently\"\r\n                        [attr.aria-selected]=\"option.selected\"\r\n                        [attr.id]=\"htmlId + '-' + option.index\"\r\n                        (click)=\"onItemClick(option, $event)\"\r\n                        (mouseover)=\"onItemMouseOver($event)\"\r\n                        (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n                        (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n                    >\r\n                        <div class=\"ard-option-label\">\r\n                            <ng-template #defaultOptionTemplate>\r\n                                <span [ardInnerHTML]=\"option.label\" [ardEscapeInnerHTML]=\"isItemsInputUsed\"></span>\r\n                            </ng-template>\r\n\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"optionTemplate || defaultOptionTemplate\"\r\n                                [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n                            ></ng-template>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"shouldShowNoItemsFound\">\r\n            <ng-template #defaultNoItemsFoundTemplate>\r\n                <div class=\"ard-option ard-option-disabled\">{{noItemsFoundText}}</div>\r\n            </ng-template>\r\n\r\n            <ng-template [ngTemplateOutlet]=\"noItemsFoundTemplate || defaultNoItemsFoundTemplate\"\r\n                [ngTemplateOutletContext]=\"getSearchContext()\">\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"shouldShowAddCustom\">\r\n            <ng-template #defaultAddCustomTemplate let-searchTerm>\r\n                <div class=\"ard-option ard-option-highlighted ard-add-custom\" (click)=\"addCustomOption(searchTerm)\">\r\n                    <span class=\"ard-add-custom-label\">Add option</span>\r\n                    <span class=\"ard-add-custom-value\">\"{{searchTerm}}\"</span>\r\n                </div>\r\n            </ng-template>\r\n\r\n            <ng-template [ngTemplateOutlet]=\"addCustomTemplate || defaultAddCustomTemplate\"\r\n                [ngTemplateOutletContext]=\"getCustomOptionContext()\">\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isLoading\">\r\n            <ng-template #defaultLoadingPlaceholderTemplate>\r\n                <div class=\"ard-option ard-option-disabled\">{{loadingPlaceholderText}}</div>\r\n            </ng-template>\r\n\r\n            <ng-template [ngTemplateOutlet]=\"loadingPlaceholderTemplate || defaultLoadingPlaceholderTemplate\"\r\n                [ngTemplateOutletContext]=\"getSearchContext()\">\r\n            </ng-template>\r\n        </ng-container>\r\n    </ard-dropdown-panel>\r\n</ng-template>", styles: ["@import\"@angular/cdk/overlay-prebuilt.css\";.ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-value[hidden]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -5360,8 +5360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectModule, declarations: [ArdiumSelectComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectModule, declarations: [ArdiumSelectComponent,
             //tempalate directives
             ArdOptionTemplateDirective,
             ArdOptgroupTemplateDirective,
@@ -5400,7 +5400,7 @@ class ArdiumSelectModule {
             ArdAddCustomTemplateDirective,
             ArdSelectPrefixTemplateDirective,
             ArdSelectSuffixTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectModule, imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
             ArdiumChipModule,
@@ -5408,7 +5408,7 @@ class ArdiumSelectModule {
             _ClearButtonModule,
             ArdiumInnerHTMLModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5462,11 +5462,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
         }] });
 
 class ArdiumOptionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumOptionModule, declarations: [ArdiumOptionComponent], imports: [CommonModule], exports: [ArdiumOptionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumOptionModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumOptionModule, declarations: [ArdiumOptionComponent], imports: [CommonModule], exports: [ArdiumOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumOptionModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumOptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumOptionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumOptionComponent],
@@ -5485,8 +5485,8 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
     get ngClasses() {
         return [`ard-color-${this.color}`].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSlideToggleComponent, selector: "ard-slide-toggle", inputs: { wrapperClasses: "wrapperClasses", color: "color", icon: "icon", selectedIcon: "selectedIcon", unselectedIcon: "unselectedIcon" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSlideToggleComponent, selector: "ard-slide-toggle", inputs: { wrapperClasses: "wrapperClasses", color: "color", icon: "icon", selectedIcon: "selectedIcon", unselectedIcon: "unselectedIcon" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSlideToggleComponent),
@@ -5494,7 +5494,7 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
             },
         ], usesInheritance: true, ngImport: i0, template: "<button\r\n    class=\"ard-slide-toggle\"\r\n    role=\"checkbox\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class.ard-slide-toggle-selected]=\"selected\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n    (click)=\"toggleSelected()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-slide-toggle-track\">\r\n        <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n    </div>\r\n    <div class=\"ard-slide-toggle-handle\">\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-slide-toggle-icon ard-icon-for-selected\" *ngIf=\"selectedIcon ?? icon\">{{selectedIcon ?? icon}}</div>\r\n        <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\" *ngIf=\"unselectedIcon ?? icon\">{{unselectedIcon ?? icon}}</div>\r\n    </div>\r\n</button>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-slide-toggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -5516,11 +5516,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumSlideToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSlideToggleModule, declarations: [ArdiumSlideToggleComponent], imports: [CommonModule], exports: [ArdiumSlideToggleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSlideToggleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSlideToggleModule, declarations: [ArdiumSlideToggleComponent], imports: [CommonModule], exports: [ArdiumSlideToggleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSlideToggleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSlideToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSlideToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumSlideToggleComponent],
@@ -5533,10 +5533,10 @@ class ArdSliderTooltipDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSliderTooltipDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSliderTooltipDirective, selector: "ng-template[ard-slider-tooltip-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSliderTooltipDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSliderTooltipDirective, selector: "ng-template[ard-slider-tooltip-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSliderTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSliderTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[ard-slider-tooltip-tmp]',
@@ -5817,10 +5817,10 @@ class _AbstractSlider extends _NgModelComponentBase {
     _increment(event, steps = 1) {
         this._offset(+steps, event.shiftKey);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _AbstractSlider, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _AbstractSlider, inputs: { noTooltip: "noTooltip", tooltipFormat: "tooltipFormat", min: "min", max: "max", step: "step", shiftMultiplier: "shiftMultiplier", showValueTicks: "showValueTicks", labelPosition: "labelPosition", labels: "labels", color: "color", compact: "compact", value: "value", tooltipPosition: "tooltipPosition", tooltipBehavior: "tooltipBehavior" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:pointerup": "onPointerUp($event)", "document:touchend": "onPointerUp($event)", "keydown": "onKeyPress($event)" } }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ArdSliderTooltipDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "element", first: true, predicate: ["track"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _AbstractSlider, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _AbstractSlider, inputs: { noTooltip: "noTooltip", tooltipFormat: "tooltipFormat", min: "min", max: "max", step: "step", shiftMultiplier: "shiftMultiplier", showValueTicks: "showValueTicks", labelPosition: "labelPosition", labels: "labels", color: "color", compact: "compact", value: "value", tooltipPosition: "tooltipPosition", tooltipBehavior: "tooltipBehavior" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:pointerup": "onPointerUp($event)", "document:touchend": "onPointerUp($event)", "keydown": "onKeyPress($event)" } }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ArdSliderTooltipDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "element", first: true, predicate: ["track"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _AbstractSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _AbstractSlider, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
@@ -5933,8 +5933,8 @@ class ArdiumSliderComponent extends _AbstractSlider {
         //9 is an arbitrary number that just works well. ¯\_(ツ)_/¯
         return roundToPrecision(newVal, 9);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSliderComponent, selector: "ard-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSliderComponent, selector: "ard-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSliderComponent),
@@ -5942,7 +5942,7 @@ class ArdiumSliderComponent extends _AbstractSlider {
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-slider-container-master\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed\"\r\n    [style]=\"{'--_ard-slider-transition': sliderTransition }\"\r\n>\r\n    <div class=\"ard-slider-container\">\r\n        <div #track\r\n            class=\"ard-slider-track\"\r\n            (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n        >\r\n            <div class=\"ard-hitbox\"></div>\r\n            <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n            <div class=\"ard-slider-track-overlay ard-slider-track-active\" [style]=\"{width: getHandlePosition(1)}\"></div>\r\n            <div class=\"ard-value-tick-container\" *ngIf=\"showValueTicks\">\r\n                <div class=\"ard-value-tick\" *ngFor=\"let left of tickArray\" [style]=\"{left: left}\"></div>\r\n            </div>\r\n        </div>\r\n        <button #focusableElement\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event)\"\r\n            (touchstart)=\"onPointerDownOnHandle($event)\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext()\">\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-slider-label-container\" *ngIf=\"labelObjects.length\">\r\n        <div\r\n            *ngFor=\"let label of labelObjects\"\r\n            class=\"ard-slider-label\"\r\n            [style]=\"{left: label.positionPercent}\"\r\n        >{{ label.label }}</div>\r\n    </div>\r\n</div>", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-slider-container-master{display:flex;flex-direction:column}.ard-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-slider-container-master .ard-slider-tooltip,.ard-slider-container-master .ard-slider-track,.ard-slider-container-master .ard-value-tick-container{position:relative}.ard-slider-container-master .ard-value-tick{position:absolute}.ard-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-slider-container-master .ard-slider-label{position:absolute;line-height:1em}.ard-disabled .ard-slider-container-master,.ard-disabled .ard-range-slider-container-master{pointer-events:none;opacity:60%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -5960,11 +5960,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSliderModule, declarations: [ArdiumSliderComponent, ArdSliderTooltipDirective], imports: [CommonModule, OverlayModule], exports: [ArdiumSliderComponent, ArdSliderTooltipDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSliderModule, imports: [CommonModule, OverlayModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSliderModule, declarations: [ArdiumSliderComponent, ArdSliderTooltipDirective], imports: [CommonModule, OverlayModule], exports: [ArdiumSliderComponent, ArdSliderTooltipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSliderModule, imports: [CommonModule, OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumSliderComponent, ArdSliderTooltipDirective],
@@ -6096,10 +6096,10 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         super.onBlur(event);
         this.currentHandle = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRangeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumRangeSliderComponent, selector: "ard-range-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-range-slider-container-master\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed\"\r\n    [style]=\"{'--_ard-slider-transition': sliderTransition }\"\r\n>\r\n    <div class=\"ard-slider-container\">\r\n        <div #track\r\n            class=\"ard-slider-track\"\r\n            (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n        >\r\n            <div class=\"ard-hitbox\"></div>\r\n            <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n            <div \r\n                class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n                [style]=\"{\r\n                    left: trackOverlayLeft,\r\n                    width: trackOverlayWidth\r\n                }\"\r\n            ></div>\r\n            <div class=\"ard-value-tick-container\" *ngIf=\"showValueTicks\">\r\n                <div class=\"ard-value-tick\" *ngFor=\"let left of tickArray\" [style]=\"{left: left}\"></div>\r\n            </div>\r\n        </div>\r\n        <button #focusableElement\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed && currentHandle == 1\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n            (focus)=\"onHandleFocus($event, 1)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext('low')\">\r\n            </ng-template>\r\n        </div>\r\n        <button\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed && currentHandle == 2\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n            (focus)=\"onHandleFocus($event, 2)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(2)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(2)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext('high')\">\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-slider-label-container\" *ngIf=\"labelObjects.length\">\r\n        <div\r\n            *ngFor=\"let label of labelObjects\"\r\n            class=\"ard-slider-label\"\r\n            [style]=\"{left: label.positionPercent}\"\r\n        >{{ label.label }}</div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n    <div class=\"ard-slide-thumb\">Test</div>\r\n</ng-template>", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRangeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumRangeSliderComponent, selector: "ard-range-slider", host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-range-slider-container-master\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed\"\r\n    [style]=\"{'--_ard-slider-transition': sliderTransition }\"\r\n>\r\n    <div class=\"ard-slider-container\">\r\n        <div #track\r\n            class=\"ard-slider-track\"\r\n            (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n        >\r\n            <div class=\"ard-hitbox\"></div>\r\n            <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n            <div \r\n                class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n                [style]=\"{\r\n                    left: trackOverlayLeft,\r\n                    width: trackOverlayWidth\r\n                }\"\r\n            ></div>\r\n            <div class=\"ard-value-tick-container\" *ngIf=\"showValueTicks\">\r\n                <div class=\"ard-value-tick\" *ngFor=\"let left of tickArray\" [style]=\"{left: left}\"></div>\r\n            </div>\r\n        </div>\r\n        <button #focusableElement\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed && currentHandle == 1\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n            (focus)=\"onHandleFocus($event, 1)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext('low')\">\r\n            </ng-template>\r\n        </div>\r\n        <button\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed && currentHandle == 2\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n            (focus)=\"onHandleFocus($event, 2)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(2)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(2)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext('high')\">\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-slider-label-container\" *ngIf=\"labelObjects.length\">\r\n        <div\r\n            *ngFor=\"let label of labelObjects\"\r\n            class=\"ard-slider-label\"\r\n            [style]=\"{left: label.positionPercent}\"\r\n        >{{ label.label }}</div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n    <div class=\"ard-slide-thumb\">Test</div>\r\n</ng-template>", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-range-slider-container-master\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed\"\r\n    [style]=\"{'--_ard-slider-transition': sliderTransition }\"\r\n>\r\n    <div class=\"ard-slider-container\">\r\n        <div #track\r\n            class=\"ard-slider-track\"\r\n            (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n        >\r\n            <div class=\"ard-hitbox\"></div>\r\n            <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n            <div \r\n                class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n                [style]=\"{\r\n                    left: trackOverlayLeft,\r\n                    width: trackOverlayWidth\r\n                }\"\r\n            ></div>\r\n            <div class=\"ard-value-tick-container\" *ngIf=\"showValueTicks\">\r\n                <div class=\"ard-value-tick\" *ngFor=\"let left of tickArray\" [style]=\"{left: left}\"></div>\r\n            </div>\r\n        </div>\r\n        <button #focusableElement\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed && currentHandle == 1\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n            (focus)=\"onHandleFocus($event, 1)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(1)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext('low')\">\r\n            </ng-template>\r\n        </div>\r\n        <button\r\n            class=\"ard-slider-handle\"\r\n            [tabindex]=\"tabIndex\"\r\n            [class.ard-grabbed]=\"isSliderHandleGrabbed && currentHandle == 2\"\r\n            (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n            (focus)=\"onHandleFocus($event, 2)\"\r\n            (blur)=\"onBlur($event)\"\r\n            [style]=\"{left: getHandlePosition(2)}\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-hitbox\"></div>\r\n        </button>\r\n        <div class=\"ard-slider-tooltip-wrapper\"\r\n            *ngIf=\"tooltipBehavior != 'never'\"\r\n            [class.ard-tooltip-always]=\"tooltipBehavior == 'always'\"\r\n            [style]=\"{left: getHandlePosition(2)}\"\r\n        >\r\n            <ng-template #defaultTooltipTemplate let-value>\r\n                <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n            </ng-template>\r\n        \r\n            <ng-template [ngTemplateOutlet]=\"tooltipTemplate || defaultTooltipTemplate\"\r\n                [ngTemplateOutletContext]=\"getTooltipContext('high')\">\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-slider-label-container\" *ngIf=\"labelObjects.length\">\r\n        <div\r\n            *ngFor=\"let label of labelObjects\"\r\n            class=\"ard-slider-label\"\r\n            [style]=\"{left: label.positionPercent}\"\r\n        >{{ label.label }}</div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n    <div class=\"ard-slide-thumb\">Test</div>\r\n</ng-template>", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
         }], propDecorators: { onPointerMove: [{
@@ -6111,11 +6111,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumRangeSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRangeSliderModule, declarations: [ArdiumRangeSliderComponent], imports: [CommonModule], exports: [ArdiumRangeSliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRangeSliderModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRangeSliderModule, declarations: [ArdiumRangeSliderComponent], imports: [CommonModule], exports: [ArdiumRangeSliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRangeSliderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRangeSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumRangeSliderComponent],
@@ -6156,10 +6156,10 @@ class ArdiumStarComponent {
     get ngClasses() {
         return [`ard-color-${this.color}`, `ard-star-fill-${this.fill}`].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: "wrapperClasses", fill: "fill", color: "color" }, ngImport: i0, template: "<div\r\n    class=\"ard-star\"\r\n    [class]=\"wrapperClasses\"\r\n    [ngClass]=\"ngClasses\"\r\n>\r\n    <div class=\"ard-star-icon ard-star-selected\"></div>\r\n    <div class=\"ard-star-icon ard-star-half\"></div>\r\n    <div class=\"ard-star-icon ard-star-unselected\"></div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: "wrapperClasses", fill: "fill", color: "color" }, ngImport: i0, template: "<div\r\n    class=\"ard-star\"\r\n    [class]=\"wrapperClasses\"\r\n    [ngClass]=\"ngClasses\"\r\n>\r\n    <div class=\"ard-star-icon ard-star-selected\"></div>\r\n    <div class=\"ard-star-icon ard-star-half\"></div>\r\n    <div class=\"ard-star-icon ard-star-unselected\"></div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"ard-star\"\r\n    [class]=\"wrapperClasses\"\r\n    [ngClass]=\"ngClasses\"\r\n>\r\n    <div class=\"ard-star-icon ard-star-selected\"></div>\r\n    <div class=\"ard-star-icon ard-star-half\"></div>\r\n    <div class=\"ard-star-icon ard-star-unselected\"></div>\r\n</div>" }]
         }], propDecorators: { wrapperClasses: [{
@@ -6171,11 +6171,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumStarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarModule, declarations: [ArdiumStarComponent], imports: [CommonModule], exports: [ArdiumStarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarModule, declarations: [ArdiumStarComponent], imports: [CommonModule], exports: [ArdiumStarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumStarComponent],
@@ -6208,8 +6208,8 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
             return;
         this.toggleSelected();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: { wrapperClasses: "wrapperClasses", clickStrategy: "clickStrategy", color: "color" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: { wrapperClasses: "wrapperClasses", clickStrategy: "clickStrategy", color: "color" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
@@ -6217,7 +6217,7 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
             },
         ], usesInheritance: true, ngImport: i0, template: "<button #focusableElement\r\n    class=\"ard-star-button\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n    (click)=\"onClick()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <ard-star [fill]=\"starFillState\" [color]=\"color\"></ard-star>\r\n</button>", styles: [".ard-star-button{border:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "fill", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-star-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -6235,11 +6235,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumStarButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarButtonModule, declarations: [ArdiumStarButtonComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarButtonModule, imports: [CommonModule, ArdiumStarModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarButtonModule, declarations: [ArdiumStarButtonComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarButtonModule, imports: [CommonModule, ArdiumStarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumStarButtonComponent],
@@ -6292,10 +6292,10 @@ class ArdiumStarDisplayComponent {
                 this.setStarArrayFromNumber(this.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumStarDisplayComponent, selector: "ard-star-display", inputs: { wrapperClasses: "wrapperClasses", color: "color", max: "max", value: "value" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ard-star-display\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n>\r\n    <ard-star\r\n        *ngFor=\"let fillMode of starArray\"\r\n        [fill]=\"fillMode\"\r\n        [color]=\"color\"\r\n    ></ard-star>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "fill", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumStarDisplayComponent, selector: "ard-star-display", inputs: { wrapperClasses: "wrapperClasses", color: "color", max: "max", value: "value" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ard-star-display\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n>\r\n    <ard-star\r\n        *ngFor=\"let fillMode of starArray\"\r\n        [fill]=\"fillMode\"\r\n        [color]=\"color\"\r\n    ></ard-star>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "fill", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-star-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-star-display\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n>\r\n    <ard-star\r\n        *ngFor=\"let fillMode of starArray\"\r\n        [fill]=\"fillMode\"\r\n        [color]=\"color\"\r\n    ></ard-star>\r\n</div>" }]
         }], propDecorators: { wrapperClasses: [{
@@ -6309,11 +6309,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumStarDisplayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarDisplayModule, declarations: [ArdiumStarDisplayComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarDisplayModule, imports: [CommonModule, ArdiumStarModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarDisplayModule, declarations: [ArdiumStarDisplayComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarDisplayModule, imports: [CommonModule, ArdiumStarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarDisplayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarDisplayModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumStarDisplayComponent],
@@ -6494,8 +6494,8 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
     _onTabPress(event) {
         this.focusStarButtonByIndex(this.max - 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumStarInputComponent, selector: "ard-star-input", inputs: { wrapperClasses: "wrapperClasses", color: "color", value: "value", max: "max" }, outputs: { changeEvent: "change", highlightEvent: "highlight", valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyPress($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumStarInputComponent, selector: "ard-star-input", inputs: { wrapperClasses: "wrapperClasses", color: "color", value: "value", max: "max" }, outputs: { changeEvent: "change", highlightEvent: "highlight", valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyPress($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumStarInputComponent),
@@ -6503,7 +6503,7 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
             },
         ], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ard-star-input\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class]=\"wrapperClasses\"\r\n    (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n    <ard-star-button\r\n        *ngFor=\"let object of starArray; let index = index\"\r\n        #starButton\r\n        [class.ard-star-not-in-value]=\"!(object.isInValue)\"\r\n        [color]=\"object.isInValue ? color : 'none'\"\r\n        clickStrategy=\"none\"\r\n        [selected]=\"object.filled\"\r\n        (click)=\"onStarClick(index)\"\r\n        (focus)=\"onStarButtonFocus(index)\"\r\n        (blur)=\"onStarButtonBlur()\"\r\n        (mouseenter)=\"onStarHighlight(index)\"\r\n        [tabIndex]=\"tabIndex\"\r\n    ></ard-star-button>\r\n</div>", styles: [".ard-star-input{width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-star-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -6537,11 +6537,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumStarInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarInputModule, declarations: [ArdiumStarInputComponent], imports: [CommonModule, ArdiumStarButtonModule], exports: [ArdiumStarInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarInputModule, imports: [CommonModule, ArdiumStarButtonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarInputModule, declarations: [ArdiumStarInputComponent], imports: [CommonModule, ArdiumStarButtonModule], exports: [ArdiumStarInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarInputModule, imports: [CommonModule, ArdiumStarButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStarInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStarInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumStarInputComponent],
@@ -6666,8 +6666,8 @@ class ArdiumStateboxComponent extends _NgModelComponentBase {
             '--ard-on-custom-color': this.currState.colorOnCustomColor ?? '#fff',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStateboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumStateboxComponent, selector: "ard-statebox", inputs: { states: "states", manualStateHandling: "manualStateHandling", wrapperClasses: "wrapperClasses", state: "state" }, outputs: { changeEvent: "change", clickEvent: "click", stateChange: "stateChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStateboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumStateboxComponent, selector: "ard-statebox", inputs: { states: "states", manualStateHandling: "manualStateHandling", wrapperClasses: "wrapperClasses", state: "state" }, outputs: { changeEvent: "change", clickEvent: "click", stateChange: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
@@ -6675,7 +6675,7 @@ class ArdiumStateboxComponent extends _NgModelComponentBase {
             },
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\r\n    class=\"ard-statebox\"\r\n    [ngClass]=\"ngClasses\"\r\n    [tabindex]=\"tabIndex\"\r\n    [class]=\"wrapperClasses\"\r\n    (click)=\"onClick($event)\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    [style]=\"ngStyle\"\r\n>\r\n    <div class=\"ard-hitbox\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-statebox-frame\" *ngIf=\"currState.keepFrame\"></div>\r\n    <div class=\"ard-statebox-icon\" *ngIf=\"currState.displayAsIcon\">{{ currState.display }}</div>\r\n    <div class=\"ard-statebox-character\" *ngIf=\"!currState.displayAsIcon\">{{ currState.display }}</div>\r\n</button>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStateboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStateboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-statebox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -6703,11 +6703,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumStateboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStateboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStateboxModule, declarations: [ArdiumStateboxComponent], imports: [CommonModule], exports: [ArdiumStateboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStateboxModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStateboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStateboxModule, declarations: [ArdiumStateboxComponent], imports: [CommonModule], exports: [ArdiumStateboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStateboxModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumStateboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumStateboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumStateboxComponent],
@@ -6974,10 +6974,10 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
     _highlightAll(event) {
         this.itemStorage.highlightAllItems();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _SelectableListComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _SelectableListComponentBase, inputs: { valueFrom: "valueFrom", labelFrom: "labelFrom", disabledFrom: "disabledFrom", items: "items", invertDisabled: "invertDisabled", maxSelectedItems: "maxSelectedItems", value: "value" }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", removeEvent: "remove" }, host: { listeners: { "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-touched": "this.touched" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _SelectableListComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _SelectableListComponentBase, inputs: { valueFrom: "valueFrom", labelFrom: "labelFrom", disabledFrom: "disabledFrom", items: "items", invertDisabled: "invertDisabled", maxSelectedItems: "maxSelectedItems", value: "value" }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", removeEvent: "remove" }, host: { listeners: { "mousemove": "onMouseMove()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-touched": "this.touched" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _SelectableListComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _SelectableListComponentBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { valueFrom: [{
                 type: Input
@@ -7019,10 +7019,10 @@ class ArdSegmentOptionTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSegmentOptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdSegmentOptionTemplateDirective, selector: "ng-template[ard-segm-option-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSegmentOptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdSegmentOptionTemplateDirective, selector: "ng-template[ard-segm-option-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdSegmentOptionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdSegmentOptionTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ard-segm-option-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -7155,10 +7155,10 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
         super.onBlur(event);
         this.itemStorage.unhighlightAll();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSegmentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { appearance: "appearance", variant: "variant", color: "color", align: "align", iconBased: "iconBased", compact: "compact", multiselectable: "multiselectable", requireValue: "requireValue", autoFocus: "autoFocus", uniformWidths: "uniformWidths", itemsPerRow: "itemsPerRow" }, host: { properties: { "attr.multiple": "this.multiselectable", "class.ard-multiselect": "this.multiselectable", "class.ard-require-value": "this.requireValue" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-segment-container\"\r\n    [class.ard-disabled]=\"disabled\"\r\n    [ariaDisabled]=\"disabled\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\r\n    [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n    [attr.tabindex]=\"tabIndex\"\r\n    #focusableElement\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n>\r\n    <div class=\"ard-segment-row\"\r\n        *ngFor=\"let row of itemRows\"\r\n        [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n        [class.ard-segment-row-uniform]=\"uniformWidths || itemsPerRow < items.length\"\r\n        [style]=\"{'--ard-_segment-row-items': itemsInActualRow}\"\r\n    >\r\n        <button *ngFor=\"let option of row.options\"\r\n            class=\"ard-segment-option\"\r\n            tabindex=\"-1\"\r\n            [class.ard-option-disabled]=\"option.disabled || isItemLimitReached && !option.selected\"\r\n            [class.ard-option-selected]=\"option.selected\"\r\n            [class.ard-option-highlighted]=\"option.highlighted\"\r\n            [ariaSelected]=\"option.selected\"\r\n            (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n            (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n            (click)=\"onItemClick(option, $event)\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-button-content\">\r\n                <span class=\"ard-option-label\">\r\n                    <ng-template #defaultOptionTemplate>\r\n                        {{option.label}}\r\n                    </ng-template>\r\n\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"optionTemplate || defaultOptionTemplate\"\r\n                        [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n                    ></ng-template>\r\n                </span>\r\n            </div>\r\n        </button>\r\n    </div>\r\n</div>", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSegmentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { appearance: "appearance", variant: "variant", color: "color", align: "align", iconBased: "iconBased", compact: "compact", multiselectable: "multiselectable", requireValue: "requireValue", autoFocus: "autoFocus", uniformWidths: "uniformWidths", itemsPerRow: "itemsPerRow" }, host: { properties: { "attr.multiple": "this.multiselectable", "class.ard-multiselect": "this.multiselectable", "class.ard-require-value": "this.requireValue" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-segment-container\"\r\n    [class.ard-disabled]=\"disabled\"\r\n    [ariaDisabled]=\"disabled\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\r\n    [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n    [attr.tabindex]=\"tabIndex\"\r\n    #focusableElement\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n>\r\n    <div class=\"ard-segment-row\"\r\n        *ngFor=\"let row of itemRows\"\r\n        [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n        [class.ard-segment-row-uniform]=\"uniformWidths || itemsPerRow < items.length\"\r\n        [style]=\"{'--ard-_segment-row-items': itemsInActualRow}\"\r\n    >\r\n        <button *ngFor=\"let option of row.options\"\r\n            class=\"ard-segment-option\"\r\n            tabindex=\"-1\"\r\n            [class.ard-option-disabled]=\"option.disabled || isItemLimitReached && !option.selected\"\r\n            [class.ard-option-selected]=\"option.selected\"\r\n            [class.ard-option-highlighted]=\"option.highlighted\"\r\n            [ariaSelected]=\"option.selected\"\r\n            (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n            (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n            (click)=\"onItemClick(option, $event)\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-button-content\">\r\n                <span class=\"ard-option-label\">\r\n                    <ng-template #defaultOptionTemplate>\r\n                        {{option.label}}\r\n                    </ng-template>\r\n\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"optionTemplate || defaultOptionTemplate\"\r\n                        [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n                    ></ng-template>\r\n                </span>\r\n            </div>\r\n        </button>\r\n    </div>\r\n</div>", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-segment-container\"\r\n    [class.ard-disabled]=\"disabled\"\r\n    [ariaDisabled]=\"disabled\"\r\n    [ngClass]=\"ngClasses\"\r\n    [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\r\n    [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n    [attr.tabindex]=\"tabIndex\"\r\n    #focusableElement\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n>\r\n    <div class=\"ard-segment-row\"\r\n        *ngFor=\"let row of itemRows\"\r\n        [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n        [class.ard-segment-row-uniform]=\"uniformWidths || itemsPerRow < items.length\"\r\n        [style]=\"{'--ard-_segment-row-items': itemsInActualRow}\"\r\n    >\r\n        <button *ngFor=\"let option of row.options\"\r\n            class=\"ard-segment-option\"\r\n            tabindex=\"-1\"\r\n            [class.ard-option-disabled]=\"option.disabled || isItemLimitReached && !option.selected\"\r\n            [class.ard-option-selected]=\"option.selected\"\r\n            [class.ard-option-highlighted]=\"option.highlighted\"\r\n            [ariaSelected]=\"option.selected\"\r\n            (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n            (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n            (click)=\"onItemClick(option, $event)\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <div class=\"ard-button-content\">\r\n                <span class=\"ard-option-label\">\r\n                    <ng-template #defaultOptionTemplate>\r\n                        {{option.label}}\r\n                    </ng-template>\r\n\r\n                    <ng-template\r\n                        [ngTemplateOutlet]=\"optionTemplate || defaultOptionTemplate\"\r\n                        [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n                    ></ng-template>\r\n                </span>\r\n            </div>\r\n        </button>\r\n    </div>\r\n</div>", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
         }], propDecorators: { appearance: [{
@@ -7198,11 +7198,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumSegmentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSegmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSegmentModule, declarations: [ArdiumSegmentComponent, ArdSegmentOptionTemplateDirective], imports: [CommonModule], exports: [ArdiumSegmentComponent, ArdSegmentOptionTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSegmentModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSegmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSegmentModule, declarations: [ArdiumSegmentComponent, ArdSegmentOptionTemplateDirective], imports: [CommonModule], exports: [ArdiumSegmentComponent, ArdSegmentOptionTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSegmentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSegmentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSegmentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumSegmentComponent, ArdSegmentOptionTemplateDirective],
@@ -7217,10 +7217,10 @@ class ArdiumIconPipe {
         value = value.replace(/[ -]/g, '_');
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconPipe, name: "icon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconPipe, name: "icon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'icon',
@@ -7284,10 +7284,10 @@ class ArdiumIconComponent {
         if (!this.icon && !this.contentWrapper.nativeElement.innerText)
             console.warn(`Using <ard-icon> without specifying the [icon] field.`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumIconComponent, selector: "ard-icon", inputs: { ariaLabel: "ariaLabel", icon: "icon", filled: "filled", weight: "weight", grade: "grade", opticalSize: "opticalSize" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<span class=\"ard-icon material-symbols-outlined\"\r\n    [attr.aria-hidden]=\"ariaLabel != undefined\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [style]=\"fontVariationSettings\"\r\n>\r\n    {{ icon ?? contentWrapper.innerText | icon }}\r\n</span>\r\n\r\n\r\n<div #contentWrapper class=\"ard-icon-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"], dependencies: [{ kind: "pipe", type: ArdiumIconPipe, name: "icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumIconComponent, selector: "ard-icon", inputs: { ariaLabel: "ariaLabel", icon: "icon", filled: "filled", weight: "weight", grade: "grade", opticalSize: "opticalSize" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<span class=\"ard-icon material-symbols-outlined\"\r\n    [attr.aria-hidden]=\"ariaLabel != undefined\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [style]=\"fontVariationSettings\"\r\n>\r\n    {{ icon ?? contentWrapper.innerText | icon }}\r\n</span>\r\n\r\n\r\n<div #contentWrapper class=\"ard-icon-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"], dependencies: [{ kind: "pipe", type: ArdiumIconPipe, name: "icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"ard-icon material-symbols-outlined\"\r\n    [attr.aria-hidden]=\"ariaLabel != undefined\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [style]=\"fontVariationSettings\"\r\n>\r\n    {{ icon ?? contentWrapper.innerText | icon }}\r\n</span>\r\n\r\n\r\n<div #contentWrapper class=\"ard-icon-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"] }]
         }], propDecorators: { ariaLabel: [{
@@ -7308,11 +7308,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconModule, declarations: [ArdiumIconComponent, ArdiumIconPipe], imports: [CommonModule], exports: [ArdiumIconComponent, ArdiumIconPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconModule, declarations: [ArdiumIconComponent, ArdiumIconPipe], imports: [CommonModule], exports: [ArdiumIconComponent, ArdiumIconPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumIconComponent, ArdiumIconPipe],
@@ -7356,10 +7356,10 @@ class ArdiumColorDisplayComponent {
         if (!this._color)
             console.warn(`Using <ard-color-display> without specifying the [color] field.`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumColorDisplayComponent, selector: "ard-color-display", inputs: { ariaLabel: "ariaLabel", withLabel: "withLabel", appearance: "appearance", color: "color" }, ngImport: i0, template: "<div class=\"ard-color-display-wrapper\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-color-display\"\r\n        [title]=\"color\"\r\n        [style]=\"{ background: color }\"\r\n    ></div>\r\n    <span class=\"ard-color-display-label\" *ngIf=\"withLabel\">{{ color }}</span>\r\n</div>", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumColorDisplayComponent, selector: "ard-color-display", inputs: { ariaLabel: "ariaLabel", withLabel: "withLabel", appearance: "appearance", color: "color" }, ngImport: i0, template: "<div class=\"ard-color-display-wrapper\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-color-display\"\r\n        [title]=\"color\"\r\n        [style]=\"{ background: color }\"\r\n    ></div>\r\n    <span class=\"ard-color-display-label\" *ngIf=\"withLabel\">{{ color }}</span>\r\n</div>", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-color-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-color-display-wrapper\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-color-display\"\r\n        [title]=\"color\"\r\n        [style]=\"{ background: color }\"\r\n    ></div>\r\n    <span class=\"ard-color-display-label\" *ngIf=\"withLabel\">{{ color }}</span>\r\n</div>", styles: [".ard-color-display-wrapper{display:flex}.ard-color-display-wrapper .ard-color-content-wrapper{display:none}ard-color-display{display:inline-block}\n"] }]
         }], propDecorators: { ariaLabel: [{
@@ -7373,11 +7373,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumColorDisplayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorDisplayModule, declarations: [ArdiumColorDisplayComponent], imports: [CommonModule], exports: [ArdiumColorDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorDisplayModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorDisplayModule, declarations: [ArdiumColorDisplayComponent], imports: [CommonModule], exports: [ArdiumColorDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorDisplayModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorDisplayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorDisplayModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumColorDisplayComponent],
@@ -7390,10 +7390,10 @@ class ArdColorPickerShadeIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerShadeIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorPickerShadeIndicatorTemplateDirective, selector: "ard-color-picker > ng-template[ard-shade-indicator-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerShadeIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorPickerShadeIndicatorTemplateDirective, selector: "ard-color-picker > ng-template[ard-shade-indicator-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerShadeIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerShadeIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-picker > ng-template[ard-shade-indicator-tmp]',
@@ -7403,10 +7403,10 @@ class ArdColorPickerHueIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerHueIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorPickerHueIndicatorTemplateDirective, selector: "ard-color-picker > ng-template[ard-hue-indicator-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerHueIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorPickerHueIndicatorTemplateDirective, selector: "ard-color-picker > ng-template[ard-hue-indicator-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerHueIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerHueIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-picker > ng-template[ard-hue-indicator-tmp]',
@@ -7416,10 +7416,10 @@ class ArdColorPickerOpacityIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerOpacityIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorPickerOpacityIndicatorTemplateDirective, selector: "ard-color-picker > ng-template[ard-opacity-indicator-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerOpacityIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorPickerOpacityIndicatorTemplateDirective, selector: "ard-color-picker > ng-template[ard-opacity-indicator-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerOpacityIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerOpacityIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-picker > ng-template[ard-opacity-indicator-tmp]',
@@ -7429,10 +7429,10 @@ class ArdColorPickerColorReferenceTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerColorReferenceTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorPickerColorReferenceTemplateDirective, selector: "ard-color-picker > ng-template[ard-color-reference-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerColorReferenceTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorPickerColorReferenceTemplateDirective, selector: "ard-color-picker > ng-template[ard-color-reference-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorPickerColorReferenceTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorPickerColorReferenceTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-picker > ng-template[ard-color-reference-tmp]',
@@ -7835,10 +7835,10 @@ class ArdiumColorPickerComponent extends _NgModelComponentBase {
         const newValClamped = Math.max(0, Math.min(1, newVal));
         this.value = Color(v).alpha(newValClamped);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumColorPickerComponent, selector: "ard-color-picker", inputs: { withOpacity: "withOpacity", referenceColor: "referenceColor", wrapperClasses: "wrapperClasses", variant: "variant", vertical: "vertical", value: "value", colorHue: "colorHue", colorSaturation: "colorSaturation", colorValue: "colorValue", colorOpacity: "colorOpacity", shadeIndicatorTemplate: "shadeIndicatorTemplate", hueIndicatorTemplate: "hueIndicatorTemplate", opacityIndicatorTemplate: "opacityIndicatorTemplate", colorReferenceTemplate: "colorReferenceTemplate" }, outputs: { valueChange: "valueChange", colorHueChange: "colorHueChange", colorSaturationChange: "colorSaturationChange", colorValueChange: "colorValueChange", colorOpacityChange: "colorOpacityChange" }, host: { listeners: { "document:pointerup": "onDocumentMouseUp()", "document:touchend": "onDocumentMouseUp()", "document:pointermove": "onDocumentMousemove($event)", "document:touchmove": "onDocumentMousemove($event)" } }, queries: [{ propertyName: "shadeIndicatorTemplateChild", first: true, predicate: ArdColorPickerShadeIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "hueIndicatorTemplateChild", first: true, predicate: ArdColorPickerHueIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "opacityIndicatorTemplateChild", first: true, predicate: ArdColorPickerOpacityIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "colorReferenceTemplateChild", first: true, predicate: ArdColorPickerColorReferenceTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "shadeMapEl", first: true, predicate: ["shadeMap"], descendants: true, read: ElementRef }, { propertyName: "hueMapEl", first: true, predicate: ["hueMap"], descendants: true, read: ElementRef }, { propertyName: "opacityMapEl", first: true, predicate: ["opacityMap"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-color-picker\" [ngClass]=\"ngClasses\" (keydown)=\"onKeydown($event)\">\r\n    <div class=\"ard-color-picker-click-areas\"\r\n        [style]=\"{\r\n            '--ard-color-picker-current-hue': currentShadeMapColor,\r\n            '--ard-color-picker-current-color': currentOpacityMapColor\r\n        }\"\r\n    >\r\n        <div #shadeMap\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-shade-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'shade'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onShadeAreaMouseDown($event)\"\r\n            (pointerdown)=\"onShadeAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-shade-indicator-container\" [style]=\"getShadeIndicatorPosition()\">\r\n                <ng-template #defaultShadeIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-shade-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"shadeIndicatorTemplate || shadeIndicatorTemplateChild || defaultShadeIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n        <div #hueMap\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-hue-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'hue'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onHueAreaMouseDown($event)\"\r\n            (pointerdown)=\"onHueAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-hue-indicator-container\" [style]=\"getHueIndicatorPosition()\">\r\n                <ng-template #defaultHueIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-hue-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"hueIndicatorTemplate || hueIndicatorTemplateChild || defaultHueIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n        <div #opacityMap\r\n            *ngIf=\"withOpacity\"\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-opacity-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'opacity'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onOpacityAreaMouseDown($event)\"\r\n            (pointerdown)=\"onOpacityAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-opacity-indicator-container\" [style]=\"getOpacityIndicatorPosition()\">\r\n                <ng-template #defaultOpacityIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-opacity-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"opacityIndicatorTemplate || opacityIndicatorTemplateChild || defaultOpacityIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-color-picker-input-panel\">\r\n        <div class=\"ard-color-picker-inputs\">\r\n            <div class=\"ard-color-picker-input-type\">\r\n                <ard-select\r\n                    compact\r\n                    clearable=\"false\"\r\n                    appearance=\"transparent\"\r\n                    [items]=\"inputTypes\"\r\n                    [value]=\"currentInputType\"\r\n                    (valueChange)=\"onCurrentInputTypeChange($event)\"\r\n                ></ard-select>\r\n            </div>\r\n            <div class=\"ard-color-picker-reference-container\">\r\n                <ng-template #defaultColorReferenceTemplate let-col let-refcol=\"referenceColor\">\r\n                    <div class=\"ard-color-picker-reference\">\r\n                        <div class=\"ard-color-picker-reference-reference\" [style]=\"{ background: refcol.rgb().toString() }\"></div>\r\n                        <div class=\"ard-color-picker-reference-current\" [style]=\"{ background: col.rgb().toString() }\"></div>\r\n                    </div>\r\n                </ng-template>\r\n            \r\n                <ng-template [ngTemplateOutlet]=\"colorReferenceTemplate || colorReferenceTemplateChild || defaultColorReferenceTemplate\"\r\n                    [ngTemplateOutletContext]=\"getColorReferenceContext()\"\r\n                ></ng-template>\r\n            </div>\r\n            <div class=\"ard-color-picker-inputs-container\"\r\n                [ngClass]=\"{\r\n                    'ard-mode-hex': currentInputType == 'HEX',\r\n                    'ard-mode-triple': currentInputType != 'HEX',\r\n                    'ard-mode-opacity': withOpacity\r\n                }\"\r\n            >\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"currentInputType == 'HEX' ? hexInput : tripleInput\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #hexInput>\r\n    <ard-hex-input\r\n        class=\"ard-color-picker-hex-input\"\r\n        maxDigits=\"6\"\r\n        [value]=\"hexInputValue\"\r\n        (valueChange)=\"onHexInputChange($event)\"\r\n    ></ard-hex-input>\r\n    <ard-number-input\r\n        *ngIf=\"withOpacity\"\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData4.max\"\r\n        [value]=\"tripleInputData4.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 4)\"\r\n    ></ard-number-input>\r\n</ng-template>\r\n\r\n<ng-template #tripleInput>    \r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData1.max\"\r\n        [value]=\"tripleInputData1.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 1)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData2.max\"\r\n        [value]=\"tripleInputData2.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 2)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData3.max\"\r\n        [value]=\"tripleInputData3.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 3)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        *ngIf=\"withOpacity\"\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData4.max\"\r\n        [value]=\"tripleInputData4.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 4)\"\r\n    ></ard-number-input>\r\n</ng-template>", styles: [".ard-color-picker{display:flex;flex-direction:column}.ard-color-picker-click-areas{display:flex;flex-direction:row}.ard-color-picker-click-areas.ard-vertical .ard-color-picker-click-areas{flex-direction:column}.ard-color-picker-shade-map,.ard-color-picker-hue-map,.ard-color-picker-opacity-map{position:relative}.ard-color-picker-shade-map{background:linear-gradient(to bottom,transparent,rgb(0,0,0)),linear-gradient(to right,transparent,var(--ard-color-picker-current-hue)),#fff}.ard-color-picker-hue-map{background:linear-gradient(to bottom,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.ard-color-picker-opacity-map{--ard-color-picker-opacity-checkerboard-color: #ccc;--ard-color-picker-opacity-checkerboard-size: 10px;background-image:linear-gradient(45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%);background-size:var(--ard-color-picker-opacity-checkerboard-size) var(--ard-color-picker-opacity-checkerboard-size);background-position:0 0,0 calc(var(--ard-color-picker-opacity-checkerboard-size) / 2),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2) calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1) 0}.ard-color-picker-opacity-map:before{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ard-color-picker-current-color),transparent)}.ard-color-picker-shade-indicator-container,.ard-color-picker-hue-indicator-container,.ard-color-picker-opacity-indicator-container{position:absolute;transform:translate(-50%,-50%)}.ard-color-picker-reference{--ard-color-picker-opacity-checkerboard-color: #ccc;--ard-color-picker-opacity-checkerboard-size: 10px;background-image:linear-gradient(45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%);background-size:var(--ard-color-picker-opacity-checkerboard-size) var(--ard-color-picker-opacity-checkerboard-size);background-position:0 0,0 calc(var(--ard-color-picker-opacity-checkerboard-size) / 2),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2) calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1) 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "dropdownPosition", "clearButtonTitle", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "isLoading", "inputAttrs", "htmlId", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdowonAppearance", "dropdowonVariant", "groupItems", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumNumberInputComponent, selector: "ard-number-input", inputs: ["inputId", "placeholder", "appearance", "variant", "alignText", "compact", "inputAttrs", "value", "min", "max", "allowFloat", "allowQuickChange", "stepSize"], outputs: ["valueChange", "input", "change", "clear", "quickChange"] }, { kind: "component", type: ArdiumHexInputComponent, selector: "ard-hex-input", inputs: ["inputId", "placeholder", "appearance", "variant", "compact", "case", "maxDigits", "hideHash", "clearable", "clearButtonTitle", "inputAttrs", "value"], outputs: ["valueChange", "input", "change", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumColorPickerComponent, selector: "ard-color-picker", inputs: { withOpacity: "withOpacity", referenceColor: "referenceColor", wrapperClasses: "wrapperClasses", variant: "variant", vertical: "vertical", value: "value", colorHue: "colorHue", colorSaturation: "colorSaturation", colorValue: "colorValue", colorOpacity: "colorOpacity", shadeIndicatorTemplate: "shadeIndicatorTemplate", hueIndicatorTemplate: "hueIndicatorTemplate", opacityIndicatorTemplate: "opacityIndicatorTemplate", colorReferenceTemplate: "colorReferenceTemplate" }, outputs: { valueChange: "valueChange", colorHueChange: "colorHueChange", colorSaturationChange: "colorSaturationChange", colorValueChange: "colorValueChange", colorOpacityChange: "colorOpacityChange" }, host: { listeners: { "document:pointerup": "onDocumentMouseUp()", "document:touchend": "onDocumentMouseUp()", "document:pointermove": "onDocumentMousemove($event)", "document:touchmove": "onDocumentMousemove($event)" } }, queries: [{ propertyName: "shadeIndicatorTemplateChild", first: true, predicate: ArdColorPickerShadeIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "hueIndicatorTemplateChild", first: true, predicate: ArdColorPickerHueIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "opacityIndicatorTemplateChild", first: true, predicate: ArdColorPickerOpacityIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "colorReferenceTemplateChild", first: true, predicate: ArdColorPickerColorReferenceTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "shadeMapEl", first: true, predicate: ["shadeMap"], descendants: true, read: ElementRef }, { propertyName: "hueMapEl", first: true, predicate: ["hueMap"], descendants: true, read: ElementRef }, { propertyName: "opacityMapEl", first: true, predicate: ["opacityMap"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-color-picker\" [ngClass]=\"ngClasses\" (keydown)=\"onKeydown($event)\">\r\n    <div class=\"ard-color-picker-click-areas\"\r\n        [style]=\"{\r\n            '--ard-color-picker-current-hue': currentShadeMapColor,\r\n            '--ard-color-picker-current-color': currentOpacityMapColor\r\n        }\"\r\n    >\r\n        <div #shadeMap\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-shade-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'shade'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onShadeAreaMouseDown($event)\"\r\n            (pointerdown)=\"onShadeAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-shade-indicator-container\" [style]=\"getShadeIndicatorPosition()\">\r\n                <ng-template #defaultShadeIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-shade-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"shadeIndicatorTemplate || shadeIndicatorTemplateChild || defaultShadeIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n        <div #hueMap\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-hue-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'hue'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onHueAreaMouseDown($event)\"\r\n            (pointerdown)=\"onHueAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-hue-indicator-container\" [style]=\"getHueIndicatorPosition()\">\r\n                <ng-template #defaultHueIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-hue-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"hueIndicatorTemplate || hueIndicatorTemplateChild || defaultHueIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n        <div #opacityMap\r\n            *ngIf=\"withOpacity\"\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-opacity-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'opacity'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onOpacityAreaMouseDown($event)\"\r\n            (pointerdown)=\"onOpacityAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-opacity-indicator-container\" [style]=\"getOpacityIndicatorPosition()\">\r\n                <ng-template #defaultOpacityIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-opacity-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"opacityIndicatorTemplate || opacityIndicatorTemplateChild || defaultOpacityIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-color-picker-input-panel\">\r\n        <div class=\"ard-color-picker-inputs\">\r\n            <div class=\"ard-color-picker-input-type\">\r\n                <ard-select\r\n                    compact\r\n                    clearable=\"false\"\r\n                    appearance=\"transparent\"\r\n                    [items]=\"inputTypes\"\r\n                    [value]=\"currentInputType\"\r\n                    (valueChange)=\"onCurrentInputTypeChange($event)\"\r\n                ></ard-select>\r\n            </div>\r\n            <div class=\"ard-color-picker-reference-container\">\r\n                <ng-template #defaultColorReferenceTemplate let-col let-refcol=\"referenceColor\">\r\n                    <div class=\"ard-color-picker-reference\">\r\n                        <div class=\"ard-color-picker-reference-reference\" [style]=\"{ background: refcol.rgb().toString() }\"></div>\r\n                        <div class=\"ard-color-picker-reference-current\" [style]=\"{ background: col.rgb().toString() }\"></div>\r\n                    </div>\r\n                </ng-template>\r\n            \r\n                <ng-template [ngTemplateOutlet]=\"colorReferenceTemplate || colorReferenceTemplateChild || defaultColorReferenceTemplate\"\r\n                    [ngTemplateOutletContext]=\"getColorReferenceContext()\"\r\n                ></ng-template>\r\n            </div>\r\n            <div class=\"ard-color-picker-inputs-container\"\r\n                [ngClass]=\"{\r\n                    'ard-mode-hex': currentInputType == 'HEX',\r\n                    'ard-mode-triple': currentInputType != 'HEX',\r\n                    'ard-mode-opacity': withOpacity\r\n                }\"\r\n            >\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"currentInputType == 'HEX' ? hexInput : tripleInput\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #hexInput>\r\n    <ard-hex-input\r\n        class=\"ard-color-picker-hex-input\"\r\n        maxDigits=\"6\"\r\n        [value]=\"hexInputValue\"\r\n        (valueChange)=\"onHexInputChange($event)\"\r\n    ></ard-hex-input>\r\n    <ard-number-input\r\n        *ngIf=\"withOpacity\"\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData4.max\"\r\n        [value]=\"tripleInputData4.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 4)\"\r\n    ></ard-number-input>\r\n</ng-template>\r\n\r\n<ng-template #tripleInput>    \r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData1.max\"\r\n        [value]=\"tripleInputData1.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 1)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData2.max\"\r\n        [value]=\"tripleInputData2.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 2)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData3.max\"\r\n        [value]=\"tripleInputData3.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 3)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        *ngIf=\"withOpacity\"\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData4.max\"\r\n        [value]=\"tripleInputData4.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 4)\"\r\n    ></ard-number-input>\r\n</ng-template>", styles: [".ard-color-picker{display:flex;flex-direction:column}.ard-color-picker-click-areas{display:flex;flex-direction:row}.ard-color-picker-click-areas.ard-vertical .ard-color-picker-click-areas{flex-direction:column}.ard-color-picker-shade-map,.ard-color-picker-hue-map,.ard-color-picker-opacity-map{position:relative}.ard-color-picker-shade-map{background:linear-gradient(to bottom,transparent,rgb(0,0,0)),linear-gradient(to right,transparent,var(--ard-color-picker-current-hue)),#fff}.ard-color-picker-hue-map{background:linear-gradient(to bottom,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.ard-color-picker-opacity-map{--ard-color-picker-opacity-checkerboard-color: #ccc;--ard-color-picker-opacity-checkerboard-size: 10px;background-image:linear-gradient(45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%);background-size:var(--ard-color-picker-opacity-checkerboard-size) var(--ard-color-picker-opacity-checkerboard-size);background-position:0 0,0 calc(var(--ard-color-picker-opacity-checkerboard-size) / 2),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2) calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1) 0}.ard-color-picker-opacity-map:before{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ard-color-picker-current-color),transparent)}.ard-color-picker-shade-indicator-container,.ard-color-picker-hue-indicator-container,.ard-color-picker-opacity-indicator-container{position:absolute;transform:translate(-50%,-50%)}.ard-color-picker-reference{--ard-color-picker-opacity-checkerboard-color: #ccc;--ard-color-picker-opacity-checkerboard-size: 10px;background-image:linear-gradient(45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%);background-size:var(--ard-color-picker-opacity-checkerboard-size) var(--ard-color-picker-opacity-checkerboard-size);background-position:0 0,0 calc(var(--ard-color-picker-opacity-checkerboard-size) / 2),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2) calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1) 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "dropdownPosition", "clearButtonTitle", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "isLoading", "inputAttrs", "htmlId", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdowonAppearance", "dropdowonVariant", "groupItems", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumNumberInputComponent, selector: "ard-number-input", inputs: ["inputId", "placeholder", "appearance", "variant", "alignText", "compact", "inputAttrs", "value", "min", "max", "allowFloat", "allowQuickChange", "stepSize"], outputs: ["valueChange", "input", "change", "clear", "quickChange"] }, { kind: "component", type: ArdiumHexInputComponent, selector: "ard-hex-input", inputs: ["inputId", "placeholder", "appearance", "variant", "compact", "case", "maxDigits", "hideHash", "clearable", "clearButtonTitle", "inputAttrs", "value"], outputs: ["valueChange", "input", "change", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-color-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-color-picker\" [ngClass]=\"ngClasses\" (keydown)=\"onKeydown($event)\">\r\n    <div class=\"ard-color-picker-click-areas\"\r\n        [style]=\"{\r\n            '--ard-color-picker-current-hue': currentShadeMapColor,\r\n            '--ard-color-picker-current-color': currentOpacityMapColor\r\n        }\"\r\n    >\r\n        <div #shadeMap\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-shade-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'shade'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onShadeAreaMouseDown($event)\"\r\n            (pointerdown)=\"onShadeAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-shade-indicator-container\" [style]=\"getShadeIndicatorPosition()\">\r\n                <ng-template #defaultShadeIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-shade-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"shadeIndicatorTemplate || shadeIndicatorTemplateChild || defaultShadeIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n        <div #hueMap\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-hue-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'hue'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onHueAreaMouseDown($event)\"\r\n            (pointerdown)=\"onHueAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-hue-indicator-container\" [style]=\"getHueIndicatorPosition()\">\r\n                <ng-template #defaultHueIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-hue-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"hueIndicatorTemplate || hueIndicatorTemplateChild || defaultHueIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n        <div #opacityMap\r\n            *ngIf=\"withOpacity\"\r\n            [tabIndex]=\"tabIndex\"\r\n            class=\"ard-color-picker-opacity-map\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"focusedArea = 'opacity'\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"focusedArea = null\"\r\n            (mousedown)=\"onOpacityAreaMouseDown($event)\"\r\n            (pointerdown)=\"onOpacityAreaMouseDown($event)\"\r\n        >\r\n            <div class=\"ard-color-picker-opacity-indicator-container\" [style]=\"getOpacityIndicatorPosition()\">\r\n                <ng-template #defaultOpacityIndicatorTemplate>\r\n                    <div class=\"ard-color-picker-opacity-indicator\"></div>\r\n                </ng-template>\r\n                \r\n                <ng-template [ngTemplateOutlet]=\"opacityIndicatorTemplate || opacityIndicatorTemplateChild || defaultOpacityIndicatorTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIndicatorContext()\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"ard-color-picker-input-panel\">\r\n        <div class=\"ard-color-picker-inputs\">\r\n            <div class=\"ard-color-picker-input-type\">\r\n                <ard-select\r\n                    compact\r\n                    clearable=\"false\"\r\n                    appearance=\"transparent\"\r\n                    [items]=\"inputTypes\"\r\n                    [value]=\"currentInputType\"\r\n                    (valueChange)=\"onCurrentInputTypeChange($event)\"\r\n                ></ard-select>\r\n            </div>\r\n            <div class=\"ard-color-picker-reference-container\">\r\n                <ng-template #defaultColorReferenceTemplate let-col let-refcol=\"referenceColor\">\r\n                    <div class=\"ard-color-picker-reference\">\r\n                        <div class=\"ard-color-picker-reference-reference\" [style]=\"{ background: refcol.rgb().toString() }\"></div>\r\n                        <div class=\"ard-color-picker-reference-current\" [style]=\"{ background: col.rgb().toString() }\"></div>\r\n                    </div>\r\n                </ng-template>\r\n            \r\n                <ng-template [ngTemplateOutlet]=\"colorReferenceTemplate || colorReferenceTemplateChild || defaultColorReferenceTemplate\"\r\n                    [ngTemplateOutletContext]=\"getColorReferenceContext()\"\r\n                ></ng-template>\r\n            </div>\r\n            <div class=\"ard-color-picker-inputs-container\"\r\n                [ngClass]=\"{\r\n                    'ard-mode-hex': currentInputType == 'HEX',\r\n                    'ard-mode-triple': currentInputType != 'HEX',\r\n                    'ard-mode-opacity': withOpacity\r\n                }\"\r\n            >\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"currentInputType == 'HEX' ? hexInput : tripleInput\"\r\n                ></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #hexInput>\r\n    <ard-hex-input\r\n        class=\"ard-color-picker-hex-input\"\r\n        maxDigits=\"6\"\r\n        [value]=\"hexInputValue\"\r\n        (valueChange)=\"onHexInputChange($event)\"\r\n    ></ard-hex-input>\r\n    <ard-number-input\r\n        *ngIf=\"withOpacity\"\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData4.max\"\r\n        [value]=\"tripleInputData4.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 4)\"\r\n    ></ard-number-input>\r\n</ng-template>\r\n\r\n<ng-template #tripleInput>    \r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData1.max\"\r\n        [value]=\"tripleInputData1.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 1)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData2.max\"\r\n        [value]=\"tripleInputData2.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 2)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData3.max\"\r\n        [value]=\"tripleInputData3.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 3)\"\r\n    ></ard-number-input>\r\n    <ard-number-input\r\n        *ngIf=\"withOpacity\"\r\n        allowQuickChange=\"false\"\r\n        [max]=\"tripleInputData4.max\"\r\n        [value]=\"tripleInputData4.value\"\r\n        (valueChange)=\"onTripleInputChange($event, 4)\"\r\n    ></ard-number-input>\r\n</ng-template>", styles: [".ard-color-picker{display:flex;flex-direction:column}.ard-color-picker-click-areas{display:flex;flex-direction:row}.ard-color-picker-click-areas.ard-vertical .ard-color-picker-click-areas{flex-direction:column}.ard-color-picker-shade-map,.ard-color-picker-hue-map,.ard-color-picker-opacity-map{position:relative}.ard-color-picker-shade-map{background:linear-gradient(to bottom,transparent,rgb(0,0,0)),linear-gradient(to right,transparent,var(--ard-color-picker-current-hue)),#fff}.ard-color-picker-hue-map{background:linear-gradient(to bottom,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.ard-color-picker-opacity-map{--ard-color-picker-opacity-checkerboard-color: #ccc;--ard-color-picker-opacity-checkerboard-size: 10px;background-image:linear-gradient(45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%);background-size:var(--ard-color-picker-opacity-checkerboard-size) var(--ard-color-picker-opacity-checkerboard-size);background-position:0 0,0 calc(var(--ard-color-picker-opacity-checkerboard-size) / 2),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2) calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1) 0}.ard-color-picker-opacity-map:before{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ard-color-picker-current-color),transparent)}.ard-color-picker-shade-indicator-container,.ard-color-picker-hue-indicator-container,.ard-color-picker-opacity-indicator-container{position:absolute;transform:translate(-50%,-50%)}.ard-color-picker-reference{--ard-color-picker-opacity-checkerboard-color: #ccc;--ard-color-picker-opacity-checkerboard-size: 10px;background-image:linear-gradient(45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--ard-color-picker-opacity-checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--ard-color-picker-opacity-checkerboard-color) 75%);background-size:var(--ard-color-picker-opacity-checkerboard-size) var(--ard-color-picker-opacity-checkerboard-size);background-position:0 0,0 calc(var(--ard-color-picker-opacity-checkerboard-size) / 2),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2) calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1),calc(var(--ard-color-picker-opacity-checkerboard-size) / 2 * -1) 0}\n"] }]
         }], propDecorators: { withOpacity: [{
@@ -7923,8 +7923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumColorPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorPickerModule, declarations: [ArdiumColorPickerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorPickerModule, declarations: [ArdiumColorPickerComponent,
             ArdColorPickerHueIndicatorTemplateDirective,
             ArdColorPickerShadeIndicatorTemplateDirective,
             ArdColorPickerColorReferenceTemplateDirective,
@@ -7933,9 +7933,9 @@ class ArdiumColorPickerModule {
             ArdColorPickerShadeIndicatorTemplateDirective,
             ArdColorPickerColorReferenceTemplateDirective,
             ArdColorPickerOpacityIndicatorTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorPickerModule, imports: [CommonModule, ArdiumSelectModule, ArdiumOptionModule, ArdiumNumberInputModule, ArdiumHexInputModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorPickerModule, imports: [CommonModule, ArdiumSelectModule, ArdiumOptionModule, ArdiumNumberInputModule, ArdiumHexInputModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -7957,10 +7957,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
         }] });
 
 class ArdiumCardHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardHeaderComponent, selector: "ard-card-header", ngImport: i0, template: "<ng-content select=\"[ard-card-avatar]\"></ng-content>\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]\"></ng-content>\r\n</div>\r\n<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardHeaderComponent, selector: "ard-card-header", ngImport: i0, template: "<ng-content select=\"[ard-card-avatar]\"></ng-content>\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]\"></ng-content>\r\n</div>\r\n<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-card-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[ard-card-avatar]\"></ng-content>\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]\"></ng-content>\r\n</div>\r\n<ng-content></ng-content>" }]
         }] });
@@ -7968,10 +7968,10 @@ class ArdiumCardSubtitleDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-subtitle');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardSubtitleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardSubtitleDirective, selector: "ard-card-subtitle, [ard-card-subtitle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardSubtitleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardSubtitleDirective, selector: "ard-card-subtitle, [ard-card-subtitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardSubtitleDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-card-subtitle, [ard-card-subtitle]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
@@ -7979,10 +7979,10 @@ class ArdiumCardTitleDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-title');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardTitleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardTitleDirective, selector: "ard-card-title, [ard-card-title]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardTitleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardTitleDirective, selector: "ard-card-title, [ard-card-title]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardTitleDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-card-title, [ard-card-title]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
@@ -7990,10 +7990,10 @@ class ArdiumCardAvatarDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-avatar');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardAvatarDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardAvatarDirective, selector: "[ard-card-avatar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardAvatarDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardAvatarDirective, selector: "[ard-card-avatar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardAvatarDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ard-card-avatar]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
@@ -8001,10 +8001,10 @@ class ArdiumCardContentDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-content');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardContentDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardContentDirective, selector: "ard-card-content, [ard-card-content]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardContentDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardContentDirective, selector: "ard-card-content, [ard-card-content]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-card-content, [ard-card-content]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
@@ -8012,10 +8012,10 @@ class ArdiumCardImageDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-image');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardImageDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardImageDirective, selector: "[ard-card-image]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardImageDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardImageDirective, selector: "[ard-card-image]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardImageDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ard-card-image]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
@@ -8026,10 +8026,10 @@ class ArdiumCardActionButtonsDirective {
     get alignClass() {
         return `ard-card-action-buttons ard-align-${this.align}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardActionButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardActionButtonsDirective, selector: "ard-card-action-buttons, [ard-card-action-buttons]", inputs: { align: "align" }, host: { properties: { "class": "this.alignClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardActionButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardActionButtonsDirective, selector: "ard-card-action-buttons, [ard-card-action-buttons]", inputs: { align: "align" }, host: { properties: { "class": "this.alignClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardActionButtonsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardActionButtonsDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-card-action-buttons, [ard-card-action-buttons]' }]
         }], propDecorators: { align: [{
@@ -8042,10 +8042,10 @@ class ArdiumCardFooterDirective {
     constructor(renderer, hostElement) {
         renderer.addClass(hostElement.nativeElement, 'ard-card-footer');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardFooterDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardFooterDirective, selector: "ard-card-footer, [ard-card-footer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardFooterDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardFooterDirective, selector: "ard-card-footer, [ard-card-footer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardFooterDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-card-footer, [ard-card-footer]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }] });
@@ -8068,10 +8068,10 @@ class ArdiumCardDirective {
     get ngClasses() {
         return ['ard-card', `ard-appearance-${this.appearance}`, `ard-variant-${this.variant}`].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardDirective, selector: "[ard-card]", inputs: { appearance: "appearance", variant: "variant" }, host: { properties: { "class": "this.ngClasses" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardDirective, selector: "[ard-card]", inputs: { appearance: "appearance", variant: "variant" }, host: { properties: { "class": "this.ngClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ard-card]' }]
         }], propDecorators: { appearance: [{
@@ -8083,10 +8083,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 args: ['class']
             }] } });
 class ArdiumCardComponent extends ArdiumCardDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCardComponent, selector: "ard-card", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCardComponent, selector: "ard-card", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ard-card',
@@ -8097,8 +8097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
         }] });
 
 class ArdiumCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardModule, declarations: [ArdiumCardComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardModule, declarations: [ArdiumCardComponent,
             ArdiumCardDirective,
             ArdiumCardHeaderComponent,
             ArdiumCardTitleDirective,
@@ -8117,9 +8117,9 @@ class ArdiumCardModule {
             ArdiumCardImageDirective,
             ArdiumCardActionButtonsDirective,
             ArdiumCardFooterDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -8154,10 +8154,10 @@ class ArdColorInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputPlaceholderTemplateDirective, selector: "ard-color-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputPlaceholderTemplateDirective, selector: "ard-color-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-color-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -8165,10 +8165,10 @@ class ArdColorInputPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputPrefixTemplateDirective, selector: "ard-color-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputPrefixTemplateDirective, selector: "ard-color-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-color-input > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -8176,10 +8176,10 @@ class ArdColorInputSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputSuffixTemplateDirective, selector: "ard-color-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputSuffixTemplateDirective, selector: "ard-color-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-color-input > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -8188,10 +8188,10 @@ class ArdColorInputShadeIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputShadeIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputShadeIndicatorTemplateDirective, selector: "ard-color-input > ng-template[ard-shade-indicator-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputShadeIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputShadeIndicatorTemplateDirective, selector: "ard-color-input > ng-template[ard-shade-indicator-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputShadeIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputShadeIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-input > ng-template[ard-shade-indicator-tmp]',
@@ -8201,10 +8201,10 @@ class ArdColorInputHueIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputHueIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputHueIndicatorTemplateDirective, selector: "ard-color-input > ng-template[ard-hue-indicator-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputHueIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputHueIndicatorTemplateDirective, selector: "ard-color-input > ng-template[ard-hue-indicator-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputHueIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputHueIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-color-input > ng-template[ard-hue-indicator-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -8212,10 +8212,10 @@ class ArdColorInputOpacityIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputOpacityIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputOpacityIndicatorTemplateDirective, selector: "ard-color-input > ng-template[ard-opacity-indicator-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputOpacityIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputOpacityIndicatorTemplateDirective, selector: "ard-color-input > ng-template[ard-opacity-indicator-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputOpacityIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputOpacityIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-input > ng-template[ard-opacity-indicator-tmp]',
@@ -8225,10 +8225,10 @@ class ArdColorInputColorReferenceTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputColorReferenceTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputColorReferenceTemplateDirective, selector: "ard-color-input > ng-template[ard-color-reference-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputColorReferenceTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputColorReferenceTemplateDirective, selector: "ard-color-input > ng-template[ard-color-reference-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputColorReferenceTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputColorReferenceTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-input > ng-template[ard-color-reference-tmp]',
@@ -8239,10 +8239,10 @@ class ArdColorInputActionButtonsTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputActionButtonsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdColorInputActionButtonsTemplateDirective, selector: "ard-color-picker > ng-template[ard-action-buttons-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputActionButtonsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdColorInputActionButtonsTemplateDirective, selector: "ard-color-picker > ng-template[ard-action-buttons-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdColorInputActionButtonsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdColorInputActionButtonsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-color-picker > ng-template[ard-action-buttons-tmp]',
@@ -8542,8 +8542,8 @@ class ArdiumColorInputComponent extends _NgModelComponentBase {
             input.setAttribute(key, String(attributes[key]));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumColorInputComponent, selector: "ard-color-input", inputs: { inputId: "inputId", placeholder: "placeholder", appearance: "appearance", variant: "variant", compact: "compact", case: "case", withActionButtons: "withActionButtons", clearable: "clearable", clearButtonTitle: "clearButtonTitle", inputAttrs: "inputAttrs", value: "value", overlayAppearance: "overlayAppearance", overlayVariant: "overlayVariant" }, outputs: { valueChange: "valueChange", changeEvent: "change", clearEvent: "clear", openEvent: "open", closeEvent: "close" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumColorInputComponent, selector: "ard-color-input", inputs: { inputId: "inputId", placeholder: "placeholder", appearance: "appearance", variant: "variant", compact: "compact", case: "case", withActionButtons: "withActionButtons", clearable: "clearable", clearButtonTitle: "clearButtonTitle", inputAttrs: "inputAttrs", value: "value", overlayAppearance: "overlayAppearance", overlayVariant: "overlayVariant" }, outputs: { valueChange: "valueChange", changeEvent: "change", clearEvent: "clear", openEvent: "open", closeEvent: "close" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumColorInputComponent),
@@ -8551,7 +8551,7 @@ class ArdiumColorInputComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdColorInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdColorInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: ArdColorInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "shadeIndicatorTemplate", first: true, predicate: ArdColorInputShadeIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "hueIndicatorTemplate", first: true, predicate: ArdColorInputHueIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "opacityIndicatorTemplate", first: true, predicate: ArdColorInputOpacityIndicatorTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "colorReferenceTemplate", first: true, predicate: ArdColorInputColorReferenceTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "actionButtonsTemplate", first: true, predicate: ArdColorInputActionButtonsTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "overlayHost", first: true, predicate: ["overlayHost"], descendants: true, read: ElementRef }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n    #overlayHost\r\n>\r\n    <div class=\"ard-color-input\"\r\n        [class.ard-has-value]=\"value\"\r\n        (mouseup)=\"onMouseup()\"\r\n    >\r\n        <div class=\"ard-input-container\">\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate>\r\n                    <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n            </ng-container>\r\n\r\n            <input #textInput\r\n                [attr.id]=\"inputId\"\r\n                tabindex=\"-1\"\r\n                readonly\r\n            >\r\n        </div>\r\n\r\n        <ard-_clear-button\r\n            *ngIf=\"shouldShowClearButton\"\r\n            [title]=\"clearButtonTitle\"\r\n            (mouseup)=\"onClearButtonClick($event)\"\r\n        ></ard-_clear-button>\r\n\r\n        <button\r\n            class=\"ard-color-display-button\"\r\n            #focusableElement\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n            (copy)=\"onCopy($event)\"\r\n        >\r\n            <ard-color-display [color]=\"value\"></ard-color-display>\r\n        </button>\r\n    </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #overlayTemplate>\r\n    <ard-card\r\n        class=\"ard-overlay-card ard-color-input-overlay-card\"\r\n        [appearance]=\"overlayAppearance\"\r\n        [variant]=\"overlayVariant\"\r\n        (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    >\r\n        <ard-color-picker\r\n            [value]=\"value\"\r\n            (valueChange)=\"onColorPickerChange($event)\"\r\n            [hueIndicatorTemplate]=\"hueIndicatorTemplate\"\r\n            [shadeIndicatorTemplate]=\"shadeIndicatorTemplate\"\r\n            [opacityIndicatorTemplate]=\"opacityIndicatorTemplate\"\r\n            [colorReferenceTemplate]=\"colorReferenceTemplate\"\r\n        ></ard-color-picker>\r\n        <ard-card-action-buttons *ngIf=\"withActionButtons\">\r\n            <ng-template #defaultActionButtonsTemplate let-applyFn=\"apply\" let-cancelFn=\"cancel\">\r\n                <ard-button appearance=\"transparent\" [variant]=\"actionButtonVariant\" (click)=\"cancelFn()\">Cancel</ard-button>\r\n                <ard-button appearance=\"raised-strong\" [variant]=\"actionButtonVariant\" (click)=\"applyFn()\">Apply</ard-button>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n                [ngTemplateOutlet]=\"actionButtonsTemplate ?? defaultActionButtonsTemplate\"\r\n                [ngTemplateOutletContext]=\"getActionButtonsContext()\"\r\n            />\r\n        </ard-card-action-buttons>\r\n    </ard-card>\r\n</ng-template>", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }, { kind: "component", type: ArdiumColorPickerComponent, selector: "ard-color-picker", inputs: ["withOpacity", "referenceColor", "wrapperClasses", "variant", "vertical", "value", "colorHue", "colorSaturation", "colorValue", "colorOpacity", "shadeIndicatorTemplate", "hueIndicatorTemplate", "opacityIndicatorTemplate", "colorReferenceTemplate"], outputs: ["valueChange", "colorHueChange", "colorSaturationChange", "colorValueChange", "colorOpacityChange"] }, { kind: "component", type: ArdiumColorDisplayComponent, selector: "ard-color-display", inputs: ["ariaLabel", "withLabel", "appearance", "color"] }, { kind: "component", type: ArdiumCardComponent, selector: "ard-card" }, { kind: "directive", type: ArdiumCardActionButtonsDirective, selector: "ard-card-action-buttons, [ard-card-action-buttons]", inputs: ["align"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "alignIcon", "vertical", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-color-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -8648,8 +8648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumColorInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorInputModule, declarations: [ArdiumColorInputComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorInputModule, declarations: [ArdiumColorInputComponent,
             ArdColorInputPlaceholderTemplateDirective,
             ArdColorInputPrefixTemplateDirective,
             ArdColorInputSuffixTemplateDirective,
@@ -8673,7 +8673,7 @@ class ArdiumColorInputModule {
             ArdColorInputOpacityIndicatorTemplateDirective,
             ArdColorInputColorReferenceTemplateDirective,
             ArdColorInputActionButtonsTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorInputModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorInputModule, imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             _ClearButtonModule,
             ArdiumColorPickerModule,
@@ -8682,7 +8682,7 @@ class ArdiumColorInputModule {
             ArdiumClickOutsideEventModule,
             ArdiumButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumColorInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumColorInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -8724,10 +8724,10 @@ class ArdDaysViewHeaderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDaysViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdDaysViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-header-tmp], ard-datepicker > ng-template[ard-header-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDaysViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdDaysViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-header-tmp], ard-datepicker > ng-template[ard-header-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDaysViewHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDaysViewHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-header-tmp], ard-datepicker > ng-template[ard-header-tmp]',
@@ -8737,10 +8737,10 @@ class ArdYearsViewHeaderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdYearsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdYearsViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-year-picker-header-tmp], ard-datepicker > ng-template[ard-year-picker-header-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdYearsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdYearsViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-year-picker-header-tmp], ard-datepicker > ng-template[ard-year-picker-header-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdYearsViewHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdYearsViewHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-year-picker-header-tmp], ard-datepicker > ng-template[ard-year-picker-header-tmp]',
@@ -8750,10 +8750,10 @@ class ArdMonthsViewHeaderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdMonthsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdMonthsViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-month-picker-header-tmp], ard-datepicker > ng-template[ard-month-picker-header-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdMonthsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdMonthsViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-month-picker-header-tmp], ard-datepicker > ng-template[ard-month-picker-header-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdMonthsViewHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdMonthsViewHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-month-picker-header-tmp], ard-datepicker > ng-template[ard-month-picker-header-tmp]',
@@ -8763,10 +8763,10 @@ class ArdWeekdayTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdWeekdayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdWeekdayTemplateDirective, selector: "ard-calendar > ng-template[ard-weekday-tmp], ard-datepicker > ng-template[ard-weekday-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdWeekdayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdWeekdayTemplateDirective, selector: "ard-calendar > ng-template[ard-weekday-tmp], ard-datepicker > ng-template[ard-weekday-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdWeekdayTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdWeekdayTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-weekday-tmp], ard-datepicker > ng-template[ard-weekday-tmp]',
@@ -8776,10 +8776,10 @@ class ArdFloatingMonthTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFloatingMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdFloatingMonthTemplateDirective, selector: "ard-calendar > ng-template[ard-floating-month-tmp], ard-datepicker > ng-template[ard-floating-month-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFloatingMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdFloatingMonthTemplateDirective, selector: "ard-calendar > ng-template[ard-floating-month-tmp], ard-datepicker > ng-template[ard-floating-month-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFloatingMonthTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFloatingMonthTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-floating-month-tmp], ard-datepicker > ng-template[ard-floating-month-tmp]',
@@ -8789,10 +8789,10 @@ class ArdYearTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdYearTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdYearTemplateDirective, selector: "ard-calendar > ng-template[ard-year-tmp], ard-datepicker > ng-template[ard-year-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdYearTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdYearTemplateDirective, selector: "ard-calendar > ng-template[ard-year-tmp], ard-datepicker > ng-template[ard-year-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdYearTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdYearTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-year-tmp], ard-datepicker > ng-template[ard-year-tmp]',
@@ -8802,10 +8802,10 @@ class ArdMonthTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdMonthTemplateDirective, selector: "ard-calendar > ng-template[ard-month-tmp], ard-datepicker > ng-template[ard-month-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdMonthTemplateDirective, selector: "ard-calendar > ng-template[ard-month-tmp], ard-datepicker > ng-template[ard-month-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdMonthTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdMonthTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-month-tmp], ard-datepicker > ng-template[ard-month-tmp]',
@@ -8815,10 +8815,10 @@ class ArdDayTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdDayTemplateDirective, selector: "ard-calendar > ng-template[ard-day-tmp], ard-datepicker > ng-template[ard-day-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdDayTemplateDirective, selector: "ard-calendar > ng-template[ard-day-tmp], ard-datepicker > ng-template[ard-day-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDayTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDayTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-calendar > ng-template[ard-day-tmp], ard-datepicker > ng-template[ard-day-tmp]',
@@ -9765,8 +9765,8 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: { color: "color", activeYear: "activeYear", activeMonth: "activeMonth", selected: "selected", firstWeekday: "firstWeekday", nointeract: "nointeract", staticHeight: "staticHeight", startView: "startView" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", selectedChange: "selectedChange", activeYearChange: "activeYearChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange", changeEvent: "change" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: { color: "color", activeYear: "activeYear", activeMonth: "activeMonth", selected: "selected", firstWeekday: "firstWeekday", nointeract: "nointeract", staticHeight: "staticHeight", startView: "startView" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", selectedChange: "selectedChange", activeYearChange: "activeYearChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange", changeEvent: "change" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCalendarComponent),
@@ -9774,7 +9774,7 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdYearsViewHeaderTemplateDirective, descendants: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdMonthsViewHeaderTemplateDirective, descendants: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdDaysViewHeaderTemplateDirective, descendants: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdWeekdayTemplateDirective, descendants: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdFloatingMonthTemplateDirective, descendants: true }, { propertyName: "yearTemplate", first: true, predicate: ArdYearTemplateDirective, descendants: true }, { propertyName: "monthTemplate", first: true, predicate: ArdMonthTemplateDirective, descendants: true }, { propertyName: "dayTemplate", first: true, predicate: ArdDayTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ard-calendar\" [ngClass]=\"ngClasses\">\r\n    <ng-template [ngTemplateOutlet]=\"activeView == 'days' ? daysView : activeView == 'months' ? monthsView : yearsView\"/>\r\n</div>\r\n\r\n<ng-template #yearsView>\r\n    <div class=\"ard-calendar-header-container\">\r\n        <ng-template #defaultYearsViewHeaderTemplate let-currRange let-nextPage=\"nextPage\" let-prevPage=\"prevPage\" let-openDaysView=\"openDaysView\">\r\n            <div class=\"ard-calendar-days-view-header\">\r\n                <ard-button\r\n                    class=\"ard-calendar-header-button\"\r\n                    appearance=\"transparent\"\r\n                    color=\"none\"\r\n                    [tabIndex]=\"tabIndex\"\r\n                    (click)=\"openDaysView()\"\r\n                >\r\n                    {{ currRange.low | date: 'YYYY' }}\r\n                    &mdash;\r\n                    {{ currRange.high | date: 'YYYY' }}\r\n                    <div class=\"ard-dropdown-arrow\"></div>\r\n                </ard-button>\r\n                <div class=\"ard-calendar-arrows\">\r\n                    <ard-icon-button size=\"small\" appearance=\"transparent\" color=\"none\" (click)=\"prevPage()\" [tabIndex]=\"tabIndex\">\r\n                        <ard-icon>chevron_left</ard-icon>\r\n                    </ard-icon-button>\r\n                    <ard-icon-button size=\"small\" appearance=\"transparent\" color=\"none\" (click)=\"nextPage()\" [tabIndex]=\"tabIndex\">\r\n                        <ard-icon>chevron_right</ard-icon>\r\n                    </ard-icon-button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"yearsViewHeaderTemplate || defaultYearsViewHeaderTemplate\"\r\n            [ngTemplateOutletContext]=\"getYearsViewHeaderContext()\"\r\n        />\r\n    </div>\r\n    <div class=\"ard-calendar-main-container\">\r\n        <div #focusableElement\r\n            class=\"ard-calendar-simple-grid\"\r\n            [tabindex]=\"tabIndex\"\r\n            [ariaLabel]=\"currentAriaLabel\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"onYearGridFocus()\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"onYearGridBlur()\"\r\n            (click)=\"onYearGridClick()\"\r\n            (keydown)=\"onMainGridKeydown($event)\"\r\n            role=\"grid\"\r\n        >\r\n            <ng-container *ngFor=\"let year of getYearsArray()\">\r\n                <div class=\"ard-calendar-entry\"\r\n                    [class.ard-calendar-entry-highlighted]=\"highlightedYear == year || activeYear == year\"\r\n                    [class.ard-calendar-entry-selected]=\"isYearSelected(year)\"\r\n                    [class.ard-calendar-today]=\"isYearToday(year)\"\r\n                    (click)=\"onCalendarYearClick(year)\"\r\n                    (mousemove)=\"$event.stopPropagation()\"\r\n                    (mouseover)=\"onCalendarYearMouseover(year)\"\r\n                    role=\"gridcell\"\r\n                >\r\n                    <button class=\"ard-calendar-entry-button\" tabindex=\"-1\">\r\n                        <div class=\"ard-focus-overlay\"></div>\r\n                        <div class=\"ard-button-content\">\r\n                            <ng-template #defaultYearTemplate let-year>\r\n                                {{ year }}\r\n                            </ng-template>\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"yearTemplate || defaultYearTemplate\"\r\n                                [ngTemplateOutletContext]=\"getYearContext(year)\"\r\n                            ></ng-template>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #monthsView>\r\n    <div class=\"ard-calendar-header-container\">\r\n        <ng-template #defaultMonthsViewHeaderTemplate let-year let-nextPage=\"nextPage\" let-prevPage=\"prevPage\" let-openDaysView=\"openDaysView\">\r\n            <div class=\"ard-calendar-days-view-header\">\r\n                <ard-button\r\n                    class=\"ard-calendar-header-button\"\r\n                    appearance=\"transparent\"\r\n                    [color]=\"color\"\r\n                    [tabIndex]=\"tabIndex\"\r\n                    (click)=\"openDaysView()\"\r\n                >\r\n                    {{ year }}\r\n                    <div class=\"ard-dropdown-arrow\"></div>\r\n                </ard-button>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"monthsViewHeaderTemplate || defaultMonthsViewHeaderTemplate\"\r\n            [ngTemplateOutletContext]=\"getMonthsViewHeaderContext()\"\r\n        />\r\n    </div>\r\n    <div class=\"ard-calendar-main-container\">\r\n        <div #focusableElement\r\n            class=\"ard-calendar-simple-grid\"\r\n            [tabindex]=\"tabIndex\"\r\n            [ariaLabel]=\"currentAriaLabel\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"onMonthGridFocus()\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"onMonthGridBlur()\"\r\n            (click)=\"onMonthGridClick()\"\r\n            (keydown)=\"onMainGridKeydown($event)\"\r\n            role=\"grid\"\r\n        >\r\n            <ng-container *ngFor=\"let month of monthsArray\">\r\n                <div class=\"ard-calendar-entry\"\r\n                    [class.ard-calendar-entry-highlighted]=\"highlightedMonth == month || activeMonth == month\"\r\n                    [class.ard-calendar-entry-selected]=\"isMonthSelected(month)\"\r\n                    [class.ard-calendar-today]=\"isMonthToday(month)\"\r\n                    (click)=\"onCalendarMonthClick(month)\"\r\n                    (mousemove)=\"$event.stopPropagation()\"\r\n                    (mouseover)=\"onCalendarMonthMouseover(month)\"\r\n                    role=\"gridcell\"\r\n                >\r\n                    <button class=\"ard-calendar-entry-button\" tabindex=\"-1\">\r\n                        <div class=\"ard-focus-overlay\"></div>\r\n                        <div class=\"ard-button-content\">\r\n                            <ng-template #defaultMonthTemplate let-month>\r\n                                {{ month | date: \"MMM\" | uppercase }}\r\n                            </ng-template>\r\n                            <ng-template\r\n                                [ngTemplateOutlet]=\"monthTemplate || defaultMonthTemplate\"\r\n                                [ngTemplateOutletContext]=\"getMonthContext(month)\"\r\n                            ></ng-template>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #daysView>\r\n    <div class=\"ard-calendar-header-container\">\r\n        <ng-template #defaultDaysViewHeaderTemplate let-currDate let-nextMonth=\"nextMonth\" let-prevMonth=\"prevMonth\" let-openYearsView=\"openYearsView\">\r\n            <div class=\"ard-calendar-days-view-header\">\r\n                <ard-button\r\n                    class=\"ard-calendar-header-button\"\r\n                    appearance=\"transparent\"\r\n                    color=\"none\"\r\n                    [tabIndex]=\"tabIndex\"\r\n                    (click)=\"openYearsView()\"\r\n                >\r\n                    {{ currDate | date: 'MMM YYYY' | uppercase }}\r\n                    <div class=\"ard-dropdown-arrow\"></div>\r\n                </ard-button>\r\n                <div class=\"ard-calendar-arrows\">\r\n                    <ard-icon-button size=\"small\" appearance=\"transparent\" color=\"none\" (click)=\"prevMonth()\" [tabIndex]=\"tabIndex\">\r\n                        <ard-icon>chevron_left</ard-icon>\r\n                    </ard-icon-button>\r\n                    <ard-icon-button size=\"small\" appearance=\"transparent\" color=\"none\" (click)=\"nextMonth()\" [tabIndex]=\"tabIndex\">\r\n                        <ard-icon>chevron_right</ard-icon>\r\n                    </ard-icon-button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"daysViewHeaderTemplate || defaultDaysViewHeaderTemplate\"\r\n            [ngTemplateOutletContext]=\"getDaysViewHeaderContext()\"\r\n        />\r\n    </div>\r\n    <div class=\"ard-calendar-main-container\">\r\n        <div class=\"ard-calendar-day-labels ard-calendar-grid\">\r\n            <ng-template #defaultWeekdayTemplate let-date>\r\n                <div class=\"ard-calendar-weekday\">{{ date | date: 'EEEEE' }}</div>\r\n            </ng-template>\r\n            <ng-container *ngFor=\"let weekdayIndex of weekdayArray\">\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"weekdayTemplate || defaultWeekdayTemplate\"\r\n                    [ngTemplateOutletContext]=\"getWeekdayContext(weekdayIndex)\"\r\n                ></ng-template>\r\n            </ng-container>\r\n        </div>\r\n        <div #focusableElement\r\n            class=\"ard-calendar-main-grid ard-calendar-grid\"\r\n            [class.ard-reserve-top-row]=\"reserveTopRow\"\r\n            [tabindex]=\"tabIndex\"\r\n            [ariaLabel]=\"currentAriaLabel\"\r\n            (focus)=\"onFocus($event)\"\r\n            (focus)=\"onDayGridFocus()\"\r\n            (blur)=\"onBlur($event)\"\r\n            (blur)=\"onDayGridBlur()\"\r\n            (click)=\"onDayGridClick()\"\r\n            (keydown)=\"onMainGridKeydown($event)\"\r\n            role=\"grid\"\r\n        >\r\n            <div class=\"ard-calendar-floating-month\">\r\n                <ng-template #defaultFloatingMonthTemplate let-date>\r\n                    {{ date | date: 'LLL' | uppercase }}\r\n                </ng-template>\r\n\r\n                <ng-template\r\n                    [ngTemplateOutlet]=\"floatingMonthTemplate || defaultFloatingMonthTemplate\"\r\n                    [ngTemplateOutletContext]=\"getFloatingMonthContext()\"\r\n                ></ng-template>\r\n            </div>\r\n            <ng-container *ngFor=\"let week of calendarArray\">\r\n                <ng-container *ngFor=\"let day of week\">\r\n                    <div class=\"ard-calendar-entry\"\r\n                        [class.ard-calendar-entry-empty]=\"day == null\"\r\n                        [class.ard-calendar-entry-highlighted]=\"highlightedDay == day\"\r\n                        [class.ard-calendar-entry-selected]=\"isDaySelected(day)\"\r\n                        [class.ard-calendar-today]=\"isDayToday(day)\"\r\n                        (click)=\"onCalendarDayClick(day)\"\r\n                        (mousemove)=\"$event.stopPropagation()\"\r\n                        (mouseover)=\"onCalendarDayMouseover(day)\"\r\n                        role=\"gridcell\"\r\n                    >\r\n                        <button class=\"ard-calendar-entry-button\"\r\n                            *ngIf=\"day != null\"\r\n                            tabindex=\"-1\"\r\n                        >\r\n                            <div class=\"ard-focus-overlay\"></div>\r\n                            <div class=\"ard-button-content\">\r\n                                <ng-template #defaultDayTemplate let-day>\r\n                                    {{ day }}\r\n                                </ng-template>\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"dayTemplate || defaultDayTemplate\"\r\n                                    [ngTemplateOutletContext]=\"getDayContext(day)\"\r\n                                ></ng-template>\r\n                            </div>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<!-- <ng-container *ngIf=\"isLoading\">\r\n    <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-spinner\"></div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\r\n    </ng-template>\r\n</ng-container> -->", styles: [".ard-calendar{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "alignIcon", "vertical", "icon"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "color", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -9847,11 +9847,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCalendarModule, declarations: [ArdiumCalendarComponent], imports: [CommonModule, ArdiumButtonModule, ArdiumIconButtonModule, ArdiumIconModule], exports: [ArdiumCalendarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCalendarModule, imports: [CommonModule, ArdiumButtonModule, ArdiumIconButtonModule, ArdiumIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCalendarModule, declarations: [ArdiumCalendarComponent], imports: [CommonModule, ArdiumButtonModule, ArdiumIconButtonModule, ArdiumIconModule], exports: [ArdiumCalendarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCalendarModule, imports: [CommonModule, ArdiumButtonModule, ArdiumIconButtonModule, ArdiumIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumCalendarComponent],
@@ -9864,10 +9864,10 @@ class ArdiumKbdPipe {
     transform(value, useShort) {
         return keyToString(value, useShort);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdPipe, name: "kbd" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdPipe, name: "kbd" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbd',
@@ -9893,10 +9893,10 @@ class ArdiumKbdComponent {
     get ngClasses() {
         return [`ard-appearance-${this.appearance}`].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: { key: "key", full: "full", appearance: "appearance" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<kbd class=\"ard-kbd\" [ngClass]=\"ngClasses\">{{ key ?? contentWrapper.innerText | kbd: !full }}</kbd>\r\n\r\n<div #contentWrapper class=\"ard-kbd-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ArdiumKbdPipe, name: "kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: { key: "key", full: "full", appearance: "appearance" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<kbd class=\"ard-kbd\" [ngClass]=\"ngClasses\">{{ key ?? contentWrapper.innerText | kbd: !full }}</kbd>\r\n\r\n<div #contentWrapper class=\"ard-kbd-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ArdiumKbdPipe, name: "kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd class=\"ard-kbd\" [ngClass]=\"ngClasses\">{{ key ?? contentWrapper.innerText | kbd: !full }}</kbd>\r\n\r\n<div #contentWrapper class=\"ard-kbd-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".ard-kbd-content-wrapper{display:none}.ard-kbd{display:inline-block}\n"] }]
         }], propDecorators: { contentWrapper: [{
@@ -9911,11 +9911,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumKbdModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdModule, declarations: [ArdiumKbdComponent, ArdiumKbdPipe], imports: [CommonModule], exports: [ArdiumKbdComponent, ArdiumKbdPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdModule, declarations: [ArdiumKbdComponent, ArdiumKbdPipe], imports: [CommonModule], exports: [ArdiumKbdComponent, ArdiumKbdPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumKbdComponent, ArdiumKbdPipe],
@@ -9956,10 +9956,10 @@ class ArdiumKbdShortcutComponent {
     get ngClasses() {
         return [`ard-appearance-${this.appearance}`].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumKbdShortcutComponent, selector: "ard-kbd-shortcut", inputs: { keys: "keys", full: "full", appearance: "appearance" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"ard-kbd-shortcut\" [ngClass]=\"ngClasses\">\r\n    <ng-container *ngFor=\"let key of keys ?? contentWrapper.innerText.split(splitRegex); let i = index;\">\r\n        <span *ngIf=\"i != 0\">+</span>\r\n        <ard-kbd [appearance]=\"appearance\" [full]=\"full\" [key]=\"key\"></ard-kbd>\r\n    </ng-container>\r\n</div>\r\n\r\n<div #contentWrapper class=\"ard-kbd-shortcut-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".ard-kbd-shortcut-content-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: ["key", "full", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumKbdShortcutComponent, selector: "ard-kbd-shortcut", inputs: { keys: "keys", full: "full", appearance: "appearance" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"ard-kbd-shortcut\" [ngClass]=\"ngClasses\">\r\n    <ng-container *ngFor=\"let key of keys ?? contentWrapper.innerText.split(splitRegex); let i = index;\">\r\n        <span *ngIf=\"i != 0\">+</span>\r\n        <ard-kbd [appearance]=\"appearance\" [full]=\"full\" [key]=\"key\"></ard-kbd>\r\n    </ng-container>\r\n</div>\r\n\r\n<div #contentWrapper class=\"ard-kbd-shortcut-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".ard-kbd-shortcut-content-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArdiumKbdComponent, selector: "ard-kbd", inputs: ["key", "full", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdShortcutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdShortcutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-kbd-shortcut', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-kbd-shortcut\" [ngClass]=\"ngClasses\">\r\n    <ng-container *ngFor=\"let key of keys ?? contentWrapper.innerText.split(splitRegex); let i = index;\">\r\n        <span *ngIf=\"i != 0\">+</span>\r\n        <ard-kbd [appearance]=\"appearance\" [full]=\"full\" [key]=\"key\"></ard-kbd>\r\n    </ng-container>\r\n</div>\r\n\r\n<div #contentWrapper class=\"ard-kbd-shortcut-content-wrapper\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".ard-kbd-shortcut-content-wrapper{display:none}\n"] }]
         }], propDecorators: { contentWrapper: [{
@@ -9974,11 +9974,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumKbdShortcutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdShortcutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdShortcutModule, declarations: [ArdiumKbdShortcutComponent], imports: [CommonModule, ArdiumKbdModule], exports: [ArdiumKbdShortcutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdShortcutModule, imports: [CommonModule, ArdiumKbdModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdShortcutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdShortcutModule, declarations: [ArdiumKbdShortcutComponent], imports: [CommonModule, ArdiumKbdModule], exports: [ArdiumKbdShortcutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdShortcutModule, imports: [CommonModule, ArdiumKbdModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumKbdShortcutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumKbdShortcutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumKbdShortcutComponent],
@@ -9991,10 +9991,10 @@ class ArdProgressCircleValueTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdProgressCircleValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdProgressCircleValueTemplateDirective, selector: "ard-progress-circle > ng-template[ard-value-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdProgressCircleValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdProgressCircleValueTemplateDirective, selector: "ard-progress-circle > ng-template[ard-value-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdProgressCircleValueTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdProgressCircleValueTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-progress-circle > ng-template[ard-value-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -10069,10 +10069,10 @@ class ArdiumProgressCircleComponent {
             $implicit: percentValue,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumProgressCircleComponent, selector: "ard-progress-circle", inputs: { value: "value", max: "max", appearance: "appearance", variant: "variant", color: "color", hideValue: "hideValue", reverse: "reverse" }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdProgressCircleValueTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"ard-progress-circle\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-progress-circle-background\"></div>\r\n    <div class=\"ard-progress-circle-overlay\" [style]=\"fillPercentVariable\"></div>\r\n    <div class=\"ard-progress-circle-value\">\r\n        <ng-template #defaultValueTemplate let-value>\r\n            {{ value }}%\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"valueTemplate || defaultValueTemplate\"\r\n            [ngTemplateOutletContext]=\"getValueContext()\"\r\n        ></ng-template>\r\n    </div>\r\n</div>", styles: [".ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumProgressCircleComponent, selector: "ard-progress-circle", inputs: { value: "value", max: "max", appearance: "appearance", variant: "variant", color: "color", hideValue: "hideValue", reverse: "reverse" }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdProgressCircleValueTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"ard-progress-circle\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-progress-circle-background\"></div>\r\n    <div class=\"ard-progress-circle-overlay\" [style]=\"fillPercentVariable\"></div>\r\n    <div class=\"ard-progress-circle-value\">\r\n        <ng-template #defaultValueTemplate let-value>\r\n            {{ value }}%\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"valueTemplate || defaultValueTemplate\"\r\n            [ngTemplateOutletContext]=\"getValueContext()\"\r\n        ></ng-template>\r\n    </div>\r\n</div>", styles: [".ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressCircleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressCircleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-progress-circle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-progress-circle\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-progress-circle-background\"></div>\r\n    <div class=\"ard-progress-circle-overlay\" [style]=\"fillPercentVariable\"></div>\r\n    <div class=\"ard-progress-circle-value\">\r\n        <ng-template #defaultValueTemplate let-value>\r\n            {{ value }}%\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"valueTemplate || defaultValueTemplate\"\r\n            [ngTemplateOutletContext]=\"getValueContext()\"\r\n        ></ng-template>\r\n    </div>\r\n</div>", styles: [".ard-progress-circle{position:relative;aspect-ratio:1}.ard-progress-circle .ard-progress-circle-background,.ard-progress-circle .ard-progress-circle-overlay{position:absolute;border-radius:9999px;inset:0}.ard-progress-circle .ard-progress-circle-overlay{background-size:100% 100%;background-position:0px 0px;background-image:conic-gradient(from 0deg at 50% 50%,var(--ard-_progress-circle-fill-color) 0%,var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),transparent var(--ard-_progress-circle-fill-amount),transparent 100%)}.ard-progress-circle.ard-progress-circle-reversed .ard-progress-circle-overlay{background-image:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) var(--ard-_progress-circle-fill-amount),var(--ard-_progress-circle-fill-color) 100%)}.ard-progress-circle.ard-progress-circle-hide-value .ard-progress-circle-value{display:none}\n"] }]
         }], propDecorators: { value: [{
@@ -10097,11 +10097,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumProgressCircleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressCircleModule, declarations: [ArdiumProgressCircleComponent, ArdProgressCircleValueTemplateDirective], imports: [CommonModule], exports: [ArdiumProgressCircleComponent, ArdProgressCircleValueTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressCircleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressCircleModule, declarations: [ArdiumProgressCircleComponent, ArdProgressCircleValueTemplateDirective], imports: [CommonModule], exports: [ArdiumProgressCircleComponent, ArdProgressCircleValueTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressCircleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressCircleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressCircleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumProgressCircleComponent, ArdProgressCircleValueTemplateDirective],
@@ -10114,10 +10114,10 @@ class ArdProgressBarValueTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdProgressBarValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdProgressBarValueTemplateDirective, selector: "ard-progress-bar > ng-template[ard-value-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdProgressBarValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdProgressBarValueTemplateDirective, selector: "ard-progress-bar > ng-template[ard-value-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdProgressBarValueTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdProgressBarValueTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-progress-bar > ng-template[ard-value-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -10204,10 +10204,10 @@ class ArdiumProgressBarComponent {
             $implicit: this.value,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: { value: "value", bufferValue: "bufferValue", color: "color", variant: "variant", size: "size", mode: "mode", hideValue: "hideValue" }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdProgressBarValueTemplateDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ard-progress-bar\" role=\"progressbar\" [style]=\"cssVariables\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-progress-bar__background\"></div>\r\n    <div class=\"ard-progress-bar__overlay-buffer\"></div>\r\n    <div class=\"ard-progress-bar__overlay\"></div>\r\n    <div class=\"ard-progress-bar__value\">\r\n        <ng-template #defaultValueTemplate let-value>\r\n            {{ (value * 100) | number: '1.0-0' }}%\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"valueTemplate || defaultValueTemplate\"\r\n            [ngTemplateOutletContext]=\"getValueContext()\"\r\n        ></ng-template>\r\n    </div>\r\n</div>", styles: ["ard-progress-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: { value: "value", bufferValue: "bufferValue", color: "color", variant: "variant", size: "size", mode: "mode", hideValue: "hideValue" }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdProgressBarValueTemplateDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ard-progress-bar\" role=\"progressbar\" [style]=\"cssVariables\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-progress-bar__background\"></div>\r\n    <div class=\"ard-progress-bar__overlay-buffer\"></div>\r\n    <div class=\"ard-progress-bar__overlay\"></div>\r\n    <div class=\"ard-progress-bar__value\">\r\n        <ng-template #defaultValueTemplate let-value>\r\n            {{ (value * 100) | number: '1.0-0' }}%\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"valueTemplate || defaultValueTemplate\"\r\n            [ngTemplateOutletContext]=\"getValueContext()\"\r\n        ></ng-template>\r\n    </div>\r\n</div>", styles: ["ard-progress-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-progress-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-progress-bar\" role=\"progressbar\" [style]=\"cssVariables\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-progress-bar__background\"></div>\r\n    <div class=\"ard-progress-bar__overlay-buffer\"></div>\r\n    <div class=\"ard-progress-bar__overlay\"></div>\r\n    <div class=\"ard-progress-bar__value\">\r\n        <ng-template #defaultValueTemplate let-value>\r\n            {{ (value * 100) | number: '1.0-0' }}%\r\n        </ng-template>\r\n\r\n        <ng-template\r\n            [ngTemplateOutlet]=\"valueTemplate || defaultValueTemplate\"\r\n            [ngTemplateOutletContext]=\"getValueContext()\"\r\n        ></ng-template>\r\n    </div>\r\n</div>", styles: ["ard-progress-bar{display:block}.ard-progress-bar{position:relative}.ard-progress-bar .ard-progress-bar-background,.ard-progress-bar .ard-progress-bar-overlay,.ard-progress-bar .ard-progress-bar-overlay-secondary{position:absolute}\n"] }]
         }], propDecorators: { value: [{
@@ -10230,11 +10230,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressBarModule, declarations: [ArdiumProgressBarComponent, ArdProgressBarValueTemplateDirective], imports: [CommonModule], exports: [ArdiumProgressBarComponent, ArdProgressBarValueTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressBarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressBarModule, declarations: [ArdiumProgressBarComponent, ArdProgressBarValueTemplateDirective], imports: [CommonModule], exports: [ArdiumProgressBarComponent, ArdProgressBarValueTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumProgressBarComponent, ArdProgressBarValueTemplateDirective],
@@ -10253,10 +10253,10 @@ class ArdiumDividerComponent {
     set vertical(v) {
         this._vertical = coerceBooleanProperty(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumDividerComponent, selector: "ard-divider", inputs: { vertical: "vertical" }, host: { properties: { "class.ard-divider-vertical": "this.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumDividerComponent, selector: "ard-divider", inputs: { vertical: "vertical" }, host: { properties: { "class.ard-divider-vertical": "this.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: "17.0.7", ngImport: i0, type: ArdiumDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", 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: { vertical: [{
@@ -10267,11 +10267,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumDividerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDividerModule, declarations: [ArdiumDividerComponent], imports: [CommonModule], exports: [ArdiumDividerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDividerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDividerModule, declarations: [ArdiumDividerComponent], imports: [CommonModule], exports: [ArdiumDividerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDividerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDividerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumDividerComponent],
@@ -10284,10 +10284,10 @@ class ArdPasswordInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdPasswordInputPlaceholderTemplateDirective, selector: "ard-password-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdPasswordInputPlaceholderTemplateDirective, selector: "ard-password-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-password-input > ng-template[ard-placeholder-tmp]',
@@ -10297,10 +10297,10 @@ class ArdPasswordInputPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdPasswordInputPrefixTemplateDirective, selector: "ard-password-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdPasswordInputPrefixTemplateDirective, selector: "ard-password-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-password-input > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -10308,10 +10308,10 @@ class ArdPasswordInputSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdPasswordInputSuffixTemplateDirective, selector: "ard-password-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdPasswordInputSuffixTemplateDirective, selector: "ard-password-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-password-input > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -10319,10 +10319,10 @@ class ArdPasswordInputRevealButtonTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputRevealButtonTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdPasswordInputRevealButtonTemplateDirective, selector: "ard-password-input > ng-template[ard-reveal-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputRevealButtonTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdPasswordInputRevealButtonTemplateDirective, selector: "ard-password-input > ng-template[ard-reveal-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdPasswordInputRevealButtonTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdPasswordInputRevealButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-password-input > ng-template[ard-reveal-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -10464,8 +10464,8 @@ class ArdiumPasswordInputComponent extends _NgModelComponentBase {
             input.setAttribute(key, String(attributes[key]));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumPasswordInputComponent, selector: "ard-password-input", inputs: { placeholder: "placeholder", inputId: "inputId", revealable: "revealable", revealed: "revealed", appearance: "appearance", variant: "variant", compact: "compact", inputAttrs: "inputAttrs", maxLength: "maxLength", value: "value" }, outputs: { revealedChange: "revealedChange", valueChange: "valueChange", inputEvent: "input", changeEvent: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumPasswordInputComponent, selector: "ard-password-input", inputs: { placeholder: "placeholder", inputId: "inputId", revealable: "revealable", revealed: "revealed", appearance: "appearance", variant: "variant", compact: "compact", inputAttrs: "inputAttrs", maxLength: "maxLength", value: "value" }, outputs: { revealedChange: "revealedChange", valueChange: "valueChange", inputEvent: "input", changeEvent: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumPasswordInputComponent),
@@ -10473,7 +10473,7 @@ class ArdiumPasswordInputComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n>\r\n    <div class=\"ard-password-input\"\r\n        [ngClass]=\"ngClasses\"\r\n        [class.ard-has-value]=\"value\"\r\n        (click)=\"focus()\"\r\n    >\r\n        <div class=\"ard-input-container\">\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate>\r\n                    <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n            </ng-container>\r\n            \r\n            <input #textInput\r\n                #focusableElement\r\n                [type]=\"!revealable || !revealed ? 'password' : 'text'\"\r\n                [attr.id]=\"inputId\"\r\n                [attr.tabindex]=\"tabIndex\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (input)=\"onInput(textInput.value)\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                (change)=\"onChange($event)\"\r\n                (copy)=\"onCopy($event)\"\r\n                [class.ard-revealed]=\"revealable && revealed\"\r\n            >\r\n        </div>\r\n\r\n        <button *ngIf=\"revealable\"\r\n            class=\"ard-reveal-button\"\r\n            (click)=\"toggleReveal()\"\r\n        >\r\n            <ng-template #defaultRevealTemplate let-revealed>\r\n                    <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n                [ngTemplateOutlet]=\"revealTemplate || defaultRevealTemplate\"\r\n                [ngTemplateOutletContext]=\"getRevealButtonContext()\"\r\n            ></ng-template>\r\n        </button>\r\n    </div>\r\n</ard-form-field-frame>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: 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: "17.0.7", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-password-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -10538,8 +10538,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumPasswordInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumPasswordInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumPasswordInputModule, declarations: [ArdiumPasswordInputComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumPasswordInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumPasswordInputModule, declarations: [ArdiumPasswordInputComponent,
             ArdPasswordInputPlaceholderTemplateDirective,
             ArdPasswordInputPrefixTemplateDirective,
             ArdPasswordInputSuffixTemplateDirective,
@@ -10548,9 +10548,9 @@ class ArdiumPasswordInputModule {
             ArdPasswordInputPrefixTemplateDirective,
             ArdPasswordInputSuffixTemplateDirective,
             ArdPasswordInputRevealButtonTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumPasswordInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, ArdiumIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumPasswordInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, ArdiumIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumPasswordInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumPasswordInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10605,10 +10605,10 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
         // update radio button's status
         this._changeDetector.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: "htmlId", value: "value", color: "color" }, usesInheritance: true, ngImport: i0, template: "<button class=\"ard-radio\"\r\n    [ngClass]=\"ngClasses\"\r\n    #focusableElement\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (mousedown)=\"onMousedown()\"\r\n    (mouseup)=\"onMouseup()\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-radio-circles\">\r\n        <div class=\"ard-radio-outer-circle\"></div>\r\n        <div class=\"ard-radio-inner-circle\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-hitbox\"></div>\r\n    </div>\r\n    <label [for]=\"htmlId\">\r\n        <ng-content></ng-content>\r\n    </label>\r\n</button>\r\n\r\n<input\r\n    class=\"ard-radio-input-element\"\r\n    type=\"radio\"\r\n    [name]=\"name\"\r\n    [id]=\"htmlId\"\r\n    [checked]=\"selected\"\r\n    #radio\r\n>", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: "htmlId", value: "value", color: "color" }, usesInheritance: true, ngImport: i0, template: "<button class=\"ard-radio\"\r\n    [ngClass]=\"ngClasses\"\r\n    #focusableElement\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (mousedown)=\"onMousedown()\"\r\n    (mouseup)=\"onMouseup()\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-radio-circles\">\r\n        <div class=\"ard-radio-outer-circle\"></div>\r\n        <div class=\"ard-radio-inner-circle\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-hitbox\"></div>\r\n    </div>\r\n    <label [for]=\"htmlId\">\r\n        <ng-content></ng-content>\r\n    </label>\r\n</button>\r\n\r\n<input\r\n    class=\"ard-radio-input-element\"\r\n    type=\"radio\"\r\n    [name]=\"name\"\r\n    [id]=\"htmlId\"\r\n    [checked]=\"selected\"\r\n    #radio\r\n>", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-radio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"ard-radio\"\r\n    [ngClass]=\"ngClasses\"\r\n    #focusableElement\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (mousedown)=\"onMousedown()\"\r\n    (mouseup)=\"onMouseup()\"\r\n    [tabindex]=\"tabIndex\"\r\n>\r\n    <div class=\"ard-radio-circles\">\r\n        <div class=\"ard-radio-outer-circle\"></div>\r\n        <div class=\"ard-radio-inner-circle\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-hitbox\"></div>\r\n    </div>\r\n    <label [for]=\"htmlId\">\r\n        <ng-content></ng-content>\r\n    </label>\r\n</button>\r\n\r\n<input\r\n    class=\"ard-radio-input-element\"\r\n    type=\"radio\"\r\n    [name]=\"name\"\r\n    [id]=\"htmlId\"\r\n    [checked]=\"selected\"\r\n    #radio\r\n>", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { htmlId: [{
@@ -10769,8 +10769,8 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
         }
         this._childEventSubs = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumRadioGroupComponent, selector: "ard-radio-group", inputs: { htmlId: "htmlId", value: "value", selected: "selected", name: "name" }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.id": "this.htmlId" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumRadioGroupComponent, selector: "ard-radio-group", inputs: { htmlId: "htmlId", value: "value", selected: "selected", name: "name" }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.id": "this.htmlId" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumRadioGroupComponent),
@@ -10778,7 +10778,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
             },
         ], queries: [{ propertyName: "_radios", predicate: ArdiumRadioComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ard-radio-group',
@@ -10822,11 +10822,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumRadioModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioModule, declarations: [ArdiumRadioGroupComponent, ArdiumRadioComponent], imports: [CommonModule], exports: [ArdiumRadioGroupComponent, ArdiumRadioComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioModule, declarations: [ArdiumRadioGroupComponent, ArdiumRadioComponent], imports: [CommonModule], exports: [ArdiumRadioGroupComponent, ArdiumRadioComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumRadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumRadioGroupComponent, ArdiumRadioComponent],
@@ -10987,10 +10987,10 @@ class _FileInputComponentBase extends _NgModelComponentBase {
         }
         this.fileInputEl.nativeElement.files = dataTransfer.files;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _FileInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: _FileInputComponentBase, inputs: { htmlId: "htmlId", name: "name", compact: "compact", multiple: "multiple", blockAfterUpload: "blockAfterUpload", value: "value" }, outputs: { valueChange: "valueChange", changeEvent: "change", dragFilesEvent: "dragFiles" }, viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _FileInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: _FileInputComponentBase, inputs: { htmlId: "htmlId", name: "name", compact: "compact", multiple: "multiple", blockAfterUpload: "blockAfterUpload", value: "value" }, outputs: { valueChange: "valueChange", changeEvent: "change", dragFilesEvent: "dragFiles" }, viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _FileInputComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _FileInputComponentBase, decorators: [{
             type: Directive
         }], propDecorators: { fileInputEl: [{
                 type: ViewChild,
@@ -11021,10 +11021,10 @@ class ArdiumFileDropAreaIdleContentTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaIdleContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileDropAreaIdleContentTemplateDirective, selector: "ard-file-drop-area > ng-template[ard-idle-content-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaIdleContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileDropAreaIdleContentTemplateDirective, selector: "ard-file-drop-area > ng-template[ard-idle-content-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaIdleContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaIdleContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-file-drop-area > ng-template[ard-idle-content-tmp]',
@@ -11034,10 +11034,10 @@ class ArdiumFileDropAreaDragoverContentTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaDragoverContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileDropAreaDragoverContentTemplateDirective, selector: "ard-file-drop-area > ng-template[ard-dragover-content-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaDragoverContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileDropAreaDragoverContentTemplateDirective, selector: "ard-file-drop-area > ng-template[ard-dragover-content-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaDragoverContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaDragoverContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-file-drop-area > ng-template[ard-dragover-content-tmp]',
@@ -11047,10 +11047,10 @@ class ArdiumFileDropAreaUploadedContentTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaUploadedContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileDropAreaUploadedContentTemplateDirective, selector: "ard-file-drop-area > ng-template[ard-dropped-content-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaUploadedContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileDropAreaUploadedContentTemplateDirective, selector: "ard-file-drop-area > ng-template[ard-dropped-content-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaUploadedContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaUploadedContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-file-drop-area > ng-template[ard-dropped-content-tmp]',
@@ -11102,10 +11102,10 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
             files,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: "variant", color: "color" }, 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 class=\"ard-file-drop-area\"\r\n    (dragover)=\"onDragover($event)\"\r\n    (dragleave)=\"onDragleave()\"\r\n    (drop)=\"onDrop($event)\"\r\n    (ardClickOutside)=\"onDragleave()\"\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            <ng-template *ngIf=\"currentViewState == 'idle'\"\r\n                [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n                [ngTemplateOutletContext]=\"getIdleContext()\"\r\n            ></ng-template>\r\n            <ng-template *ngIf=\"currentViewState == 'dragover'\"\r\n                [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n                [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n            ></ng-template>\r\n            <ng-template *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 #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 #defaultIdleTemplate let-browse=\"browse\">\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</ng-template>\r\n\r\n<ng-template #defaultDragoverTemplate let-amount=\"amount\">\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></span>\r\n    <span class=\"ard-file-drop-area-dragover-text\">\r\n        here to upload.\r\n    </span>\r\n    <strong *ngIf=\"amount > 1 && !multiple\" class=\"ard-file-drop-area-dragover-warning\">\r\n        Only the first file will be uploaded!\r\n    </strong>\r\n</ng-template>\r\n\r\n<ng-template #defaultUploadedTemplate let-amount=\"amount\" let-files=\"files\">\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            <div class=\"ard-file-drop-area-file\" *ngFor=\"let file of files\">\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        </div>\r\n    </div>\r\n</ng-template>", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["variant", "alignIcon", "vertical", "icon"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileDropAreaComponent, selector: "ard-file-drop-area", inputs: { variant: "variant", color: "color" }, 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 class=\"ard-file-drop-area\"\r\n    (dragover)=\"onDragover($event)\"\r\n    (dragleave)=\"onDragleave()\"\r\n    (drop)=\"onDrop($event)\"\r\n    (ardClickOutside)=\"onDragleave()\"\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            <ng-template *ngIf=\"currentViewState == 'idle'\"\r\n                [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n                [ngTemplateOutletContext]=\"getIdleContext()\"\r\n            ></ng-template>\r\n            <ng-template *ngIf=\"currentViewState == 'dragover'\"\r\n                [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n                [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n            ></ng-template>\r\n            <ng-template *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 #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 #defaultIdleTemplate let-browse=\"browse\">\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</ng-template>\r\n\r\n<ng-template #defaultDragoverTemplate let-amount=\"amount\">\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></span>\r\n    <span class=\"ard-file-drop-area-dragover-text\">\r\n        here to upload.\r\n    </span>\r\n    <strong *ngIf=\"amount > 1 && !multiple\" class=\"ard-file-drop-area-dragover-warning\">\r\n        Only the first file will be uploaded!\r\n    </strong>\r\n</ng-template>\r\n\r\n<ng-template #defaultUploadedTemplate let-amount=\"amount\" let-files=\"files\">\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            <div class=\"ard-file-drop-area-file\" *ngFor=\"let file of files\">\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        </div>\r\n    </div>\r\n</ng-template>", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["variant", "alignIcon", "vertical", "icon"] }, { 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: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-file-drop-area\"\r\n    (dragover)=\"onDragover($event)\"\r\n    (dragleave)=\"onDragleave()\"\r\n    (drop)=\"onDrop($event)\"\r\n    (ardClickOutside)=\"onDragleave()\"\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            <ng-template *ngIf=\"currentViewState == 'idle'\"\r\n                [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n                [ngTemplateOutletContext]=\"getIdleContext()\"\r\n            ></ng-template>\r\n            <ng-template *ngIf=\"currentViewState == 'dragover'\"\r\n                [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n                [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n            ></ng-template>\r\n            <ng-template *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 #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 #defaultIdleTemplate let-browse=\"browse\">\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</ng-template>\r\n\r\n<ng-template #defaultDragoverTemplate let-amount=\"amount\">\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></span>\r\n    <span class=\"ard-file-drop-area-dragover-text\">\r\n        here to upload.\r\n    </span>\r\n    <strong *ngIf=\"amount > 1 && !multiple\" class=\"ard-file-drop-area-dragover-warning\">\r\n        Only the first file will be uploaded!\r\n    </strong>\r\n</ng-template>\r\n\r\n<ng-template #defaultUploadedTemplate let-amount=\"amount\" let-files=\"files\">\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            <div class=\"ard-file-drop-area-file\" *ngFor=\"let file of files\">\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        </div>\r\n    </div>\r\n</ng-template>", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
         }], propDecorators: { variant: [{
@@ -11130,8 +11130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumFileDropAreaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaModule, declarations: [ArdiumFileDropAreaComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaModule, declarations: [ArdiumFileDropAreaComponent,
             ArdiumFileDropAreaIdleContentTemplateDirective,
             ArdiumFileDropAreaDragoverContentTemplateDirective,
             ArdiumFileDropAreaUploadedContentTemplateDirective], imports: [CommonModule,
@@ -11144,7 +11144,7 @@ class ArdiumFileDropAreaModule {
             ArdiumFileDropAreaIdleContentTemplateDirective,
             ArdiumFileDropAreaDragoverContentTemplateDirective,
             ArdiumFileDropAreaUploadedContentTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaModule, imports: [CommonModule,
             ArdiumButtonModule,
             ArdiumIconModule,
             ArdiumFilesizePipeModule,
@@ -11152,7 +11152,7 @@ class ArdiumFileDropAreaModule {
             ArdiumFileextPipeModule,
             ArdiumClickOutsideEventModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileDropAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileDropAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11183,10 +11183,10 @@ class ArdFileInputPlaceholderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFileInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdFileInputPlaceholderTemplateDirective, selector: "ard-file-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFileInputPlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdFileInputPlaceholderTemplateDirective, selector: "ard-file-input > ng-template[ard-placeholder-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFileInputPlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFileInputPlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-file-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -11194,10 +11194,10 @@ class ArdFileInputPrefixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFileInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdFileInputPrefixTemplateDirective, selector: "ard-file-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFileInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdFileInputPrefixTemplateDirective, selector: "ard-file-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFileInputPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFileInputPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-file-input > ng-template[ard-prefix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -11205,10 +11205,10 @@ class ArdFileInputSuffixTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFileInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdFileInputSuffixTemplateDirective, selector: "ard-file-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFileInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdFileInputSuffixTemplateDirective, selector: "ard-file-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdFileInputSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdFileInputSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-file-input > ng-template[ard-suffix-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -11216,10 +11216,10 @@ class ArdiumFileInputIdleContentTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputIdleContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileInputIdleContentTemplateDirective, selector: "ard-file-input > ng-template[ard-idle-content-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputIdleContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileInputIdleContentTemplateDirective, selector: "ard-file-input > ng-template[ard-idle-content-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputIdleContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputIdleContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-file-input > ng-template[ard-idle-content-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -11227,10 +11227,10 @@ class ArdiumFileInputDragoverContentTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputDragoverContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileInputDragoverContentTemplateDirective, selector: "ard-file-input > ng-template[ard-dragover-content-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputDragoverContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileInputDragoverContentTemplateDirective, selector: "ard-file-input > ng-template[ard-dragover-content-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputDragoverContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputDragoverContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-file-input > ng-template[ard-dragover-content-tmp]',
@@ -11240,10 +11240,10 @@ class ArdiumFileInputUploadedContentTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputUploadedContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileInputUploadedContentTemplateDirective, selector: "ard-file-input > ng-template[ard-dropped-content-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputUploadedContentTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileInputUploadedContentTemplateDirective, selector: "ard-file-input > ng-template[ard-dropped-content-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputUploadedContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputUploadedContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-file-input > ng-template[ard-dropped-content-tmp]',
@@ -11327,8 +11327,8 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
             files,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumFileInputComponent, selector: "ard-file-input", inputs: { appearance: "appearance", variant: "variant", color: "color", inputAttrs: "inputAttrs", placeholder: "placeholder", clearable: "clearable", clearButtonTitle: "clearButtonTitle" }, outputs: { clearEvent: "clear" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumFileInputComponent, selector: "ard-file-input", inputs: { appearance: "appearance", variant: "variant", color: "color", inputAttrs: "inputAttrs", placeholder: "placeholder", clearable: "clearable", clearButtonTitle: "clearButtonTitle" }, outputs: { clearEvent: "clear" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
@@ -11336,7 +11336,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
             },
         ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdColorInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n    class=\"ard-file-input-form-field-frame\"\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [isFocused]=\"isFocused\"\r\n    [prefixTemplate]=\"prefixTemplate\"\r\n    [suffixTemplate]=\"suffixTemplate\"\r\n    (dragover)=\"onDragover($event)\"\r\n    (dragleave)=\"onDragleave()\"\r\n    (drop)=\"onDrop($event)\"\r\n    (ardClickOutside)=\"onDragleave()\"\r\n>\r\n    <div class=\"ard-file-input\"\r\n        [class.ard-has-value]=\"value\"\r\n    >\r\n        <div class=\"ard-input-container\">\r\n            <ng-container *ngIf=\"shouldDisplayPlaceholder\">\r\n                <ng-template #defaultPlaceholderTemplate>\r\n                    <div class=\"ard-placeholder\">{{ placeholder }}</div>\r\n                </ng-template>\r\n\r\n                <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\"></ng-template>\r\n            </ng-container>\r\n\r\n            <div class=\"ard-file-input__value\">\r\n                <ng-template *ngIf=\"currentViewState == 'idle'\" [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n                    [ngTemplateOutletContext]=\"getIdleContext()\"></ng-template>\r\n                <ng-template *ngIf=\"currentViewState == 'dragover'\" [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n                    [ngTemplateOutletContext]=\"getDragoverContext()\"></ng-template>\r\n                <ng-template *ngIf=\"currentViewState == 'uploaded'\" [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n                    [ngTemplateOutletContext]=\"getUploadedContext()\"></ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <ard-_clear-button\r\n            *ngIf=\"shouldShowClearButton\"\r\n            #focusableElement\r\n            [title]=\"clearButtonTitle\"\r\n            (mouseup)=\"onClearButtonClick($event)\"\r\n        ></ard-_clear-button>\r\n\r\n        <button\r\n            *ngIf=\"!shouldBeBlocked\"\r\n            class=\"ard-browse-button\"\r\n            #focusableElement\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n            (click)=\"openBrowseDialog()\"\r\n        >\r\n            <div class=\"ard-focus-overlay\"></div>\r\n            <ard-icon>folder</ard-icon>\r\n        </button>\r\n    </div>\r\n</ard-form-field-frame>\r\n\r\n<input #fileInput\r\n    class=\"ard-file-input__input\"\r\n    type=\"file\"\r\n    [name]=\"name\"\r\n    [multiple]=\"multiple\"\r\n    [attr.id]=\"htmlId\"\r\n    (change)=\"onInputChange()\"\r\n>\r\n\r\n<ng-template #defaultIdleTemplate let-browse=\"browse\">\r\n    <span class=\"ard-file-input__idle\">\r\n        <span *ngIf=\"!multiple\">Upload a file</span>\r\n        <span *ngIf=\"multiple\">Upload files</span>\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultDragoverTemplate let-amount=\"amount\">\r\n    <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n    <span class=\"ard-file-input__dragover-amount\" *ngIf=\"multiple\">\r\n        {{ amount }} \r\n        <ng-container [ngPlural]=\"amount\">\r\n            <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n            <ng-template ngPluralCase=\"other\">files</ng-template>\r\n        </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__dragover-amount\" *ngIf=\"!multiple\">\r\n        a file\r\n    </span>\r\n    <span class=\"ard-file-input__dragover-text\">\r\n        here to upload\r\n    </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultUploadedTemplate let-amount=\"amount\">\r\n    <div class=\"ard-file-input__uploaded\">\r\n        <span class=\"ard-file-input__uploaded-amount\">\r\n            {{ amount }}\r\n            <ng-container [ngPlural]=\"amount\">\r\n                <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n                <ng-template ngPluralCase=\"other\">files</ng-template>\r\n            </ng-container>\r\n        </span>\r\n        <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    </div>\r\n</ng-template>", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-_clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-file-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -11391,11 +11391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumFileInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputModule, declarations: [ArdiumFileInputComponent], imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule], exports: [ArdiumFileInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputModule, declarations: [ArdiumFileInputComponent], imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule], exports: [ArdiumFileInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputModule, imports: [CommonModule, ArdiumFormFieldFrameModule, _ClearButtonModule, ArdiumIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumFileInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumFileInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumFileInputComponent],
@@ -12019,10 +12019,10 @@ class ArdiumTableTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTableTemplateDirective, selector: "ard-table > ng-template[ard-table-tmp]", inputs: { name: ["ard-table-tmp", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTableTemplateDirective, selector: "ard-table > ng-template[ard-table-tmp]", inputs: { name: ["ard-table-tmp", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-table > ng-template[ard-table-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{
@@ -12033,10 +12033,10 @@ class ArdiumTableCheckboxTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableCheckboxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTableCheckboxTemplateDirective, selector: "ard-table > ng-template[ard-table-checkbox-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableCheckboxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTableCheckboxTemplateDirective, selector: "ard-table > ng-template[ard-table-checkbox-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableCheckboxTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableCheckboxTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-table > ng-template[ard-table-checkbox-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -12044,10 +12044,10 @@ class ArdiumTableHeaderCheckboxTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableHeaderCheckboxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTableHeaderCheckboxTemplateDirective, selector: "ard-table > ng-template[ard-table-header-checkbox-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableHeaderCheckboxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTableHeaderCheckboxTemplateDirective, selector: "ard-table > ng-template[ard-table-header-checkbox-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableHeaderCheckboxTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableHeaderCheckboxTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ard-table > ng-template[ard-table-header-checkbox-tmp]',
@@ -12057,10 +12057,10 @@ class ArdiumTableCaptionTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableCaptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTableCaptionTemplateDirective, selector: "ard-table > ng-template[ard-table-caption-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableCaptionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTableCaptionTemplateDirective, selector: "ard-table > ng-template[ard-table-caption-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableCaptionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableCaptionTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-table > ng-template[ard-table-caption-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -12069,10 +12069,10 @@ class ArdiumTablePaginationTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTablePaginationTemplateDirective, selector: "ard-table > ng-template[ard-table-pagination-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTablePaginationTemplateDirective, selector: "ard-table > ng-template[ard-table-pagination-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-table > ng-template[ard-table-pagination-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -12325,10 +12325,10 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
             return;
         this._emitPageEvent();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: { options: "options", itemsPerPage: "itemsPerPage", page: "page", totalItems: "totalItems", color: "color", align: "align", compact: "compact", useFirstLastButtons: "useFirstLastButtons", isLoading: "isLoading", itemsPerPageText: "itemsPerPageText", currentItemsFormatFn: "currentItemsFormatFn" }, outputs: { itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-pagination\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-pagination__items-per-page\">\r\n        <div class=\"ard-pagination__text\">{{ itemsPerPageText }}</div>\r\n        <ard-select\r\n            [items]=\"options\"\r\n            [compact]=\"compact\"\r\n            [value]=\"itemsPerPage\"\r\n            autoHighlightFirst=\"false\"\r\n            [disabled]=\"disabled\"\r\n            (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n            clearable=\"false\"\r\n        />\r\n    </div>\r\n    <div class=\"ard-pagination__current-page\">\r\n        <div class=\"ard-pagination__text\">\r\n            {{ currentItemsFormatFn(getCurrentItemsContext()) }}\r\n        </div>\r\n        <div class=\"ard-pagination__buttons\">\r\n            <ard-icon-button\r\n                *ngIf=\"useFirstLastButtons\"\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || firstPageDisabled\"\r\n                (click)=\"onFirstPage()\"\r\n            >\r\n                <ard-icon>first page</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || firstPageDisabled\"\r\n                (click)=\"onPrevPage()\"\r\n            >\r\n                <ard-icon>navigate before</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || lastPageDisabled\"\r\n                (click)=\"onNextPage()\"\r\n            >\r\n                <ard-icon>navigate next</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                *ngIf=\"useFirstLastButtons\"\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || lastPageDisabled\"\r\n                (click)=\"onLastPage()\"\r\n            >\r\n                <ard-icon>last page</ard-icon>\r\n            </ard-icon-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "dropdownPosition", "clearButtonTitle", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "isLoading", "inputAttrs", "htmlId", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdowonAppearance", "dropdowonVariant", "groupItems", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "color", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: { options: "options", itemsPerPage: "itemsPerPage", page: "page", totalItems: "totalItems", color: "color", align: "align", compact: "compact", useFirstLastButtons: "useFirstLastButtons", isLoading: "isLoading", itemsPerPageText: "itemsPerPageText", currentItemsFormatFn: "currentItemsFormatFn" }, outputs: { itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ard-pagination\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-pagination__items-per-page\">\r\n        <div class=\"ard-pagination__text\">{{ itemsPerPageText }}</div>\r\n        <ard-select\r\n            [items]=\"options\"\r\n            [compact]=\"compact\"\r\n            [value]=\"itemsPerPage\"\r\n            autoHighlightFirst=\"false\"\r\n            [disabled]=\"disabled\"\r\n            (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n            clearable=\"false\"\r\n        />\r\n    </div>\r\n    <div class=\"ard-pagination__current-page\">\r\n        <div class=\"ard-pagination__text\">\r\n            {{ currentItemsFormatFn(getCurrentItemsContext()) }}\r\n        </div>\r\n        <div class=\"ard-pagination__buttons\">\r\n            <ard-icon-button\r\n                *ngIf=\"useFirstLastButtons\"\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || firstPageDisabled\"\r\n                (click)=\"onFirstPage()\"\r\n            >\r\n                <ard-icon>first page</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || firstPageDisabled\"\r\n                (click)=\"onPrevPage()\"\r\n            >\r\n                <ard-icon>navigate before</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || lastPageDisabled\"\r\n                (click)=\"onNextPage()\"\r\n            >\r\n                <ard-icon>navigate next</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                *ngIf=\"useFirstLastButtons\"\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || lastPageDisabled\"\r\n                (click)=\"onLastPage()\"\r\n            >\r\n                <ard-icon>last page</ard-icon>\r\n            </ard-icon-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "dropdownPosition", "clearButtonTitle", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "isLoading", "inputAttrs", "htmlId", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdowonAppearance", "dropdowonVariant", "groupItems", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "color", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-table-pagination', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-pagination\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-pagination__items-per-page\">\r\n        <div class=\"ard-pagination__text\">{{ itemsPerPageText }}</div>\r\n        <ard-select\r\n            [items]=\"options\"\r\n            [compact]=\"compact\"\r\n            [value]=\"itemsPerPage\"\r\n            autoHighlightFirst=\"false\"\r\n            [disabled]=\"disabled\"\r\n            (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n            clearable=\"false\"\r\n        />\r\n    </div>\r\n    <div class=\"ard-pagination__current-page\">\r\n        <div class=\"ard-pagination__text\">\r\n            {{ currentItemsFormatFn(getCurrentItemsContext()) }}\r\n        </div>\r\n        <div class=\"ard-pagination__buttons\">\r\n            <ard-icon-button\r\n                *ngIf=\"useFirstLastButtons\"\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || firstPageDisabled\"\r\n                (click)=\"onFirstPage()\"\r\n            >\r\n                <ard-icon>first page</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || firstPageDisabled\"\r\n                (click)=\"onPrevPage()\"\r\n            >\r\n                <ard-icon>navigate before</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || lastPageDisabled\"\r\n                (click)=\"onNextPage()\"\r\n            >\r\n                <ard-icon>navigate next</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n                *ngIf=\"useFirstLastButtons\"\r\n                [color]=\"color\"\r\n                [compact]=\"compact\"\r\n                [disabled]=\"disabled || lastPageDisabled\"\r\n                (click)=\"onLastPage()\"\r\n            >\r\n                <ard-icon>last page</ard-icon>\r\n            </ard-icon-button>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], propDecorators: { options: [{
@@ -12711,10 +12711,10 @@ class ArdiumTableComponent extends _FocusableComponentBase {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTableComponent, selector: "ard-table", inputs: { rowDisabledFrom: "rowDisabledFrom", rowBoldFrom: "rowBoldFrom", invertRowDisabled: "invertRowDisabled", invertRowBold: "invertRowBold", selectableRows: "selectableRows", caption: "caption", isLoading: "isLoading", loadingProgress: "loadingProgress", appearance: "appearance", variant: "variant", color: "color", align: "align", headerAlign: "headerAlign", compact: "compact", zebra: "zebra", stickyHeader: "stickyHeader", paginated: "paginated", paginationStrategy: "paginationStrategy", paginationOptions: "paginationOptions", totalItems: "totalItems", paginationColor: "paginationColor", paginationAlign: "paginationAlign", itemsPerPageText: "itemsPerPageText", currentItemsFormatFn: "currentItemsFormatFn", pageFillRemaining: "pageFillRemaining", paginationDisabled: "paginationDisabled", useFirstLastButtons: "useFirstLastButtons", itemsPerPage: "itemsPerPage", page: "page", columns: "columns", data: "data", treatDataSourceAsString: "treatDataSourceAsString" }, outputs: { itemsPerPageChange: "itemsPerPageChange", pageChange: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective }], usesInheritance: true, ngImport: i0, template: "<table class=\"ard-table\" [ngClass]=\"ngClasses\">\r\n    <caption\r\n        *ngIf=\"caption\"\r\n        class=\"ard-table__caption\"\r\n    >\r\n        <div class=\"ard-table__caption-container\">\r\n            <ng-template #defaultCaptionTemplate let-captionText>\r\n                {{ captionText }}\r\n            </ng-template>\r\n        \r\n            <ng-template\r\n                [ngTemplateOutlet]=\"captionTemplate ?? defaultCaptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: caption }\"\r\n            />\r\n        </div>\r\n    </caption>\r\n    <thead class=\"ard-table__header\">\r\n        <tr class=\"ard-table__header-row\" *ngFor=\"let row of headerCells\">\r\n            <th\r\n                *ngFor=\"let cell of row; let index = index\"\r\n                class=\"ard-table__header-cell\"\r\n                [ngClass]=\"cell.cell.cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan\"\r\n                [scope]=\"cell.colspan > 1 ? 'colgroup' : 'col'\"\r\n            >\r\n                <div\r\n                    class=\"ard-table__cell-container\"\r\n                    [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n                    [style.width]=\"cell.width\"\r\n                    [style.minWidth]=\"cell.minWidth\"\r\n                >\r\n                    <ng-container *ngIf=\"isHeaderCellCheckbox(cell)\">\r\n                        <ng-template #defaultHeaderCheckboxTemplate let-state let-onChange=\"onChange\">\r\n                            <ard-checkbox [tabIndex]=\"isLoading ? -1 : tabIndex\" [state]=\"state\" [color]=\"getHeaderCheckboxColor()\" unselectedColor=\"currentColor\" (change)=\"onChange()\" />\r\n                        </ng-template>\r\n                    \r\n                        <ng-template\r\n                            [ngTemplateOutlet]=\"headerCheckboxTemplate ?? defaultHeaderCheckboxTemplate\"\r\n                            [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                        />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!isHeaderCellCheckbox(cell)\">\r\n                        <ng-template\r\n                            #defaultHeaderCellTemplate\r\n                            let-content\r\n                            let-sortable=\"sortable\"\r\n                            let-sortType=\"sortType\"\r\n                            let-onTriggerSort=\"onTriggerSort\"\r\n                            let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                        >\r\n                            <div\r\n                                class=\"ard-table__header-template-container\"\r\n                                [class.ard-sortable]=\"sortable\"\r\n                                [class.ard-nonsortable]=\"!sortable\"\r\n                            >\r\n                                <button\r\n                                    class=\"ard-table__header-content-container\"\r\n                                    *ngIf=\"sortable\"\r\n                                    (click)=\"onTriggerSort($event)\"\r\n                                    [tabindex]=\"tabIndex\"\r\n                                    (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                                >\r\n                                    <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                                    <div class=\"ard-table__header-sort-icon\" *ngIf=\"sortType != null\">\r\n                                        <ard-icon *ngIf=\"sortType == 'ascending'\">south</ard-icon>\r\n                                        <ard-icon *ngIf=\"sortType == 'descending'\">north</ard-icon>\r\n                                    </div>\r\n                                </button>\r\n                                <div\r\n                                    class=\"ard-table__header-content-container\"\r\n                                    *ngIf=\"!sortable\"\r\n                                >\r\n                                    <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    \r\n                        <ng-template \r\n                            [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell.header) ?? defaultHeaderCellTemplate\"\r\n                            [ngTemplateOutletContext]=\"getHeaderContext(cell.cell, index)\"\r\n                        />\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n        </tr>\r\n    </thead>\r\n    <tbody class=\"ard-table__body\">\r\n        <ng-container *ngFor=\"let row of dataRows; let rowIndex = index;\">\r\n            <tr *ngIf=\"row.isEmpty\" class=\"ard-table__empty-row\">\r\n                <td class=\"ard-table__empty-cell\" colspan=\"9999\"></td>\r\n            </tr>\r\n            <tr\r\n                *ngIf=\"!row.isEmpty\"\r\n                class=\"ard-table__body-row\"\r\n                [class.ard-table__selected-row]=\"row.selected\"\r\n                [class.ard-table__highlighted-row]=\"row.highlighted\"\r\n                [class.ard-table__disabled-row]=\"row.disabled\"\r\n                [class.ard-table__bold-row]=\"row.bold\"\r\n                (click)=\"onRowClick(rowIndex, $event)\"\r\n                (mouseover)=\"onRowMouseOver($event)\"\r\n                (mouseenter)=\"onRowMouseEnter(rowIndex, $event)\"\r\n                (mouseleave)=\"onRowMouseLeave(rowIndex, $event)\"\r\n            >\r\n                <ng-container *ngFor=\"let cell of row.data; let cellIndex = index\">\r\n                    <ng-template #cellTmp>\r\n                        <div\r\n                            class=\"ard-table__cell-container\"\r\n                            [style]=\"getCellStyle(row.dataColumns[cellIndex])\"\r\n                        >\r\n                            <ng-container *ngIf=\"isCellCheckbox(cell)\">\r\n                                <ng-template #defaultCheckboxTemplate let-isChecked let-onChange=\"onChange\" let-disabled=\"disabled\">\r\n                                    <ard-checkbox [tabIndex]=\"isLoading ? -1 : tabIndex\" [selected]=\"isChecked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"onChange()\" (click)=\"$event.stopPropagation()\" />\r\n                                </ng-template>\r\n\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"checkboxTemplate ?? defaultCheckboxTemplate\"\r\n                                    [ngTemplateOutletContext]=\"getCheckboxContext(rowIndex)\"\r\n                                />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!isCellCheckbox(cell)\">\r\n                                <ng-template #defaultCellTemplate let-content>\r\n                                    {{ content }}\r\n                                </ng-template>\r\n\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns[cellIndex].template) ?? defaultCellTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                                />\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                    <td\r\n                        *ngIf=\"!row.dataColumns[cellIndex].isRowHeader\"\r\n                        class=\"ard-table__body-cell\"\r\n                        [ngClass]=\"row.dataColumns[cellIndex].cellClass\"\r\n                        [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n                    >\r\n                        <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n                    </td>\r\n                    <th\r\n                        *ngIf=\"row.dataColumns[cellIndex].isRowHeader\"\r\n                        class=\"ard-table__body-cell ard-table__row-header\"\r\n                        scope=\"row\"\r\n                        [ngClass]=\"row.dataColumns[cellIndex].cellClass\"\r\n                        [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n                    >\r\n                        <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n                    </th>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-container>\r\n    </tbody>\r\n    <tfoot class=\"ard-table__foot\" *ngIf=\"canDisplayPagination\">\r\n        <tr class=\"ard-table__foot-row\">\r\n            <td class=\"ard-table__pagination-cell\" colspan=\"9999\">\r\n                <ard-table-pagination\r\n                    [options]=\"paginationOptions\"\r\n                    [(page)]=\"page\"\r\n                    [totalItems]=\"totalItems\"\r\n                    [disabled]=\"paginationDisabled\"\r\n                    [(itemsPerPage)]=\"itemsPerPage\"\r\n                    [align]=\"paginationAlign\"\r\n                    [isLoading]=\"isLoading\"\r\n                    [itemsPerPageText]=\"itemsPerPageText\"\r\n                    [currentItemsFormatFn]=\"currentItemsFormatFn\"\r\n                    (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n                    (pageChange)=\"pageChange.emit($event)\"\r\n                ></ard-table-pagination>\r\n            </td>\r\n        </tr>\r\n    </tfoot>\r\n</table>", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["wrapperClasses", "htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["options", "itemsPerPage", "page", "totalItems", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTableComponent, selector: "ard-table", inputs: { rowDisabledFrom: "rowDisabledFrom", rowBoldFrom: "rowBoldFrom", invertRowDisabled: "invertRowDisabled", invertRowBold: "invertRowBold", selectableRows: "selectableRows", caption: "caption", isLoading: "isLoading", loadingProgress: "loadingProgress", appearance: "appearance", variant: "variant", color: "color", align: "align", headerAlign: "headerAlign", compact: "compact", zebra: "zebra", stickyHeader: "stickyHeader", paginated: "paginated", paginationStrategy: "paginationStrategy", paginationOptions: "paginationOptions", totalItems: "totalItems", paginationColor: "paginationColor", paginationAlign: "paginationAlign", itemsPerPageText: "itemsPerPageText", currentItemsFormatFn: "currentItemsFormatFn", pageFillRemaining: "pageFillRemaining", paginationDisabled: "paginationDisabled", useFirstLastButtons: "useFirstLastButtons", itemsPerPage: "itemsPerPage", page: "page", columns: "columns", data: "data", treatDataSourceAsString: "treatDataSourceAsString" }, outputs: { itemsPerPageChange: "itemsPerPageChange", pageChange: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective }], usesInheritance: true, ngImport: i0, template: "<table class=\"ard-table\" [ngClass]=\"ngClasses\">\r\n    <caption\r\n        *ngIf=\"caption\"\r\n        class=\"ard-table__caption\"\r\n    >\r\n        <div class=\"ard-table__caption-container\">\r\n            <ng-template #defaultCaptionTemplate let-captionText>\r\n                {{ captionText }}\r\n            </ng-template>\r\n        \r\n            <ng-template\r\n                [ngTemplateOutlet]=\"captionTemplate ?? defaultCaptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: caption }\"\r\n            />\r\n        </div>\r\n    </caption>\r\n    <thead class=\"ard-table__header\">\r\n        <tr class=\"ard-table__header-row\" *ngFor=\"let row of headerCells\">\r\n            <th\r\n                *ngFor=\"let cell of row; let index = index\"\r\n                class=\"ard-table__header-cell\"\r\n                [ngClass]=\"cell.cell.cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan\"\r\n                [scope]=\"cell.colspan > 1 ? 'colgroup' : 'col'\"\r\n            >\r\n                <div\r\n                    class=\"ard-table__cell-container\"\r\n                    [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n                    [style.width]=\"cell.width\"\r\n                    [style.minWidth]=\"cell.minWidth\"\r\n                >\r\n                    <ng-container *ngIf=\"isHeaderCellCheckbox(cell)\">\r\n                        <ng-template #defaultHeaderCheckboxTemplate let-state let-onChange=\"onChange\">\r\n                            <ard-checkbox [tabIndex]=\"isLoading ? -1 : tabIndex\" [state]=\"state\" [color]=\"getHeaderCheckboxColor()\" unselectedColor=\"currentColor\" (change)=\"onChange()\" />\r\n                        </ng-template>\r\n                    \r\n                        <ng-template\r\n                            [ngTemplateOutlet]=\"headerCheckboxTemplate ?? defaultHeaderCheckboxTemplate\"\r\n                            [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                        />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!isHeaderCellCheckbox(cell)\">\r\n                        <ng-template\r\n                            #defaultHeaderCellTemplate\r\n                            let-content\r\n                            let-sortable=\"sortable\"\r\n                            let-sortType=\"sortType\"\r\n                            let-onTriggerSort=\"onTriggerSort\"\r\n                            let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                        >\r\n                            <div\r\n                                class=\"ard-table__header-template-container\"\r\n                                [class.ard-sortable]=\"sortable\"\r\n                                [class.ard-nonsortable]=\"!sortable\"\r\n                            >\r\n                                <button\r\n                                    class=\"ard-table__header-content-container\"\r\n                                    *ngIf=\"sortable\"\r\n                                    (click)=\"onTriggerSort($event)\"\r\n                                    [tabindex]=\"tabIndex\"\r\n                                    (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                                >\r\n                                    <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                                    <div class=\"ard-table__header-sort-icon\" *ngIf=\"sortType != null\">\r\n                                        <ard-icon *ngIf=\"sortType == 'ascending'\">south</ard-icon>\r\n                                        <ard-icon *ngIf=\"sortType == 'descending'\">north</ard-icon>\r\n                                    </div>\r\n                                </button>\r\n                                <div\r\n                                    class=\"ard-table__header-content-container\"\r\n                                    *ngIf=\"!sortable\"\r\n                                >\r\n                                    <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    \r\n                        <ng-template \r\n                            [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell.header) ?? defaultHeaderCellTemplate\"\r\n                            [ngTemplateOutletContext]=\"getHeaderContext(cell.cell, index)\"\r\n                        />\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n        </tr>\r\n    </thead>\r\n    <tbody class=\"ard-table__body\">\r\n        <ng-container *ngFor=\"let row of dataRows; let rowIndex = index;\">\r\n            <tr *ngIf=\"row.isEmpty\" class=\"ard-table__empty-row\">\r\n                <td class=\"ard-table__empty-cell\" colspan=\"9999\"></td>\r\n            </tr>\r\n            <tr\r\n                *ngIf=\"!row.isEmpty\"\r\n                class=\"ard-table__body-row\"\r\n                [class.ard-table__selected-row]=\"row.selected\"\r\n                [class.ard-table__highlighted-row]=\"row.highlighted\"\r\n                [class.ard-table__disabled-row]=\"row.disabled\"\r\n                [class.ard-table__bold-row]=\"row.bold\"\r\n                (click)=\"onRowClick(rowIndex, $event)\"\r\n                (mouseover)=\"onRowMouseOver($event)\"\r\n                (mouseenter)=\"onRowMouseEnter(rowIndex, $event)\"\r\n                (mouseleave)=\"onRowMouseLeave(rowIndex, $event)\"\r\n            >\r\n                <ng-container *ngFor=\"let cell of row.data; let cellIndex = index\">\r\n                    <ng-template #cellTmp>\r\n                        <div\r\n                            class=\"ard-table__cell-container\"\r\n                            [style]=\"getCellStyle(row.dataColumns[cellIndex])\"\r\n                        >\r\n                            <ng-container *ngIf=\"isCellCheckbox(cell)\">\r\n                                <ng-template #defaultCheckboxTemplate let-isChecked let-onChange=\"onChange\" let-disabled=\"disabled\">\r\n                                    <ard-checkbox [tabIndex]=\"isLoading ? -1 : tabIndex\" [selected]=\"isChecked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"onChange()\" (click)=\"$event.stopPropagation()\" />\r\n                                </ng-template>\r\n\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"checkboxTemplate ?? defaultCheckboxTemplate\"\r\n                                    [ngTemplateOutletContext]=\"getCheckboxContext(rowIndex)\"\r\n                                />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!isCellCheckbox(cell)\">\r\n                                <ng-template #defaultCellTemplate let-content>\r\n                                    {{ content }}\r\n                                </ng-template>\r\n\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns[cellIndex].template) ?? defaultCellTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                                />\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                    <td\r\n                        *ngIf=\"!row.dataColumns[cellIndex].isRowHeader\"\r\n                        class=\"ard-table__body-cell\"\r\n                        [ngClass]=\"row.dataColumns[cellIndex].cellClass\"\r\n                        [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n                    >\r\n                        <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n                    </td>\r\n                    <th\r\n                        *ngIf=\"row.dataColumns[cellIndex].isRowHeader\"\r\n                        class=\"ard-table__body-cell ard-table__row-header\"\r\n                        scope=\"row\"\r\n                        [ngClass]=\"row.dataColumns[cellIndex].cellClass\"\r\n                        [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n                    >\r\n                        <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n                    </th>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-container>\r\n    </tbody>\r\n    <tfoot class=\"ard-table__foot\" *ngIf=\"canDisplayPagination\">\r\n        <tr class=\"ard-table__foot-row\">\r\n            <td class=\"ard-table__pagination-cell\" colspan=\"9999\">\r\n                <ard-table-pagination\r\n                    [options]=\"paginationOptions\"\r\n                    [(page)]=\"page\"\r\n                    [totalItems]=\"totalItems\"\r\n                    [disabled]=\"paginationDisabled\"\r\n                    [(itemsPerPage)]=\"itemsPerPage\"\r\n                    [align]=\"paginationAlign\"\r\n                    [isLoading]=\"isLoading\"\r\n                    [itemsPerPageText]=\"itemsPerPageText\"\r\n                    [currentItemsFormatFn]=\"currentItemsFormatFn\"\r\n                    (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n                    (pageChange)=\"pageChange.emit($event)\"\r\n                ></ard-table-pagination>\r\n            </td>\r\n        </tr>\r\n    </tfoot>\r\n</table>", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["wrapperClasses", "htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["options", "itemsPerPage", "page", "totalItems", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"ard-table\" [ngClass]=\"ngClasses\">\r\n    <caption\r\n        *ngIf=\"caption\"\r\n        class=\"ard-table__caption\"\r\n    >\r\n        <div class=\"ard-table__caption-container\">\r\n            <ng-template #defaultCaptionTemplate let-captionText>\r\n                {{ captionText }}\r\n            </ng-template>\r\n        \r\n            <ng-template\r\n                [ngTemplateOutlet]=\"captionTemplate ?? defaultCaptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: caption }\"\r\n            />\r\n        </div>\r\n    </caption>\r\n    <thead class=\"ard-table__header\">\r\n        <tr class=\"ard-table__header-row\" *ngFor=\"let row of headerCells\">\r\n            <th\r\n                *ngFor=\"let cell of row; let index = index\"\r\n                class=\"ard-table__header-cell\"\r\n                [ngClass]=\"cell.cell.cellClass\"\r\n                [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan\"\r\n                [scope]=\"cell.colspan > 1 ? 'colgroup' : 'col'\"\r\n            >\r\n                <div\r\n                    class=\"ard-table__cell-container\"\r\n                    [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\r\n                    [style.width]=\"cell.width\"\r\n                    [style.minWidth]=\"cell.minWidth\"\r\n                >\r\n                    <ng-container *ngIf=\"isHeaderCellCheckbox(cell)\">\r\n                        <ng-template #defaultHeaderCheckboxTemplate let-state let-onChange=\"onChange\">\r\n                            <ard-checkbox [tabIndex]=\"isLoading ? -1 : tabIndex\" [state]=\"state\" [color]=\"getHeaderCheckboxColor()\" unselectedColor=\"currentColor\" (change)=\"onChange()\" />\r\n                        </ng-template>\r\n                    \r\n                        <ng-template\r\n                            [ngTemplateOutlet]=\"headerCheckboxTemplate ?? defaultHeaderCheckboxTemplate\"\r\n                            [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\r\n                        />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!isHeaderCellCheckbox(cell)\">\r\n                        <ng-template\r\n                            #defaultHeaderCellTemplate\r\n                            let-content\r\n                            let-sortable=\"sortable\"\r\n                            let-sortType=\"sortType\"\r\n                            let-onTriggerSort=\"onTriggerSort\"\r\n                            let-onTriggerResetSort=\"onTriggerResetSort\"\r\n                        >\r\n                            <div\r\n                                class=\"ard-table__header-template-container\"\r\n                                [class.ard-sortable]=\"sortable\"\r\n                                [class.ard-nonsortable]=\"!sortable\"\r\n                            >\r\n                                <button\r\n                                    class=\"ard-table__header-content-container\"\r\n                                    *ngIf=\"sortable\"\r\n                                    (click)=\"onTriggerSort($event)\"\r\n                                    [tabindex]=\"tabIndex\"\r\n                                    (keydown.Esc)=\"onTriggerResetSort($event)\"\r\n                                >\r\n                                    <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                                    <div class=\"ard-table__header-sort-icon\" *ngIf=\"sortType != null\">\r\n                                        <ard-icon *ngIf=\"sortType == 'ascending'\">south</ard-icon>\r\n                                        <ard-icon *ngIf=\"sortType == 'descending'\">north</ard-icon>\r\n                                    </div>\r\n                                </button>\r\n                                <div\r\n                                    class=\"ard-table__header-content-container\"\r\n                                    *ngIf=\"!sortable\"\r\n                                >\r\n                                    <div class=\"ard-table__header-content\">{{ content }}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    \r\n                        <ng-template \r\n                            [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell.header) ?? defaultHeaderCellTemplate\"\r\n                            [ngTemplateOutletContext]=\"getHeaderContext(cell.cell, index)\"\r\n                        />\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n        </tr>\r\n    </thead>\r\n    <tbody class=\"ard-table__body\">\r\n        <ng-container *ngFor=\"let row of dataRows; let rowIndex = index;\">\r\n            <tr *ngIf=\"row.isEmpty\" class=\"ard-table__empty-row\">\r\n                <td class=\"ard-table__empty-cell\" colspan=\"9999\"></td>\r\n            </tr>\r\n            <tr\r\n                *ngIf=\"!row.isEmpty\"\r\n                class=\"ard-table__body-row\"\r\n                [class.ard-table__selected-row]=\"row.selected\"\r\n                [class.ard-table__highlighted-row]=\"row.highlighted\"\r\n                [class.ard-table__disabled-row]=\"row.disabled\"\r\n                [class.ard-table__bold-row]=\"row.bold\"\r\n                (click)=\"onRowClick(rowIndex, $event)\"\r\n                (mouseover)=\"onRowMouseOver($event)\"\r\n                (mouseenter)=\"onRowMouseEnter(rowIndex, $event)\"\r\n                (mouseleave)=\"onRowMouseLeave(rowIndex, $event)\"\r\n            >\r\n                <ng-container *ngFor=\"let cell of row.data; let cellIndex = index\">\r\n                    <ng-template #cellTmp>\r\n                        <div\r\n                            class=\"ard-table__cell-container\"\r\n                            [style]=\"getCellStyle(row.dataColumns[cellIndex])\"\r\n                        >\r\n                            <ng-container *ngIf=\"isCellCheckbox(cell)\">\r\n                                <ng-template #defaultCheckboxTemplate let-isChecked let-onChange=\"onChange\" let-disabled=\"disabled\">\r\n                                    <ard-checkbox [tabIndex]=\"isLoading ? -1 : tabIndex\" [selected]=\"isChecked\" [color]=\"color\" [disabled]=\"disabled\" (change)=\"onChange()\" (click)=\"$event.stopPropagation()\" />\r\n                                </ng-template>\r\n\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"checkboxTemplate ?? defaultCheckboxTemplate\"\r\n                                    [ngTemplateOutletContext]=\"getCheckboxContext(rowIndex)\"\r\n                                />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!isCellCheckbox(cell)\">\r\n                                <ng-template #defaultCellTemplate let-content>\r\n                                    {{ content }}\r\n                                </ng-template>\r\n\r\n                                <ng-template\r\n                                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns[cellIndex].template) ?? defaultCellTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\r\n                                />\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                    <td\r\n                        *ngIf=\"!row.dataColumns[cellIndex].isRowHeader\"\r\n                        class=\"ard-table__body-cell\"\r\n                        [ngClass]=\"row.dataColumns[cellIndex].cellClass\"\r\n                        [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n                    >\r\n                        <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n                    </td>\r\n                    <th\r\n                        *ngIf=\"row.dataColumns[cellIndex].isRowHeader\"\r\n                        class=\"ard-table__body-cell ard-table__row-header\"\r\n                        scope=\"row\"\r\n                        [ngClass]=\"row.dataColumns[cellIndex].cellClass\"\r\n                        [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\r\n                    >\r\n                        <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\r\n                    </th>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-container>\r\n    </tbody>\r\n    <tfoot class=\"ard-table__foot\" *ngIf=\"canDisplayPagination\">\r\n        <tr class=\"ard-table__foot-row\">\r\n            <td class=\"ard-table__pagination-cell\" colspan=\"9999\">\r\n                <ard-table-pagination\r\n                    [options]=\"paginationOptions\"\r\n                    [(page)]=\"page\"\r\n                    [totalItems]=\"totalItems\"\r\n                    [disabled]=\"paginationDisabled\"\r\n                    [(itemsPerPage)]=\"itemsPerPage\"\r\n                    [align]=\"paginationAlign\"\r\n                    [isLoading]=\"isLoading\"\r\n                    [itemsPerPageText]=\"itemsPerPageText\"\r\n                    [currentItemsFormatFn]=\"currentItemsFormatFn\"\r\n                    (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n                    (pageChange)=\"pageChange.emit($event)\"\r\n                ></ard-table-pagination>\r\n            </td>\r\n        </tr>\r\n    </tfoot>\r\n</table>", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"] }]
         }], propDecorators: { rowDisabledFrom: [{
@@ -12814,11 +12814,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumTablePaginationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationModule, declarations: [ArdiumTablePaginationComponent], imports: [CommonModule, ArdiumSelectModule, ArdiumIconButtonModule, ArdiumIconModule], exports: [ArdiumTablePaginationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationModule, imports: [CommonModule, ArdiumSelectModule, ArdiumIconButtonModule, ArdiumIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationModule, declarations: [ArdiumTablePaginationComponent], imports: [CommonModule, ArdiumSelectModule, ArdiumIconButtonModule, ArdiumIconModule], exports: [ArdiumTablePaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationModule, imports: [CommonModule, ArdiumSelectModule, ArdiumIconButtonModule, ArdiumIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTablePaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTablePaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumTablePaginationComponent],
@@ -12828,8 +12828,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
         }] });
 
 class ArdiumTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableModule, declarations: [ArdiumTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableModule, declarations: [ArdiumTableComponent,
             ArdiumTableTemplateDirective,
             ArdiumTableCheckboxTemplateDirective,
             ArdiumTableHeaderCheckboxTemplateDirective,
@@ -12840,9 +12840,9 @@ class ArdiumTableModule {
             ArdiumTableHeaderCheckboxTemplateDirective,
             ArdiumTableCaptionTemplateDirective,
             ArdiumTablePaginationTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableModule, imports: [CommonModule, ArdiumCheckboxModule, ArdiumTablePaginationModule, ArdiumIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableModule, imports: [CommonModule, ArdiumCheckboxModule, ArdiumTablePaginationModule, ArdiumIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -12914,10 +12914,10 @@ class ArdiumTableFromCsvComponent {
         }
         return dataRows;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableFromCsvComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumTableFromCsvComponent, selector: "ard-table-from-csv", inputs: { separator: "separator", data: "data" }, ngImport: i0, template: "<ard-table\r\n    treatDataSourceAsString\r\n    [columns]=\"headers\"\r\n    [data]=\"dataRows\"\r\n></ard-table>", dependencies: [{ kind: "component", type: ArdiumTableComponent, selector: "ard-table", inputs: ["rowDisabledFrom", "rowBoldFrom", "invertRowDisabled", "invertRowBold", "selectableRows", "caption", "isLoading", "loadingProgress", "appearance", "variant", "color", "align", "headerAlign", "compact", "zebra", "stickyHeader", "paginated", "paginationStrategy", "paginationOptions", "totalItems", "paginationColor", "paginationAlign", "itemsPerPageText", "currentItemsFormatFn", "pageFillRemaining", "paginationDisabled", "useFirstLastButtons", "itemsPerPage", "page", "columns", "data", "treatDataSourceAsString"], outputs: ["itemsPerPageChange", "pageChange", "selectedRowsChange", "failedSelectRow", "selectRow", "unselectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableFromCsvComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumTableFromCsvComponent, selector: "ard-table-from-csv", inputs: { separator: "separator", data: "data" }, ngImport: i0, template: "<ard-table\r\n    treatDataSourceAsString\r\n    [columns]=\"headers\"\r\n    [data]=\"dataRows\"\r\n></ard-table>", dependencies: [{ kind: "component", type: ArdiumTableComponent, selector: "ard-table", inputs: ["rowDisabledFrom", "rowBoldFrom", "invertRowDisabled", "invertRowBold", "selectableRows", "caption", "isLoading", "loadingProgress", "appearance", "variant", "color", "align", "headerAlign", "compact", "zebra", "stickyHeader", "paginated", "paginationStrategy", "paginationOptions", "totalItems", "paginationColor", "paginationAlign", "itemsPerPageText", "currentItemsFormatFn", "pageFillRemaining", "paginationDisabled", "useFirstLastButtons", "itemsPerPage", "page", "columns", "data", "treatDataSourceAsString"], outputs: ["itemsPerPageChange", "pageChange", "selectedRowsChange", "failedSelectRow", "selectRow", "unselectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableFromCsvComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableFromCsvComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-table-from-csv', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-table\r\n    treatDataSourceAsString\r\n    [columns]=\"headers\"\r\n    [data]=\"dataRows\"\r\n></ard-table>" }]
         }], propDecorators: { separator: [{
@@ -12927,11 +12927,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumTableFromCsvModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableFromCsvModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableFromCsvModule, declarations: [ArdiumTableFromCsvComponent], imports: [CommonModule, ArdiumTableModule], exports: [ArdiumTableFromCsvComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableFromCsvModule, imports: [CommonModule, ArdiumTableModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableFromCsvModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableFromCsvModule, declarations: [ArdiumTableFromCsvComponent], imports: [CommonModule, ArdiumTableModule], exports: [ArdiumTableFromCsvComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableFromCsvModule, imports: [CommonModule, ArdiumTableModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumTableFromCsvModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumTableFromCsvModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumTableFromCsvComponent],
@@ -13039,10 +13039,10 @@ class ArdiumBadgeDirective {
         }
         this._renderer.removeClass(this._el.nativeElement, 'ard-badge-host');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumBadgeDirective, selector: "[ardBadge]", inputs: { text: ["ardBadge", "text"], color: ["ardBadgeColor", "color"], variant: ["ardBadgeVariant", "variant"], size: ["ardBadgeSize", "size"], position: ["ardBadgePosition", "position"], ariaLabel: ["ardBadgeAriaLabel", "ariaLabel"], hidden: ["ardBadgeHidden", "hidden"], overlap: ["ardBadgeOverlap", "overlap"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumBadgeDirective, selector: "[ardBadge]", inputs: { text: ["ardBadge", "text"], color: ["ardBadgeColor", "color"], variant: ["ardBadgeVariant", "variant"], size: ["ardBadgeSize", "size"], position: ["ardBadgePosition", "position"], ariaLabel: ["ardBadgeAriaLabel", "ariaLabel"], hidden: ["ardBadgeHidden", "hidden"], overlap: ["ardBadgeOverlap", "overlap"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ardBadge]',
@@ -13074,11 +13074,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumBadgeModule, declarations: [ArdiumBadgeDirective], imports: [CommonModule], exports: [ArdiumBadgeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumBadgeModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumBadgeModule, declarations: [ArdiumBadgeDirective], imports: [CommonModule], exports: [ArdiumBadgeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumBadgeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumBadgeDirective],
@@ -13095,10 +13095,10 @@ class ArdiumSpinnerComponent {
     get ngClasses() {
         return [`ard-color-${this.color}`].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumSpinnerComponent, selector: "ard-spinner", inputs: { color: "color" }, ngImport: i0, template: "<svg class=\"ard-spinner\" [ngClass]=\"ngClasses\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <circle class=\"ard-spinner-circle\" cx=\"50\" cy=\"50\" r=\"20\"></circle>\r\n</svg>", styles: [".ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumSpinnerComponent, selector: "ard-spinner", inputs: { color: "color" }, ngImport: i0, template: "<svg class=\"ard-spinner\" [ngClass]=\"ngClasses\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <circle class=\"ard-spinner-circle\" cx=\"50\" cy=\"50\" r=\"20\"></circle>\r\n</svg>", styles: [".ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-spinner', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"ard-spinner\" [ngClass]=\"ngClasses\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <circle class=\"ard-spinner-circle\" cx=\"50\" cy=\"50\" r=\"20\"></circle>\r\n</svg>", styles: [".ard-spinner{animation:rotator var(--ard-_spinner-duration) linear infinite}@keyframes rotator{to{transform:rotate(360deg)}}.ard-spinner-circle{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash var(--ard-_spinner-duration) ease-in-out infinite 0s;stroke-linecap:round;fill:none;stroke-width:3}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:75,200;stroke-dashoffset:-35}to{stroke-dasharray:75,200;stroke-dashoffset:-124}}\n"] }]
         }], propDecorators: { color: [{
@@ -13106,11 +13106,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumSpinnerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSpinnerModule, declarations: [ArdiumSpinnerComponent], imports: [CommonModule], exports: [ArdiumSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSpinnerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSpinnerModule, declarations: [ArdiumSpinnerComponent], imports: [CommonModule], exports: [ArdiumSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumSpinnerComponent],
@@ -13511,8 +13511,8 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
             throw new Error(`ARD-FT040: <ard-digit-input>'s [config] field has to be defined.`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDigitInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: ArdiumDigitInputComponent, selector: "ard-digit-input", inputs: { appearance: "appearance", variant: "variant", shape: "shape", compact: "compact", config: "config", outputAsString: "outputAsString", value: "value" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", finishedValue: "finishedValue", focusIndexEvent: "focusIndex", blurIndexEvent: "blurIndex" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDigitInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ArdiumDigitInputComponent, selector: "ard-digit-input", inputs: { appearance: "appearance", variant: "variant", shape: "shape", compact: "compact", config: "config", outputAsString: "outputAsString", value: "value" }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", finishedValue: "finishedValue", focusIndexEvent: "focusIndex", blurIndexEvent: "blurIndex" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumDigitInputComponent),
@@ -13520,7 +13520,7 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
             },
         ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ard-digit-input\" [ngClass]=\"ngClasses\">\r\n    <div class=\"ard-digit-input__item\" *ngFor=\"let data of configArrayData\">\r\n        <input\r\n            #input\r\n            #focusableElement\r\n            *ngIf=\"data.type == 'input'\"\r\n            class=\"ard-digit-input__input\"\r\n            type=\"text\"\r\n            autocomplete=\"off\"\r\n            [readonly]=\"data.readonly\"\r\n            [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n            [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n            (paste)=\"onPaste($event, data.index!)\"\r\n            (input)=\"onInput($event, data.index!)\"\r\n            (focus)=\"onFocusMaster($event, data.index!)\"\r\n            (blur)=\"onBlurMaster($event, data.index!)\"\r\n            (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n        <div\r\n            *ngIf=\"data.type == 'static'\"\r\n            class=\"ard-digit-input__static\"\r\n        >\r\n            {{ data.char }}\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-digit-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -13565,11 +13565,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumDigitInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDigitInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDigitInputModule, declarations: [ArdiumDigitInputComponent], imports: [CommonModule], exports: [ArdiumDigitInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDigitInputModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDigitInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDigitInputModule, declarations: [ArdiumDigitInputComponent], imports: [CommonModule], exports: [ArdiumDigitInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDigitInputModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDigitInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDigitInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumDigitInputComponent],
@@ -13652,10 +13652,10 @@ class ArdiumModalComponent {
     onCloseButtonClick(event) {
         this._destroyOverlay();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumModalComponent, deps: [{ token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: ArdiumModalComponent, selector: "ard-modal", inputs: { appearance: "appearance", variant: "variant", compact: "compact", heading: "heading", _noCloseButton: ["noCloseButton", "_noCloseButton"], _noBackdrop: ["noBackdrop", "_noBackdrop"], _disableBackdropClose: ["disableBackdropClose", "_disableBackdropClose"], open: "open" }, outputs: { openChange: "openChange", closeEvent: "close" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n    @if (noBackdrop()) {\r\n        <div class=\"ard-modal\" [ngClass]=\"ngClasses\" (click)=\"onBackdropClick($event)\">\r\n            <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n        </div>\r\n    } @else {\r\n        <div class=\"ard-modal ard-modal-backdrop\" [ngClass]=\"ngClasses\" (click)=\"onBackdropClick($event)\">\r\n            <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n    <div\r\n        class=\"ard-modal-panel\"\r\n        [class.ard-modal-no-heading-text]=\"!heading\"\r\n        [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        cdkTrapFocus\r\n    >\r\n        <div class=\"ard-modal-heading\">\r\n            <div class=\"ard-modal-heading-text\">{{heading}}</div>\r\n            @if (!noCloseButton()) {\r\n                <ard-icon-button class=\"ard-modal-close-button\" color=\"none\" [compact]=\"compact\" (click)=\"onCloseButtonClick($event)\">\r\n                    <ard-icon>close</ard-icon>\r\n                </ard-icon-button>\r\n            }\r\n        </div>\r\n        <div class=\"ard-modal-content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "color", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumModalComponent, deps: [{ token: i1$1.Overlay }, { token: i1$1.ScrollStrategyOptions }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: ArdiumModalComponent, selector: "ard-modal", inputs: { appearance: "appearance", variant: "variant", compact: "compact", heading: "heading", _noCloseButton: ["noCloseButton", "_noCloseButton"], _noBackdrop: ["noBackdrop", "_noBackdrop"], _disableBackdropClose: ["disableBackdropClose", "_disableBackdropClose"], open: "open" }, outputs: { openChange: "openChange", closeEvent: "close" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n    @if (noBackdrop()) {\r\n        <div class=\"ard-modal\" [ngClass]=\"ngClasses\" (click)=\"onBackdropClick($event)\">\r\n            <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n        </div>\r\n    } @else {\r\n        <div class=\"ard-modal ard-modal-backdrop\" [ngClass]=\"ngClasses\" (click)=\"onBackdropClick($event)\">\r\n            <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n    <div\r\n        class=\"ard-modal-panel\"\r\n        [class.ard-modal-no-heading-text]=\"!heading\"\r\n        [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        cdkTrapFocus\r\n    >\r\n        <div class=\"ard-modal-heading\">\r\n            <div class=\"ard-modal-heading-text\">{{heading}}</div>\r\n            @if (!noCloseButton()) {\r\n                <ard-icon-button class=\"ard-modal-close-button\" color=\"none\" [compact]=\"compact\" (click)=\"onCloseButtonClick($event)\">\r\n                    <ard-icon>close</ard-icon>\r\n                </ard-icon-button>\r\n            }\r\n        </div>\r\n        <div class=\"ard-modal-content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "color", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\r\n    @if (noBackdrop()) {\r\n        <div class=\"ard-modal\" [ngClass]=\"ngClasses\" (click)=\"onBackdropClick($event)\">\r\n            <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n        </div>\r\n    } @else {\r\n        <div class=\"ard-modal ard-modal-backdrop\" [ngClass]=\"ngClasses\" (click)=\"onBackdropClick($event)\">\r\n            <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n    <div\r\n        class=\"ard-modal-panel\"\r\n        [class.ard-modal-no-heading-text]=\"!heading\"\r\n        [class.ard-modal-has-close-button]=\"!this.noCloseButton()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        cdkTrapFocus\r\n    >\r\n        <div class=\"ard-modal-heading\">\r\n            <div class=\"ard-modal-heading-text\">{{heading}}</div>\r\n            @if (!noCloseButton()) {\r\n                <ard-icon-button class=\"ard-modal-close-button\" color=\"none\" [compact]=\"compact\" (click)=\"onCloseButtonClick($event)\">\r\n                    <ard-icon>close</ard-icon>\r\n                </ard-icon-button>\r\n            }\r\n        </div>\r\n        <div class=\"ard-modal-content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".ard-modal-content{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i1$1.ScrollStrategyOptions }, { type: i0.ViewContainerRef }], propDecorators: { appearance: [{
@@ -13688,11 +13688,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumModalModule, declarations: [ArdiumModalComponent], imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule], exports: [ArdiumModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumModalModule, imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumModalModule, declarations: [ArdiumModalComponent], imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule], exports: [ArdiumModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumModalModule, imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumModalComponent],
@@ -13705,10 +13705,10 @@ class ArdDialogButtonsTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDialogButtonsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: ArdDialogButtonsTemplateDirective, selector: "ard-dialog > ng-template[ard-buttons-tmp]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDialogButtonsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ArdDialogButtonsTemplateDirective, selector: "ard-dialog > ng-template[ard-buttons-tmp]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdDialogButtonsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdDialogButtonsTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ard-dialog > ng-template[ard-buttons-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -13811,10 +13811,10 @@ class ArdiumDialogComponent {
             dialogCompact: this.compact,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { appearance: "appearance", variant: "variant", compact: "compact", heading: "heading", _noCloseButton: ["noCloseButton", "_noCloseButton"], _noBackdrop: ["noBackdrop", "_noBackdrop"], _disableBackdropClose: ["disableBackdropClose", "_disableBackdropClose"], open: "open", confirmButtonText: "confirmButtonText", confirmButtonColor: "confirmButtonColor", confirmButtonAppearance: "confirmButtonAppearance", rejectButtonText: "rejectButtonText", rejectButtonColor: "rejectButtonColor", rejectButtonAppearance: "rejectButtonAppearance", _noRejectButton: ["noRejectButton", "_noRejectButton"], _canConfirm: ["canConfirm", "_canConfirm"] }, outputs: { openChange: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: 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    (openChange)=\"openChange.emit($event)\"\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 #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) {<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                    <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 ?? defaultButtonsTemplate\"\r\n                [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n            ></ng-template>\r\n        </div>\r\n    </div>\r\n</ard-modal>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "alignIcon", "vertical", "icon"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { appearance: "appearance", variant: "variant", compact: "compact", heading: "heading", _noCloseButton: ["noCloseButton", "_noCloseButton"], _noBackdrop: ["noBackdrop", "_noBackdrop"], _disableBackdropClose: ["disableBackdropClose", "_disableBackdropClose"], open: "open", confirmButtonText: "confirmButtonText", confirmButtonColor: "confirmButtonColor", confirmButtonAppearance: "confirmButtonAppearance", rejectButtonText: "rejectButtonText", rejectButtonColor: "rejectButtonColor", rejectButtonAppearance: "rejectButtonAppearance", _noRejectButton: ["noRejectButton", "_noRejectButton"], _canConfirm: ["canConfirm", "_canConfirm"] }, outputs: { openChange: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: 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    (openChange)=\"openChange.emit($event)\"\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 #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) {<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                    <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 ?? defaultButtonsTemplate\"\r\n                [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n            ></ng-template>\r\n        </div>\r\n    </div>\r\n</ard-modal>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "alignIcon", "vertical", "icon"] }, { 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: "17.0.7", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\r\n    [appearance]=\"appearance\"\r\n    [variant]=\"variant\"\r\n    [compact]=\"compact\"\r\n    [heading]=\"heading\"\r\n    [noCloseButton]=\"noCloseButton()\"\r\n    [noBackdrop]=\"noBackdrop()\"\r\n    [disableBackdropClose]=\"disableBackdropClose()\"\r\n    [(open)]=\"open\"\r\n    (openChange)=\"openChange.emit($event)\"\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 #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) {<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                    <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 ?? defaultButtonsTemplate\"\r\n                [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n            ></ng-template>\r\n        </div>\r\n    </div>\r\n</ard-modal>" }]
         }], propDecorators: { appearance: [{
@@ -13871,11 +13871,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
             }] } });
 
 class ArdiumDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDialogModule, declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective], imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule], exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDialogModule, imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDialogModule, declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective], imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule], exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDialogModule, imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective],
@@ -14053,10 +14053,10 @@ class _ArdSimpleSnackbar {
     get colorClass() {
         return `ard-color-${this.color}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: _ArdSimpleSnackbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: _ArdSimpleSnackbar, isStandalone: true, selector: "_ard-simple-snackbar", ngImport: i0, template: "<div class=\"ard-snackbar\" [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\" [class]=\"colorClass\">\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 class=\"ard-snackbar-action\" appearance=\"transparent\" lightColoring [color]=\"color\" (click)=\"closeWithAction()\">{{ data.action }}</ard-button>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "alignIcon", "vertical", "icon"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ArdSimpleSnackbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: _ArdSimpleSnackbar, isStandalone: true, selector: "_ard-simple-snackbar", ngImport: i0, template: "<div class=\"ard-snackbar\" [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\" [class]=\"colorClass\">\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 class=\"ard-snackbar-action\" appearance=\"transparent\" lightColoring [color]=\"color\" (click)=\"closeWithAction()\">{{ data.action }}</ard-button>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "alignIcon", "vertical", "icon"] }, { 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: "17.0.7", ngImport: i0, type: _ArdSimpleSnackbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: _ArdSimpleSnackbar, decorators: [{
             type: Component,
             args: [{ selector: '_ard-simple-snackbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArdiumButtonModule, AsyncPipe, ArdiumIconModule], standalone: true, template: "<div class=\"ard-snackbar\" [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\" [class]=\"colorClass\">\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 class=\"ard-snackbar-action\" appearance=\"transparent\" lightColoring [color]=\"color\" (click)=\"closeWithAction()\">{{ data.action }}</ard-button>\r\n    }\r\n</div>" }]
         }] });
@@ -14285,10 +14285,10 @@ class ArdiumSnackbarService {
             ],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSnackbarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSnackbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: ArdiumSnackbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ArdiumSnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',