@ardium-ui/ui 3.6.0 → 4.0.0

package/fesm2022/ardium-ui-ui.mjs

@@ -7936,7 +7936,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-checkbox\"\n  role=\"checkbox\"\n  type=\"button\"\n  [id]=\"htmlId()\"\n  [ariaChecked]=\"selected()\"\n  [tabindex]=\"tabIndex()\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"toggleState()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\n</button>\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -7946,7 +7946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  class=\"ard-checkbox\"\n  role=\"checkbox\"\n  type=\"button\"\n  [id]=\"htmlId()\"\n  [ariaChecked]=\"selected()\"\n  [tabindex]=\"tabIndex()\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"toggleState()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\n</button>\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]
@@ -9704,11 +9704,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const ClickStrategy = {
-    Noop: 'noop',
-    Default: 'default',
-};
-
 const StarFillMode = {
     /**
      * The star is not filled, just an outline.
@@ -9726,15 +9721,48 @@ const StarFillMode = {
 const StarColor = {
     ...SimpleComponentColor,
     /**
-     * THe app's color set for all stars. Usually gold or yellow-gold.
+     * The app's color set for all stars. Usually gold or yellow-gold.
      */
-    Star: 'star',
+    Gold: 'gold',
+};
+
+const _ratingInputDefaults = {
+    ..._ngModelComponentDefaults,
+    color: StarColor.Gold,
+    max: 5,
+};
+const ARD_RATING_INPUT_DEFAULTS = new InjectionToken('ard-rating-input-defaults', {
+    factory: () => ({
+        ..._ratingInputDefaults,
+    }),
+});
+function provideRatingInputDefaults(config) {
+    return { provide: ARD_RATING_INPUT_DEFAULTS, useValue: { ..._ratingInputDefaults, ...config } };
+}
+
+class ArdRatingInputStarButtonTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingInputStarButtonTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdRatingInputStarButtonTemplateDirective, selector: "ard-rating-input > ng-template[ard-star-button-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingInputStarButtonTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-rating-input > ng-template[ard-star-button-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const ClickStrategy = {
+    Noop: 'noop',
+    Default: 'default',
 };
 
 const _starButtonDefaults = {
     ..._booleanComponentDefaults,
     clickStrategy: ClickStrategy.Default,
-    color: StarColor.Star,
+    color: StarColor.Gold,
 };
 const ARD_STAR_BUTTON_DEFAULTS = new InjectionToken('ard-star-button-defaults', {
     factory: () => ({
@@ -9745,8 +9773,22 @@ function provideStarButtonDefaults(config) {
     return { provide: ARD_STAR_BUTTON_DEFAULTS, useValue: { ..._starButtonDefaults, ...config } };
 }
 
+class ArdStarButtonStarTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarButtonStarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdStarButtonStarTemplateDirective, selector: "ard-star-button > ng-template[ard-star-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarButtonStarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-star-button > ng-template[ard-star-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 const _starDefaults = {
-    color: StarColor.Star,
+    color: StarColor.Gold,
     filled: StarFillMode.None,
 };
 const ARD_STAR_DEFAULTS = new InjectionToken('ard-star-defaults', {
@@ -9758,6 +9800,20 @@ function provideStarDefaults(config) {
     return { provide: ARD_STAR_DEFAULTS, useValue: { ..._starDefaults, ...config } };
 }
 
+class ArdStarIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdStarIconTemplateDirective, selector: "ard-star > ng-template[ard-star-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdStarIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-star > ng-template[ard-star-icon-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 class ArdiumStarComponent {
     constructor() {
         this.wrapperClasses = input('');
@@ -9768,16 +9824,22 @@ class ArdiumStarComponent {
             transform: this._transformFillMode,
         });
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color()}`, `ard-star-fill-${this.filled()}`].join(' '));
+        //! template
+        this.iconTemplate = contentChild(ArdStarIconTemplateDirective);
+        this.iconTemplateContext = computed(() => ({ $implicit: this.filled() }));
     }
     _transformFillMode(value) {
-        return typeof value === 'boolean' ? (value ? StarFillMode.Filled : StarFillMode.None) : value;
+        if (value === StarFillMode.None || value === StarFillMode.Half || value === StarFillMode.Filled) {
+            return value;
+        }
+        return coerceBooleanProperty(value) ? StarFillMode.Filled : StarFillMode.None;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-star-icon ard-star-selected\"></div>\n  <div class=\"ard-star-icon ard-star-half\"></div>\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarComponent, selector: "ard-star", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ArdStarIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultIconTemplate\r\n    let-fillMode\r\n  >\r\n    @if (fillMode === 'filled') {\r\n      <ard-icon filled>star</ard-icon>\r\n    } @else if (fillMode === 'half') {\r\n      <ard-icon>star-half</ard-icon>\r\n    } @else {\r\n      <ard-icon>star</ard-icon>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\r\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\r\n  />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-star-icon ard-star-selected\"></div>\n  <div class=\"ard-star-icon ard-star-half\"></div>\n  <div class=\"ard-star-icon ard-star-unselected\"></div>\n</div>\n" }]
+            args: [{ selector: 'ard-star', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-star\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultIconTemplate\r\n    let-fillMode\r\n  >\r\n    @if (fillMode === 'filled') {\r\n      <ard-icon filled>star</ard-icon>\r\n    } @else if (fillMode === 'half') {\r\n      <ard-icon>star-half</ard-icon>\r\n    } @else {\r\n      <ard-icon>star</ard-icon>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"iconTemplate()?.template || defaultIconTemplate\"\r\n    [ngTemplateOutletContext]=\"iconTemplateContext()\"\r\n  />\r\n</div>\r\n" }]
         }] });
 
 class ArdiumStarButtonComponent extends _BooleanComponentBase {
@@ -9789,6 +9851,13 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color}`].join(' '));
         this.starFillState = computed(() => (this.selected() ? StarFillMode.Filled : StarFillMode.None));
+        //! template
+        this.starTemplate = contentChild(ArdStarButtonStarTemplateDirective);
+        this.starTemplateContext = computed(() => ({
+            $implicit: this.starFillState(),
+            fillMode: this.starFillState(),
+            color: this.color(),
+        }));
     }
     onClick() {
         if (this.clickStrategy() === ClickStrategy.Noop)
@@ -9796,13 +9865,13 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
         this.toggleSelected();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonComponent, deps: [{ token: ARD_STAR_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, clickStrategy: { classPropertyName: "clickStrategy", publicName: "clickStrategy", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, clickStrategy: { classPropertyName: "clickStrategy", publicName: "clickStrategy", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumStarButtonComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-star\n    [filled]=\"starFillState()\"\n    [color]=\"color()\"\n  ></ard-star>\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "starTemplate", first: true, predicate: ArdStarButtonStarTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-star-button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultStarTemplate\r\n    let-fillMode=\"fillMode\"\r\n    let-color=\"color\"\r\n  >\r\n    <ard-star\r\n      [filled]=\"fillMode\"\r\n      [color]=\"color\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: [".ard-star-button{border:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
             type: Component,
@@ -9812,55 +9881,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumStarButtonComponent),
                             multi: true,
                         },
-                    ], template: "<button\n  #focusableElement\n  type=\"button\"\n  class=\"ard-star-button\"\n  [ngClass]=\"ngClasses()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-hitbox\"></div>\n  <div class=\"ard-focus-overlay\"></div>\n  <ard-star\n    [filled]=\"starFillState()\"\n    [color]=\"color()\"\n  ></ard-star>\n</button>\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
+                    ], template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-star-button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultStarTemplate\r\n    let-fillMode=\"fillMode\"\r\n    let-color=\"color\"\r\n  >\r\n    <ard-star\r\n      [filled]=\"fillMode\"\r\n      [color]=\"color\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: [".ard-star-button{border:none;background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_STAR_BUTTON_DEFAULTS]
                 }] }] });
 
