@siemens/ix-angular 2.0.0-beta.1 → 2.0.0

package/fesm2020/siemens-ix-angular.mjs

@@ -1,12 +1,85 @@
 import { closeModal, dismissModal, showModal, themeSwitcher, getToastContainer, toast } from '@siemens/ix';
 export * from '@siemens/ix';
-import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Directive, Input, Type, Injector, ElementRef, Injectable, HostListener, EventEmitter, Output, APP_INITIALIZER, NgZone, NgModule } from '@angular/core';
+import { Directive, HostListener, Component, ChangeDetectionStrategy, Input, Type, Injector, ElementRef, Injectable, EventEmitter, Output, APP_INITIALIZER, NgZone, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
-import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { defineCustomElements } from '@siemens/ix-icons/loader';
+import { applyPolyfills, defineCustomElements as defineCustomElements$1 } from '@siemens/ix/loader';
+
+class ValueAccessor {
+    constructor(el) {
+        this.el = el;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+    }
+    handleChangeEvent(value) {
+        if (value !== this.lastValue) {
+            this.lastValue = value;
+            this.onChange(value);
+        }
+    }
+    _handleBlurEvent() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+}
+/** @nocollapse */ ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class BooleanValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+    }
+}
+/** @nocollapse */ BooleanValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ BooleanValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BooleanValueAccessor, selector: "ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]", host: { listeners: { "checkedChange": "handleChangeEvent($event.target.checked)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: BooleanValueAccessor,
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]',
+                    host: {
+                        '(checkedChange)': 'handleChangeEvent($event.target.checked)'
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: BooleanValueAccessor,
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 /* eslint-disable */
 const proxyInputs = (Cmp, inputs) => {
@@ -162,10 +235,10 @@ let IxBlind = class IxBlind {
     }
 };
 /** @nocollapse */ IxBlind.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBlind, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxBlind.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxBlind, selector: "ix-blind", inputs: { collapsed: "collapsed", icon: "icon", label: "label", sublabel: "sublabel" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxBlind.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxBlind, selector: "ix-blind", inputs: { collapsed: "collapsed", icon: "icon", label: "label", sublabel: "sublabel", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxBlind = __decorate([
     ProxyCmp({
-        inputs: ['collapsed', 'icon', 'label', 'sublabel']
+        inputs: ['collapsed', 'icon', 'label', 'sublabel', 'variant']
     })
 ], IxBlind);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBlind, decorators: [{
@@ -175,7 +248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['collapsed', 'icon', 'label', 'sublabel'],
+                    inputs: ['collapsed', 'icon', 'label', 'sublabel', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxBreadcrumb = class IxBreadcrumb {
@@ -396,7 +469,7 @@ let IxChip = class IxChip {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['close', 'closeChip']);
+        proxyOutputs(this, this.el, ['closeChip']);
     }
 };
 /** @nocollapse */ IxChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxChip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -598,10 +671,10 @@ let IxDropdownButton = class IxDropdownButton {
     }
 };
 /** @nocollapse */ IxDropdownButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxDropdownButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxDropdownButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxDropdownButton, selector: "ix-dropdown-button", inputs: { active: "active", disabled: "disabled", ghost: "ghost", icon: "icon", label: "label", outline: "outline", placement: "placement", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxDropdownButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxDropdownButton, selector: "ix-dropdown-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", label: "label", outline: "outline", placement: "placement", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxDropdownButton = __decorate([
     ProxyCmp({
-        inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant']
+        inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant']
     })
 ], IxDropdownButton);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxDropdownButton, decorators: [{
@@ -611,7 +684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant'],
+                    inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxDropdownHeader = class IxDropdownHeader {
@@ -643,7 +716,6 @@ let IxDropdownItem = class IxDropdownItem {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['itemClick']);
     }
 };
 /** @nocollapse */ IxDropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxDropdownItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -744,10 +816,10 @@ let IxEventListItem = class IxEventListItem {
     }
 };
 /** @nocollapse */ IxEventListItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxEventListItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxEventListItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxEventListItem, selector: "ix-event-list-item", inputs: { chevron: "chevron", color: "color", disabled: "disabled", opacity: "opacity", selected: "selected" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxEventListItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxEventListItem, selector: "ix-event-list-item", inputs: { chevron: "chevron", color: "color", disabled: "disabled", selected: "selected" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxEventListItem = __decorate([
     ProxyCmp({
-        inputs: ['chevron', 'color', 'disabled', 'opacity', 'selected']
+        inputs: ['chevron', 'color', 'disabled', 'selected']
     })
 ], IxEventListItem);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxEventListItem, decorators: [{
@@ -757,7 +829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['chevron', 'color', 'disabled', 'opacity', 'selected'],
+                    inputs: ['chevron', 'color', 'disabled', 'selected'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxExpandingSearch = class IxExpandingSearch {
@@ -880,30 +952,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['label'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxGrid = class IxGrid {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-/** @nocollapse */ IxGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxGrid, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxGrid, selector: "ix-grid", inputs: { columns: "columns", noPadding: "noPadding", noRowGap: "noRowGap" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxGrid = __decorate([
-    ProxyCmp({
-        inputs: ['columns', 'noPadding', 'noRowGap']
-    })
-], IxGrid);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxGrid, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-grid',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['columns', 'noPadding', 'noRowGap'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxGroup = class IxGroup {
     constructor(c, r, z) {
         this.z = z;
@@ -976,30 +1024,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['focusable', 'icon', 'index', 'secondaryText', 'selected', 'suppressSelection', 'text'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxIcon = class IxIcon {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-/** @nocollapse */ IxIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIcon, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxIcon, selector: "ix-icon", inputs: { color: "color", name: "name", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxIcon = __decorate([
-    ProxyCmp({
-        inputs: ['color', 'name', 'size']
-    })
-], IxIcon);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIcon, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-icon',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['color', 'name', 'size'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxIconButton = class IxIconButton {
     constructor(c, r, z) {
         this.z = z;
@@ -1143,6 +1167,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['label', 'orientation', 'state', 'unit', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxLayoutGrid = class IxLayoutGrid {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxLayoutGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxLayoutGrid, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxLayoutGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxLayoutGrid, selector: "ix-layout-grid", inputs: { columns: "columns", gap: "gap", noMargin: "noMargin" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxLayoutGrid = __decorate([
+    ProxyCmp({
+        inputs: ['columns', 'gap', 'noMargin']
+    })
+], IxLayoutGrid);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxLayoutGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-layout-grid',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['columns', 'gap', 'noMargin'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxLinkButton = class IxLinkButton {
     constructor(c, r, z) {
         this.z = z;
@@ -1752,6 +1800,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['label', 'selected', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxSlider = class IxSlider {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['valueChange']);
+    }
+};
+/** @nocollapse */ IxSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxSlider, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxSlider, selector: "ix-slider", inputs: { disabled: "disabled", error: "error", marker: "marker", max: "max", min: "min", step: "step", trace: "trace", traceReference: "traceReference", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxSlider = __decorate([
+    ProxyCmp({
+        inputs: ['disabled', 'error', 'marker', 'max', 'min', 'step', 'trace', 'traceReference', 'value']
+    })
+], IxSlider);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxSlider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-slider',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['disabled', 'error', 'marker', 'max', 'min', 'step', 'trace', 'traceReference', 'value'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxSpinner = class IxSpinner {
     constructor(c, r, z) {
         this.z = z;
@@ -2226,6 +2299,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+let IxIcon = class IxIcon {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIcon, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxIcon, selector: "ix-icon", inputs: { color: "color", name: "name" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxIcon = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: undefined,
+        inputs: ['color', 'name'],
+    })
+], IxIcon);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-icon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['color', 'name'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -2365,16 +2463,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 let didInitialize = false;
 const appInitialize = (doc) => {
-    return () => {
+    return async () => {
         const win = doc.defaultView;
         if (win && typeof window !== 'undefined') {
             if (didInitialize) {
                 return;
             }
             didInitialize = true;
-            applyPolyfills().then(() => {
-                return defineCustomElements();
-            });
+            await applyPolyfills();
+            await defineCustomElements();
+            await defineCustomElements$1();
         }
     };
 };
@@ -2414,17 +2512,16 @@ const DIRECTIVES = [
     IxFlipTile,
     IxFlipTileContent,
     IxFormField,
-    IxGrid,
     IxGroup,
     IxGroupContextMenu,
     IxGroupItem,
-    IxIcon,
     IxIconButton,
     IxIconToggleButton,
     IxInputGroup,
     IxKeyValue,
     IxKeyValueList,
     IxKpi,
+    IxLayoutGrid,
     IxLinkButton,
     IxMapNavigation,
     IxMapNavigationOverlay,
@@ -2450,6 +2547,7 @@ const DIRECTIVES = [
     IxRow,
     IxSelect,
     IxSelectItem,
+    IxSlider,
     IxSpinner,
     IxSplitButton,
     IxSplitButtonItem,
@@ -2470,44 +2568,6 @@ const DIRECTIVES = [
     IxWorkflowSteps
 ];
 
-class ValueAccessor {
-    constructor(el) {
-        this.el = el;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    writeValue(value) {
-        this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
-    }
-    handleChangeEvent(value) {
-        if (value !== this.lastValue) {
-            this.lastValue = value;
-            this.onChange(value);
-        }
-    }
-    _handleBlurEvent() {
-        this.onTouched();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.el.nativeElement.disabled = isDisabled;
-    }
-}
-/** @nocollapse */ ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueAccessor, decorators: [{
-            type: Directive,
-            args: [{}]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
-                type: HostListener,
-                args: ['focusout']
-            }] } });
-
 class SelectValueAccessor extends ValueAccessor {
     constructor(el) {
         super(el);
@@ -2730,7 +2790,9 @@ const DECLARATIONS = [
     ...DIRECTIVES,
     IxTree,
     IxDropdownTriggerDirective,
+    IxIcon,
     SelectValueAccessor,
+    BooleanValueAccessor
 ];
 class IxModule {
     static forRoot() {
@@ -2751,9 +2813,13 @@ class IxModule {
     }
 }
 /** @nocollapse */ IxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ IxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModule, declarations: [IxActionCard, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGrid, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
-        SelectValueAccessor], exports: [IxActionCard, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGrid, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
-        SelectValueAccessor] });
+/** @nocollapse */ IxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModule, declarations: [IxActionCard, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGroup, IxGroupContextMenu, IxGroupItem, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
+        IxIcon,
+        SelectValueAccessor,
+        BooleanValueAccessor], exports: [IxActionCard, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGroup, IxGroupContextMenu, IxGroupItem, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
+        IxIcon,
+        SelectValueAccessor,
+        BooleanValueAccessor] });
 /** @nocollapse */ IxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModule, decorators: [{
             type: NgModule,
@@ -2776,5 +2842,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IxActionCard, IxActiveModal, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxDropdownTriggerDirective, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGrid, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxModule, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTree, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, ModalService, SelectValueAccessor, ThemeService, ToastService };
+export { BooleanValueAccessor, IxActionCard, IxActiveModal, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxDropdownTriggerDirective, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxModule, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTree, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, ModalService, SelectValueAccessor, ThemeService, ToastService };
 //# sourceMappingURL=siemens-ix-angular.mjs.map