-class ArdiumStarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, declarations: [ArdiumStarComponent], imports: [CommonModule], exports: [ArdiumStarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ArdiumStarComponent],
-                    imports: [CommonModule],
-                    exports: [ArdiumStarComponent],
-                }]
-        }] });
-
-class ArdiumStarButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, declarations: [ArdiumStarButtonComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, imports: [CommonModule, ArdiumStarModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ArdiumStarButtonComponent],
-                    imports: [CommonModule, ArdiumStarModule],
-                    exports: [ArdiumStarButtonComponent],
-                }]
-        }] });
-
-const _starInputDefaults = {
-    ..._ngModelComponentDefaults,
-    color: StarColor.Star,
-    max: 5,
-};
-const ARD_STAR_INPUT_DEFAULTS = new InjectionToken('ard-star-input-defaults', {
-    factory: () => ({
-        ..._starInputDefaults,
-    }),
-});
-function provideStarInputDefaults(config) {
-    return { provide: ARD_STAR_INPUT_DEFAULTS, useValue: { ..._starInputDefaults, ...config } };
-}
-
-class ArdiumStarInputComponent extends _NgModelComponentBase {
+class ArdiumRatingInputComponent extends _NgModelComponentBase {
     constructor(defaults) {
         super(defaults);
         this.wrapperClasses = input('');
@@ -9868,35 +9895,38 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color()}`].join(' '));
         //! events
-        this.changeEvent = output({ alias: 'change' });
         this.highlightEvent = output({ alias: 'highlight' });
-        this.value = model(0);
+        this.value = model(null);
         //! stars
         this.max = input(this._DEFAULTS.max, { transform: v => coerceNumberProperty(v, this._DEFAULTS.max) });
         this.starButtonInstances = viewChildren('starButton');
         this._highlightedStarIndex = signal(null);
-        this.starArray = computed(() => {
-            const v = this.value();
-            const max = this.max();
-            const hi = Math.round(this._highlightedStarIndex() ?? -1);
-            const arr = new Array(max);
-            for (let i = 0; i < max; i++) {
-                if (i <= hi) {
-                    arr[i] = { filled: true, isInValue: true };
-                    continue;
-                }
-                if (i < v) {
-                    arr[i] = { filled: hi === -1, isInValue: true };
-                    continue;
-                }
-                arr[i] = { filled: false, isInValue: false };
-            }
-            return arr;
-        });
+        this.starArray = computed(() => new Array(this.max()).fill(0).map((_, i) => i));
         //* focus handlers
         this._isFocusEventSuppressed = false;
         this._isBlurEventSuppressed = false;
         this._currentFocusIndex = null;
+        //! template
+        this.starButtonTemplate = contentChild(ArdRatingInputStarButtonTemplateDirective);
+        this.getStarButtonTemplateContext = computed(() => index => ({
+            color: this.color(),
+            index,
+            highlightedIndex: this._highlightedStarIndex() ?? -1,
+            valueIndex: (this.value() ?? 0) - 1,
+            tabIndex: this.tabIndex(),
+            onClick: () => {
+                this.onStarClick(index);
+            },
+            onFocus: (event) => {
+                this.onStarButtonFocus(event, index);
+            },
+            onBlur: (event) => {
+                this.onStarButtonBlur(event);
+            },
+            onHighlight: () => {
+                this.onStarHighlight(index);
+            },
+        }));
         effect(() => {
             const hi = this._highlightedStarIndex();
             if (hi !== null) {
@@ -9923,9 +9953,8 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
     }
     _emitChange() {
         this._onChangeRegistered?.(this.value());
-        this.changeEvent.emit(this.value());
     }
-    onStarButtonFocus(index, event) {
+    onStarButtonFocus(event, index) {
         this._currentFocusIndex = index;
         if (this._isFocusEventSuppressed) {
             this._isFocusEventSuppressed = false;
@@ -10014,43 +10043,71 @@ class ArdiumStarInputComponent extends _NgModelComponentBase {
     _onTabPress() {
         this.focusStarButtonByIndex(this.max() - 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputComponent, deps: [{ token: ARD_STAR_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarInputComponent, selector: "ard-star-input", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEvent: "change", highlightEvent: "highlight", value: "valueChange" }, host: { listeners: { "keydown": "onKeyPress($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputComponent, deps: [{ token: ARD_RATING_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumRatingInputComponent, selector: "ard-rating-input", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlightEvent: "highlight", value: "valueChange" }, host: { listeners: { "keydown": "onKeyPress($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ArdiumStarInputComponent),
+                useExisting: forwardRef(() => ArdiumRatingInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-star-input\"\n  [ngClass]=\"ngClasses()\"\n  (mouseleave)=\"setDisplayToValue()\"\n>\n  @for (object of starArray(); track $index) {\n    <ard-star-button\n      #starButton\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\n      [color]=\"object.isInValue ? color() : 'none'\"\n      clickStrategy=\"noop\"\n      [selected]=\"object.filled\"\n      (click)=\"onStarClick($index)\"\n      (focus)=\"onStarButtonFocus($index, $event)\"\n      (blur)=\"onStarButtonBlur($event)\"\n      (mouseenter)=\"onStarHighlight($index)\"\n      [tabIndex]=\"tabIndex()\"\n    />\n  }\n</div>\n", styles: [".ard-star-input{width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "starButtonTemplate", first: true, predicate: ArdRatingInputStarButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-rating-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n  <ng-template\r\n    #defaultStarButtonTemplate\r\n    let-color=\"color\"\r\n    let-index=\"index\"\r\n    let-highlightedIndex=\"highlightedIndex\"\r\n    let-valueIndex=\"valueIndex\"\r\n    let-tabIndex=\"tabIndex\"\r\n    let-onClick=\"onClick\"\r\n    let-onFocus=\"onFocus\"\r\n    let-onBlur=\"onBlur\"\r\n    let-onHighlight=\"onHighlight\"\r\n  >\r\n    <ard-star-button\r\n      #starButton\r\n      [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n      [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n      clickStrategy=\"noop\"\r\n      [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n      (click)=\"onClick()\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (mouseenter)=\"onHighlight()\"\r\n      [tabIndex]=\"tabIndex\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (index of starArray(); track index) {\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n    [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n  />\r\n  <input\r\n    type=\"radio\"\r\n    class=\"ard-rating-input__radio\"\r\n    value=\"index\"\r\n    [id]=\"htmlId() + index\"\r\n    tabindex=\"-1\"\r\n  />\r\n  }\r\n</div>\r\n", styles: [".ard-rating-input{width:max-content}.ard-rating-input__radio{appearance:none;opacity:0;position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ard-rating-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ArdiumStarInputComponent),
+                            useExisting: forwardRef(() => ArdiumRatingInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-star-input\"\n  [ngClass]=\"ngClasses()\"\n  (mouseleave)=\"setDisplayToValue()\"\n>\n  @for (object of starArray(); track $index) {\n    <ard-star-button\n      #starButton\n      [class.ard-star-not-in-value]=\"!object.isInValue\"\n      [color]=\"object.isInValue ? color() : 'none'\"\n      clickStrategy=\"noop\"\n      [selected]=\"object.filled\"\n      (click)=\"onStarClick($index)\"\n      (focus)=\"onStarButtonFocus($index, $event)\"\n      (blur)=\"onStarButtonBlur($event)\"\n      (mouseenter)=\"onStarHighlight($index)\"\n      [tabIndex]=\"tabIndex()\"\n    />\n  }\n</div>\n", styles: [".ard-star-input{width:max-content}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-rating-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n  <ng-template\r\n    #defaultStarButtonTemplate\r\n    let-color=\"color\"\r\n    let-index=\"index\"\r\n    let-highlightedIndex=\"highlightedIndex\"\r\n    let-valueIndex=\"valueIndex\"\r\n    let-tabIndex=\"tabIndex\"\r\n    let-onClick=\"onClick\"\r\n    let-onFocus=\"onFocus\"\r\n    let-onBlur=\"onBlur\"\r\n    let-onHighlight=\"onHighlight\"\r\n  >\r\n    <ard-star-button\r\n      #starButton\r\n      [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n      [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n      clickStrategy=\"noop\"\r\n      [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n      (click)=\"onClick()\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (mouseenter)=\"onHighlight()\"\r\n      [tabIndex]=\"tabIndex\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (index of starArray(); track index) {\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n    [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n  />\r\n  <input\r\n    type=\"radio\"\r\n    class=\"ard-rating-input__radio\"\r\n    value=\"index\"\r\n    [id]=\"htmlId() + index\"\r\n    tabindex=\"-1\"\r\n  />\r\n  }\r\n</div>\r\n", styles: [".ard-rating-input{width:max-content}.ard-rating-input__radio{appearance:none;opacity:0;position:absolute;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: [ARD_STAR_INPUT_DEFAULTS]
+                    args: [ARD_RATING_INPUT_DEFAULTS]
                 }] }], propDecorators: { onKeyPress: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
 
-class ArdiumStarInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, declarations: [ArdiumStarInputComponent], imports: [CommonModule, ArdiumStarButtonModule], exports: [ArdiumStarInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, imports: [CommonModule, ArdiumStarButtonModule] }); }
+class ArdiumStarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, declarations: [ArdiumStarComponent, ArdStarIconTemplateDirective], imports: [CommonModule, ArdiumIconModule], exports: [ArdiumStarComponent, ArdStarIconTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, imports: [CommonModule, ArdiumIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumStarComponent, ArdStarIconTemplateDirective],
+                    imports: [CommonModule, ArdiumIconModule],
+                    exports: [ArdiumStarComponent, ArdStarIconTemplateDirective],
+                }]
+        }] });
+
+class ArdiumStarButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, declarations: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, imports: [CommonModule, ArdiumStarModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective],
+                    imports: [CommonModule, ArdiumStarModule],
+                    exports: [ArdiumStarButtonComponent, ArdStarButtonStarTemplateDirective],
+                }]
+        }] });
+
+class ArdiumRatingInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, declarations: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective], imports: [CommonModule, ArdiumStarButtonModule], exports: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, imports: [CommonModule, ArdiumStarButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumStarInputComponent],
+                    declarations: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective],
                     imports: [CommonModule, ArdiumStarButtonModule],
-                    exports: [ArdiumStarInputComponent],
+                    exports: [ArdiumRatingInputComponent, ArdRatingInputStarButtonTemplateDirective],
                 }]
         }] });
 
@@ -11116,24 +11173,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const _starDisplayDefaults = {
-    color: StarColor.Star,
+const _ratingDisplayDefaults = {
+    color: StarColor.Gold,
     max: 5,
     value: 0,
 };
-const ARD_STAR_DISPLAY_DEFAULTS = new InjectionToken('ard-star-display-defaults', {
+const ARD_RATING_DISPLAY_DEFAULTS = new InjectionToken('ard-rating-display-defaults', {
     factory: () => ({
-        ..._starDisplayDefaults,
+        ..._ratingDisplayDefaults,
     }),
 });
-function provideStarDisplayDefaults(config) {
-    return { provide: ARD_STAR_DISPLAY_DEFAULTS, useValue: { ..._starDisplayDefaults, ...config } };
+function provideRatingDisplayDefaults(config) {
+    return { provide: ARD_RATING_DISPLAY_DEFAULTS, useValue: { ..._ratingDisplayDefaults, ...config } };
 }
 
-class ArdiumStarDisplayComponent {
+class ArdRatingDisplayStarTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingDisplayStarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdRatingDisplayStarTemplateDirective, selector: "ard-rating-display > ng-template[ard-star-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdRatingDisplayStarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-rating-display > ng-template[ard-star-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class ArdiumRatingDisplayComponent {
     constructor() {
         this.wrapperClasses = input('');
-        this._DEFAULTS = inject(ARD_STAR_DISPLAY_DEFAULTS);
+        this._DEFAULTS = inject(ARD_RATING_DISPLAY_DEFAULTS);
         //! appearance
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color}`].join(' '));
@@ -11174,26 +11245,35 @@ class ArdiumStarDisplayComponent {
             }
             return newArr;
         });
+        //! template
+        this.starTemplate = contentChild(ArdRatingDisplayStarTemplateDirective);
+        this.getStarTemplateContext = computed(() => (fillMode, index) => ({
+            $implicit: fillMode,
+            fillMode,
+            index,
+            valueIndex: isNumber(this.value()) ? this.value() - 1 : -1,
+            color: this.color(),
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumStarDisplayComponent, selector: "ard-star-display", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ard-star-display\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (fillMode of starArray(); track $index) {\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color()\"\n    />\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumRatingDisplayComponent, selector: "ard-rating-display", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "starTemplate", first: true, predicate: ArdRatingDisplayStarTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-rating-display\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultStarTemplate\r\n    let-fillMode=\"fillMode\"\r\n    let-color=\"color\"\r\n  >\r\n    <ard-star\r\n      [filled]=\"fillMode\"\r\n      [color]=\"color\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (fillMode of starArray(); track $index) {\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"getStarTemplateContext()(fillMode, $index)\"\r\n  />\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-star-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ard-star-display\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (fillMode of starArray(); track $index) {\n    <ard-star\n      [filled]=\"fillMode\"\n      [color]=\"color()\"\n    />\n  }\n</div>\n" }]
+            args: [{ selector: 'ard-rating-display', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-rating-display\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <ng-template\r\n    #defaultStarTemplate\r\n    let-fillMode=\"fillMode\"\r\n    let-color=\"color\"\r\n  >\r\n    <ard-star\r\n      [filled]=\"fillMode\"\r\n      [color]=\"color\"\r\n    />\r\n  </ng-template>\r\n\r\n  @for (fillMode of starArray(); track $index) {\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n    [ngTemplateOutletContext]=\"getStarTemplateContext()(fillMode, $index)\"\r\n  />\r\n  }\r\n</div>\r\n" }]
         }] });
 
-class ArdiumStarDisplayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, declarations: [ArdiumStarDisplayComponent], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumStarDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, imports: [CommonModule, ArdiumStarModule] }); }
+class ArdiumRatingDisplayModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, declarations: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective], imports: [CommonModule, ArdiumStarModule], exports: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, imports: [CommonModule, ArdiumStarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumStarDisplayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRatingDisplayModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumStarDisplayComponent],
+                    declarations: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective],
                     imports: [CommonModule, ArdiumStarModule],
-                    exports: [ArdiumStarDisplayComponent],
+                    exports: [ArdiumRatingDisplayComponent, ArdRatingDisplayStarTemplateDirective],
                 }]
         }] });
 
@@ -13182,6 +13262,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{ selector: 'ard-dialog > ng-template[ard-buttons-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDialogCloseIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDialogCloseIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDialogCloseIconTemplateDirective, selector: "ard-dialog > ng-template[ard-close-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDialogCloseIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-dialog > ng-template[ard-close-icon-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class ArdModalCloseIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdModalCloseIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdModalCloseIconTemplateDirective, selector: "ard-modal > ng-template[ard-close-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdModalCloseIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-modal > ng-template[ard-close-icon-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class ArdiumModalComponent {
     constructor() {
@@ -13202,12 +13305,16 @@ class ArdiumModalComponent {
         this.disableBackdropClose = input(this._DEFAULTS.disableBackdropClose, {
             transform: v => coerceBooleanProperty(v),
         });
+        this.allActionsDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
         //! open state handling
         this.open = signal(false);
         this.openChange = output();
         this.closeEvent = output({ alias: 'close' });
         //! overlay handling
         this.modalTemplate = viewChild('modalTemplate', { read: TemplateRef });
+        //! templates
+        this.closeIconTemplate = contentChild(ArdModalCloseIconTemplateDirective);
+        this._closeIconTemplate = input(undefined);
     }
     set _open(v) {
         this.open.set(coerceBooleanProperty(v));
@@ -13216,6 +13323,12 @@ class ArdiumModalComponent {
         else
             this._destroyOverlay();
     }
+    openProgrammatically() {
+        this.open.set(true);
+    }
+    closeProgrammatically() {
+        this.open.set(false);
+    }
     _openOverlay() {
         const strategy = this.overlay.position().global();
         const config = new OverlayConfig({
@@ -13237,19 +13350,21 @@ class ArdiumModalComponent {
     }
     //! events
     onBackdropClick() {
-        if (this.disableBackdropClose())
+        if (this.disableBackdropClose() || this.allActionsDisabled())
             return;
         this._destroyOverlay();
     }
     onCloseButtonClick() {
+        if (this.allActionsDisabled())
+            return;
         this._destroyOverlay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumModalComponent, selector: "ard-modal", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\n  @if (noBackdrop()) {\n    <div\n      class=\"ard-modal\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  } @else {\n    <div\n      class=\"ard-modal ard-modal-backdrop\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  }\n</ng-template>\n\n<ng-template #_modalInsidePanel>\n  <div\n    class=\"ard-modal-panel\"\n    cdkTrapFocus\n    [class.ard-modal-no-heading-text]=\"!heading()\"\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"ard-modal-heading\">\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\n      @if (!noCloseButton()) {\n        <ard-icon-button\n          class=\"ard-modal-close-button\"\n          color=\"none\"\n          [compact]=\"compact()\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          <ard-icon>close</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n    <div class=\"ard-modal-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumModalComponent, selector: "ard-modal", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, _closeIconTemplate: { classPropertyName: "_closeIconTemplate", publicName: "_closeIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, queries: [{ propertyName: "closeIconTemplate", first: true, predicate: ArdModalCloseIconTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n  <div\r\n    class=\"ard-modal\"\r\n    [ngClass]=\"ngClasses()\"\r\n    (click)=\"onBackdropClick()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n  </div>\r\n  } @else {\r\n  <div\r\n    class=\"ard-modal ard-modal-backdrop\"\r\n    [ngClass]=\"ngClasses()\"\r\n    (click)=\"onBackdropClick()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading()\"\r\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() || (noCloseButton() ? '' : '&nbsp;') }}</div>\r\n      @if (!noCloseButton()) {\r\n      <ard-icon-button\r\n        class=\"ard-modal-close-button\"\r\n        color=\"none\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"allActionsDisabled()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <ng-template #defaultCloseIconTemplate>\r\n          <ard-icon>close</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"closeIconTemplate()?.template ?? _closeIconTemplate()?.template ?? defaultCloseIconTemplate\"\r\n        />\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\n  @if (noBackdrop()) {\n    <div\n      class=\"ard-modal\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  } @else {\n    <div\n      class=\"ard-modal ard-modal-backdrop\"\n      [ngClass]=\"ngClasses()\"\n      (click)=\"onBackdropClick()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\n    </div>\n  }\n</ng-template>\n\n<ng-template #_modalInsidePanel>\n  <div\n    class=\"ard-modal-panel\"\n    cdkTrapFocus\n    [class.ard-modal-no-heading-text]=\"!heading()\"\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"ard-modal-heading\">\n      <div class=\"ard-modal-heading-text\">{{ heading() }}</div>\n      @if (!noCloseButton()) {\n        <ard-icon-button\n          class=\"ard-modal-close-button\"\n          color=\"none\"\n          [compact]=\"compact()\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          <ard-icon>close</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n    <div class=\"ard-modal-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ard-modal-content{width:100%}\n"] }]
+            args: [{ selector: 'ard-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n  <div\r\n    class=\"ard-modal\"\r\n    [ngClass]=\"ngClasses()\"\r\n    (click)=\"onBackdropClick()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n  </div>\r\n  } @else {\r\n  <div\r\n    class=\"ard-modal ard-modal-backdrop\"\r\n    [ngClass]=\"ngClasses()\"\r\n    (click)=\"onBackdropClick()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading()\"\r\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() || (noCloseButton() ? '' : '&nbsp;') }}</div>\r\n      @if (!noCloseButton()) {\r\n      <ard-icon-button\r\n        class=\"ard-modal-close-button\"\r\n        color=\"none\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"allActionsDisabled()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <ng-template #defaultCloseIconTemplate>\r\n          <ard-icon>close</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"closeIconTemplate()?.template ?? _closeIconTemplate()?.template ?? defaultCloseIconTemplate\"\r\n        />\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"] }]
         }], propDecorators: { _open: [{
                 type: Input,
                 args: [{ alias: 'open' }]
@@ -13274,6 +13389,7 @@ class ArdiumDialogComponent {
             transform: v => coerceBooleanProperty(v),
         });
         this.buttonActionType = input(this._DEFAULTS.buttonActionType);
+        this.allActionsDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
         //! open state handling
         //all handled by modal component
         this.open = model(false);
@@ -13291,6 +13407,7 @@ class ArdiumDialogComponent {
         this.canConfirm = input(this._DEFAULTS.canConfirm, { transform: v => coerceBooleanProperty(v) });
         //! templates
         this.buttonsTemplate = contentChild(ArdDialogButtonsTemplateDirective);
+        this.closeIconTemplate = contentChild(ArdDialogCloseIconTemplateDirective);
         this.getButtonsContext = computed(() => {
             return {
                 confirmButton: {
@@ -13305,6 +13422,7 @@ class ArdiumDialogComponent {
                     appearance: this.rejectButtonAppearance(),
                 },
                 canConfirm: this.canConfirm(),
+                allActionsDisabled: this.allActionsDisabled(),
                 onConfirm: () => this.onConfirmClick(),
                 onReject: () => this.onRejectClick(),
                 dialogAppearance: this.appearance(),
@@ -13313,62 +13431,70 @@ class ArdiumDialogComponent {
             };
         });
     }
+    openProgrammatically() {
+        this.open.set(true);
+    }
+    closeProgrammatically() {
+        this.open.set(false);
+    }
     onConfirmClick() {
-        if (!this.canConfirm())
+        if (!this.canConfirm() || this.allActionsDisabled())
             return;
         if (this.buttonActionType() === ArdDialogActionType.AutoClose) {
             this.open.set(false);
         }
         setTimeout(() => {
-            this.closeEvent.emit('confirm');
             this.confirmEvent.emit();
+            this.closeEvent.emit('confirm');
         }, 0);
     }
     onRejectClick() {
+        if (this.allActionsDisabled())
+            return;
         if (this.buttonActionType() === ArdDialogActionType.AutoClose) {
             this.open.set(false);
         }
         setTimeout(() => {
-            this.closeEvent.emit('reject');
             this.rejectEvent.emit();
+            this.closeEvent.emit('reject');
         }, 0);
     }
     onModalClose() {
         this.closeEvent.emit('close');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</ard-modal>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "open"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDialogComponent, selector: "ard-dialog", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ArdDialogCloseIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [heading]=\"heading()\"\r\n  [noCloseButton]=\"noCloseButton()\"\r\n  [noBackdrop]=\"noBackdrop()\"\r\n  [disableBackdropClose]=\"disableBackdropClose()\"\r\n  [allActionsDisabled]=\"allActionsDisabled()\"\r\n  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\r\n  [_closeIconTemplate]=\"closeIconTemplate()\"\r\n>\r\n  <div class=\"ard-dialog-container\">\r\n    <div class=\"ard-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-dialog-buttons\">\r\n      <ng-template\r\n        #defaultButtonsTemplate\r\n        let-confirmButton=\"confirmButton\"\r\n        let-rejectButton=\"rejectButton\"\r\n        let-canConfirm=\"canConfirm\"\r\n        let-allActionsDisabled=\"allActionsDisabled\"\r\n        let-onConfirm=\"onConfirm\"\r\n        let-onReject=\"onReject\"\r\n        let-dialogVariant=\"dialogVariant\"\r\n        let-dialogCompact=\"dialogCompact\"\r\n      >\r\n        <div class=\"ard-dialog-buttons-container\">\r\n          @if (rejectButton.enabled) {\r\n            <ard-button\r\n              [color]=\"rejectButton.color\"\r\n              [appearance]=\"rejectButton.appearance\"\r\n              [variant]=\"dialogVariant\"\r\n              [compact]=\"dialogCompact\"\r\n              [disabled]=\"allActionsDisabled\"\r\n              (click)=\"onReject()\"\r\n            >\r\n              {{ rejectButton.text }}\r\n            </ard-button>\r\n          }\r\n          <ard-button\r\n            [color]=\"confirmButton.color\"\r\n            [appearance]=\"confirmButton.appearance\"\r\n            [variant]=\"dialogVariant\"\r\n            [compact]=\"dialogCompact\"\r\n            (click)=\"onConfirm()\"\r\n            [disabled]=\"!canConfirm || allActionsDisabled\"\r\n          >\r\n            {{ confirmButton.text }}\r\n          </ard-button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "allActionsDisabled", "open", "_closeIconTemplate"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [heading]=\"heading()\"\n  [noCloseButton]=\"noCloseButton()\"\n  [noBackdrop]=\"noBackdrop()\"\n  [disableBackdropClose]=\"disableBackdropClose()\"\n  [(open)]=\"open\"\n  (close)=\"onModalClose()\"\n>\n  <div class=\"ard-dialog-container\">\n    <div class=\"ard-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"ard-dialog-buttons\">\n      <ng-template\n        #defaultButtonsTemplate\n        let-confirmButton=\"confirmButton\"\n        let-rejectButton=\"rejectButton\"\n        let-canConfirm=\"canConfirm\"\n        let-onConfirm=\"onConfirm\"\n        let-onReject=\"onReject\"\n        let-dialogVariant=\"dialogVariant\"\n        let-dialogCompact=\"dialogCompact\"\n      >\n        <div class=\"ard-dialog-buttons-container\">\n          @if (rejectButton.enabled) {\n            <ard-button\n              [color]=\"rejectButton.color\"\n              [appearance]=\"rejectButton.appearance\"\n              [variant]=\"dialogVariant\"\n              [compact]=\"dialogCompact\"\n              (click)=\"onReject()\"\n            >\n              {{ rejectButton.text }}\n            </ard-button>\n          }\n          <ard-button\n            [color]=\"confirmButton.color\"\n            [appearance]=\"confirmButton.appearance\"\n            [variant]=\"dialogVariant\"\n            [compact]=\"dialogCompact\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"!canConfirm\"\n          >\n            {{ confirmButton.text }}\n          </ard-button>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\n      ></ng-template>\n    </div>\n  </div>\n</ard-modal>\n" }]
+            args: [{ selector: 'ard-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ard-modal\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [heading]=\"heading()\"\r\n  [noCloseButton]=\"noCloseButton()\"\r\n  [noBackdrop]=\"noBackdrop()\"\r\n  [disableBackdropClose]=\"disableBackdropClose()\"\r\n  [allActionsDisabled]=\"allActionsDisabled()\"\r\n  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\r\n  [_closeIconTemplate]=\"closeIconTemplate()\"\r\n>\r\n  <div class=\"ard-dialog-container\">\r\n    <div class=\"ard-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-dialog-buttons\">\r\n      <ng-template\r\n        #defaultButtonsTemplate\r\n        let-confirmButton=\"confirmButton\"\r\n        let-rejectButton=\"rejectButton\"\r\n        let-canConfirm=\"canConfirm\"\r\n        let-allActionsDisabled=\"allActionsDisabled\"\r\n        let-onConfirm=\"onConfirm\"\r\n        let-onReject=\"onReject\"\r\n        let-dialogVariant=\"dialogVariant\"\r\n        let-dialogCompact=\"dialogCompact\"\r\n      >\r\n        <div class=\"ard-dialog-buttons-container\">\r\n          @if (rejectButton.enabled) {\r\n            <ard-button\r\n              [color]=\"rejectButton.color\"\r\n              [appearance]=\"rejectButton.appearance\"\r\n              [variant]=\"dialogVariant\"\r\n              [compact]=\"dialogCompact\"\r\n              [disabled]=\"allActionsDisabled\"\r\n              (click)=\"onReject()\"\r\n            >\r\n              {{ rejectButton.text }}\r\n            </ard-button>\r\n          }\r\n          <ard-button\r\n            [color]=\"confirmButton.color\"\r\n            [appearance]=\"confirmButton.appearance\"\r\n            [variant]=\"dialogVariant\"\r\n            [compact]=\"dialogCompact\"\r\n            (click)=\"onConfirm()\"\r\n            [disabled]=\"!canConfirm || allActionsDisabled\"\r\n          >\r\n            {{ confirmButton.text }}\r\n          </ard-button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n" }]
         }] });
 
 class ArdiumModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, declarations: [ArdiumModalComponent], imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule], exports: [ArdiumModalComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, declarations: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective], imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule], exports: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumModalComponent],
+                    declarations: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective],
                     imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, A11yModule],
-                    exports: [ArdiumModalComponent],
+                    exports: [ArdiumModalComponent, ArdModalCloseIconTemplateDirective],
                 }]
         }] });
 
 class ArdiumDialogModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective], imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule], exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective], imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule], exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective],
+                    declarations: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective],
                     imports: [CommonModule, ArdiumButtonModule, ArdiumModalModule],
-                    exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective],
+                    exports: [ArdiumDialogComponent, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective],
                 }]
         }] });
 
@@ -13787,5 +13913,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STAR_DISPLAY_DEFAULTS, ARD_STAR_INPUT_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStarDisplayDefaults, provideStarInputDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map