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

package/fesm2020/siemens-ix-angular.mjs

@@ -1,11 +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, Injectable, 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 { 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) => {
@@ -80,55 +154,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['heading', 'icon', 'selected', 'subheading', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxAnimatedTab = class IxAnimatedTab {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-/** @nocollapse */ IxAnimatedTab.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAnimatedTab, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxAnimatedTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxAnimatedTab, selector: "ix-animated-tab", inputs: { count: "count", icon: "icon" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxAnimatedTab = __decorate([
-    ProxyCmp({
-        inputs: ['count', 'icon']
-    })
-], IxAnimatedTab);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAnimatedTab, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-animated-tab',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['count', 'icon'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxAnimatedTabs = class IxAnimatedTabs {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['tabClick']);
-    }
-};
-/** @nocollapse */ IxAnimatedTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAnimatedTabs, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxAnimatedTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxAnimatedTabs, selector: "ix-animated-tabs", inputs: { selectedIndex: "selectedIndex", tabPlacement: "tabPlacement" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxAnimatedTabs = __decorate([
-    ProxyCmp({
-        inputs: ['selectedIndex', 'tabPlacement']
-    })
-], IxAnimatedTabs);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAnimatedTabs, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-animated-tabs',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['selectedIndex', 'tabPlacement'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxApplicationHeader = class IxApplicationHeader {
     constructor(c, r, z) {
         this.z = z;
@@ -185,10 +210,10 @@ let IxBasicNavigation = class IxBasicNavigation {
     }
 };
 /** @nocollapse */ IxBasicNavigation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBasicNavigation, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxBasicNavigation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxBasicNavigation, selector: "ix-basic-navigation", inputs: { applicationName: "applicationName", hideHeader: "hideHeader" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxBasicNavigation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxBasicNavigation, selector: "ix-basic-navigation", inputs: { applicationName: "applicationName", breakpoints: "breakpoints", forceBreakpoint: "forceBreakpoint", hideHeader: "hideHeader" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxBasicNavigation = __decorate([
     ProxyCmp({
-        inputs: ['applicationName', 'hideHeader']
+        inputs: ['applicationName', 'breakpoints', 'forceBreakpoint', 'hideHeader']
     })
 ], IxBasicNavigation);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBasicNavigation, decorators: [{
@@ -198,7 +223,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: ['applicationName', 'hideHeader'],
+                    inputs: ['applicationName', 'breakpoints', 'forceBreakpoint', 'hideHeader'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxBlind = class IxBlind {
@@ -210,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" }, 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']
+        inputs: ['collapsed', 'icon', 'label', 'sublabel', 'variant']
     })
 ], IxBlind);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBlind, decorators: [{
@@ -223,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'],
+                    inputs: ['collapsed', 'icon', 'label', 'sublabel', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxBreadcrumb = class IxBreadcrumb {
@@ -235,10 +260,10 @@ let IxBreadcrumb = class IxBreadcrumb {
     }
 };
 /** @nocollapse */ IxBreadcrumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBreadcrumb, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxBreadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxBreadcrumb, selector: "ix-breadcrumb", inputs: { ghost: "ghost", nextItems: "nextItems", visibleItemCount: "visibleItemCount" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxBreadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxBreadcrumb, selector: "ix-breadcrumb", inputs: { ariaLabelPreviousButton: "ariaLabelPreviousButton", ghost: "ghost", nextItems: "nextItems", visibleItemCount: "visibleItemCount" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxBreadcrumb = __decorate([
     ProxyCmp({
-        inputs: ['ghost', 'nextItems', 'visibleItemCount']
+        inputs: ['ariaLabelPreviousButton', 'ghost', 'nextItems', 'visibleItemCount']
     })
 ], IxBreadcrumb);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBreadcrumb, decorators: [{
@@ -248,7 +273,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: ['ghost', 'nextItems', 'visibleItemCount'],
+                    inputs: ['ariaLabelPreviousButton', 'ghost', 'nextItems', 'visibleItemCount'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxBreadcrumbItem = class IxBreadcrumbItem {
@@ -283,10 +308,10 @@ let IxButton = class IxButton {
     }
 };
 /** @nocollapse */ IxButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxButton, selector: "ix-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", invisible: "invisible", loading: "loading", outline: "outline", selected: "selected", type: "type", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxButton, selector: "ix-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", loading: "loading", outline: "outline", type: "type", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxButton = __decorate([
     ProxyCmp({
-        inputs: ['disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'selected', 'type', 'variant']
+        inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'type', 'variant']
     })
 ], IxButton);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxButton, decorators: [{
@@ -296,7 +321,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: ['disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'selected', 'type', 'variant'],
+                    inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'type', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxCard = class IxCard {
@@ -419,14 +444,14 @@ let IxCategoryFilter = class IxCategoryFilter {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['inputChanged', 'filterChanged']);
+        proxyOutputs(this, this.el, ['categoryChanged', 'inputChanged', 'filterChanged']);
     }
 };
 /** @nocollapse */ IxCategoryFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCategoryFilter, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxCategoryFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxCategoryFilter, selector: "ix-category-filter", inputs: { categories: "categories", filterState: "filterState", hideIcon: "hideIcon", i18nPlainText: "i18nPlainText", icon: "icon", initialState: "initialState", labelCategories: "labelCategories", nonSelectableCategories: "nonSelectableCategories", placeholder: "placeholder", repeatCategories: "repeatCategories", suggestions: "suggestions" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxCategoryFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxCategoryFilter, selector: "ix-category-filter", inputs: { categories: "categories", disabled: "disabled", filterState: "filterState", hideIcon: "hideIcon", i18nPlainText: "i18nPlainText", icon: "icon", labelCategories: "labelCategories", nonSelectableCategories: "nonSelectableCategories", placeholder: "placeholder", readonly: "readonly", repeatCategories: "repeatCategories", suggestions: "suggestions" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxCategoryFilter = __decorate([
     ProxyCmp({
-        inputs: ['categories', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions']
+        inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'suggestions']
     })
 ], IxCategoryFilter);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCategoryFilter, decorators: [{
@@ -436,7 +461,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: ['categories', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions'],
+                    inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'suggestions'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxChip = class IxChip {
@@ -444,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 });
@@ -464,6 +489,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['active', 'background', 'closable', 'color', 'icon', 'outline', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxCol = class IxCol {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxCol.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCol, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxCol.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxCol, selector: "ix-col", inputs: { size: "size", sizeLg: "sizeLg", sizeMd: "sizeMd", sizeSm: "sizeSm" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxCol = __decorate([
+    ProxyCmp({
+        inputs: ['size', 'sizeLg', 'sizeMd', 'sizeSm']
+    })
+], IxCol);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCol, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-col',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['size', 'sizeLg', 'sizeMd', 'sizeSm'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxContentHeader = class IxContentHeader {
     constructor(c, r, z) {
         this.z = z;
@@ -622,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", 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', '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: [{
@@ -635,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', '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 {
@@ -667,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 });
@@ -768,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: [{
@@ -781,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 {
@@ -818,10 +866,10 @@ let IxFilterChip = class IxFilterChip {
     }
 };
 /** @nocollapse */ IxFilterChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxFilterChip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxFilterChip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxFilterChip, selector: "ix-filter-chip", inputs: { disabled: "disabled" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxFilterChip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxFilterChip, selector: "ix-filter-chip", inputs: { disabled: "disabled", readonly: "readonly" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxFilterChip = __decorate([
     ProxyCmp({
-        inputs: ['disabled']
+        inputs: ['disabled', 'readonly']
     })
 ], IxFilterChip);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxFilterChip, decorators: [{
@@ -831,7 +879,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: ['disabled'],
+                    inputs: ['disabled', 'readonly'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxFlipTile = class IxFlipTile {
@@ -842,10 +890,10 @@ let IxFlipTile = class IxFlipTile {
     }
 };
 /** @nocollapse */ IxFlipTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxFlipTile, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxFlipTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxFlipTile, selector: "ix-flip-tile", inputs: { footer: "footer", height: "height", state: "state", width: "width" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxFlipTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxFlipTile, selector: "ix-flip-tile", inputs: { height: "height", state: "state", width: "width" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxFlipTile = __decorate([
     ProxyCmp({
-        inputs: ['footer', 'height', 'state', 'width']
+        inputs: ['height', 'state', 'width']
     })
 ], IxFlipTile);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxFlipTile, decorators: [{
@@ -855,7 +903,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: ['footer', 'height', 'state', 'width'],
+                    inputs: ['height', 'state', 'width'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxFlipTileContent = class IxFlipTileContent {
@@ -880,6 +928,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: [],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxFormField = class IxFormField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxFormField, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxFormField, selector: "ix-form-field", inputs: { label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxFormField = __decorate([
+    ProxyCmp({
+        inputs: ['label']
+    })
+], IxFormField);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxFormField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-form-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['label'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxGroup = class IxGroup {
     constructor(c, r, z) {
         this.z = z;
@@ -952,52 +1024,53 @@ 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 {
+let IxIconButton = class IxIconButton {
     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([
+/** @nocollapse */ IxIconButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxIconButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxIconButton, selector: "ix-icon-button", inputs: { color: "color", disabled: "disabled", ghost: "ghost", icon: "icon", loading: "loading", outline: "outline", oval: "oval", size: "size", type: "type", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxIconButton = __decorate([
     ProxyCmp({
-        inputs: ['color', 'name', 'size']
+        inputs: ['color', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'oval', 'size', 'type', 'variant']
     })
-], IxIcon);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIcon, decorators: [{
+], IxIconButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconButton, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-icon',
+                    selector: 'ix-icon-button',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['color', 'name', 'size'],
+                    inputs: ['color', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'oval', 'size', 'type', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxIconButton = class IxIconButton {
+let IxIconToggleButton = class IxIconToggleButton {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['pressedChange']);
     }
 };
-/** @nocollapse */ IxIconButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxIconButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxIconButton, selector: "ix-icon-button", inputs: { color: "color", disabled: "disabled", ghost: "ghost", icon: "icon", invisible: "invisible", loading: "loading", outline: "outline", oval: "oval", selected: "selected", size: "size", type: "type", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxIconButton = __decorate([
+/** @nocollapse */ IxIconToggleButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconToggleButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxIconToggleButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxIconToggleButton, selector: "ix-icon-toggle-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", loading: "loading", outline: "outline", pressed: "pressed", size: "size", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxIconToggleButton = __decorate([
     ProxyCmp({
-        inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'oval', 'selected', 'size', 'type', 'variant']
+        inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'pressed', 'size', 'variant']
     })
-], IxIconButton);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconButton, decorators: [{
+], IxIconToggleButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconToggleButton, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-icon-button',
+                    selector: 'ix-icon-toggle-button',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'oval', 'selected', 'size', 'type', 'variant'],
+                    inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'pressed', 'size', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxInputGroup = class IxInputGroup {
@@ -1094,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;
@@ -1178,10 +1275,10 @@ let IxMenu = class IxMenu {
     }
 };
 /** @nocollapse */ IxMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxMenu, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxMenu, selector: "ix-menu", inputs: { applicationDescription: "applicationDescription", applicationName: "applicationName", enableMapExpand: "enableMapExpand", enableSettings: "enableSettings", enableToggleTheme: "enableToggleTheme", expand: "expand", forceLayout: "forceLayout", i18nCollapse: "i18nCollapse", i18nExpand: "i18nExpand", i18nExpandSidebar: "i18nExpandSidebar", i18nLegal: "i18nLegal", i18nSettings: "i18nSettings", i18nToggleTheme: "i18nToggleTheme", maxVisibleMenuItems: "maxVisibleMenuItems", pinned: "pinned", showAbout: "showAbout", showSettings: "showSettings", supportedModes: "supportedModes" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxMenu, selector: "ix-menu", inputs: { applicationDescription: "applicationDescription", applicationName: "applicationName", enableMapExpand: "enableMapExpand", enableSettings: "enableSettings", enableToggleTheme: "enableToggleTheme", expand: "expand", i18nCollapse: "i18nCollapse", i18nExpand: "i18nExpand", i18nExpandSidebar: "i18nExpandSidebar", i18nLegal: "i18nLegal", i18nSettings: "i18nSettings", i18nToggleTheme: "i18nToggleTheme", maxVisibleMenuItems: "maxVisibleMenuItems", pinned: "pinned", showAbout: "showAbout", showSettings: "showSettings" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxMenu = __decorate([
     ProxyCmp({
-        inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'forceLayout', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'supportedModes'],
+        inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
         methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout']
     })
 ], IxMenu);
@@ -1192,7 +1289,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: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'forceLayout', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'supportedModes'],
+                    inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxMenuAbout = class IxMenuAbout {
@@ -1631,19 +1728,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['heading', 'icon', 'notification', 'subheading', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxRow = class IxRow {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxRow, selector: "ix-row", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxRow = __decorate([
+    ProxyCmp({})
+], IxRow);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-row',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: [],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxSelect = class IxSelect {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['itemSelectionChange', 'inputChange', 'addItem']);
+        proxyOutputs(this, this.el, ['valueChange', 'itemSelectionChange', 'inputChange', 'addItem']);
     }
 };
 /** @nocollapse */ IxSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxSelect, selector: "ix-select", inputs: { allowClear: "allowClear", disabled: "disabled", editable: "editable", hideListHeader: "hideListHeader", i18nNoMatches: "i18nNoMatches", i18nPlaceholder: "i18nPlaceholder", i18nPlaceholderEditable: "i18nPlaceholderEditable", i18nSelectListHeader: "i18nSelectListHeader", mode: "mode", readonly: "readonly", selectedIndices: "selectedIndices" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxSelect, selector: "ix-select", inputs: { allowClear: "allowClear", disabled: "disabled", editable: "editable", hideListHeader: "hideListHeader", i18nNoMatches: "i18nNoMatches", i18nPlaceholder: "i18nPlaceholder", i18nPlaceholderEditable: "i18nPlaceholderEditable", i18nSelectListHeader: "i18nSelectListHeader", mode: "mode", readonly: "readonly", selectedIndices: "selectedIndices", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxSelect = __decorate([
     ProxyCmp({
-        inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices']
+        inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices', 'value']
     })
 ], IxSelect);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxSelect, decorators: [{
@@ -1653,7 +1772,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: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices'],
+                    inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxSelectItem = class IxSelectItem {
@@ -1681,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;
@@ -1760,6 +1904,7 @@ let IxTabItem = class IxTabItem {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['tabClick']);
     }
 };
 /** @nocollapse */ IxTabItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxTabItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -1784,6 +1929,7 @@ let IxTabs = class IxTabs {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['selectedChange']);
     }
 };
 /** @nocollapse */ IxTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxTabs, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -1928,6 +2074,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxToggleButton = class IxToggleButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['pressedChange']);
+    }
+};
+/** @nocollapse */ IxToggleButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxToggleButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxToggleButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxToggleButton, selector: "ix-toggle-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", loading: "loading", outline: "outline", pressed: "pressed", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxToggleButton = __decorate([
+    ProxyCmp({
+        inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'pressed', 'variant']
+    })
+], IxToggleButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxToggleButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-toggle-button',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'pressed', 'variant'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxTooltip = class IxTooltip {
     constructor(c, r, z) {
         this.z = z;
@@ -1977,6 +2148,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['context', 'hasChildren', 'text'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxTypography = class IxTypography {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxTypography.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxTypography, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxTypography.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxTypography, selector: "ix-typography", inputs: { bold: "bold", color: "color", format: "format", textDecoration: "textDecoration" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxTypography = __decorate([
+    ProxyCmp({
+        inputs: ['bold', 'color', 'format', 'textDecoration']
+    })
+], IxTypography);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxTypography, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-typography',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['bold', 'color', 'format', 'textDecoration'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxUpload = class IxUpload {
     constructor(c, r, z) {
         this.z = z;
@@ -2035,10 +2230,10 @@ let IxWorkflowStep = class IxWorkflowStep {
     }
 };
 /** @nocollapse */ IxWorkflowStep.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxWorkflowStep, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxWorkflowStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxWorkflowStep, selector: "ix-workflow-step", inputs: { clickable: "clickable", disabled: "disabled", position: "position", selected: "selected", status: "status", vertical: "vertical" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxWorkflowStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxWorkflowStep, selector: "ix-workflow-step", inputs: { clickable: "clickable", disabled: "disabled", selected: "selected", status: "status", vertical: "vertical" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxWorkflowStep = __decorate([
     ProxyCmp({
-        inputs: ['clickable', 'disabled', 'position', 'selected', 'status', 'vertical']
+        inputs: ['clickable', 'disabled', 'selected', 'status', 'vertical']
     })
 ], IxWorkflowStep);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxWorkflowStep, decorators: [{
@@ -2048,7 +2243,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: ['clickable', 'disabled', 'position', 'selected', 'status', 'vertical'],
+                    inputs: ['clickable', 'disabled', 'selected', 'status', 'vertical'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxWorkflowSteps = class IxWorkflowSteps {
@@ -2060,10 +2255,10 @@ let IxWorkflowSteps = class IxWorkflowSteps {
     }
 };
 /** @nocollapse */ IxWorkflowSteps.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxWorkflowSteps, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxWorkflowSteps.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxWorkflowSteps, selector: "ix-workflow-steps", inputs: { clickable: "clickable", linear: "linear", selectedIndex: "selectedIndex", vertical: "vertical" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxWorkflowSteps.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxWorkflowSteps, selector: "ix-workflow-steps", inputs: { clickable: "clickable", selectedIndex: "selectedIndex", vertical: "vertical" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxWorkflowSteps = __decorate([
     ProxyCmp({
-        inputs: ['clickable', 'linear', 'selectedIndex', 'vertical']
+        inputs: ['clickable', 'selectedIndex', 'vertical']
     })
 ], IxWorkflowSteps);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxWorkflowSteps, decorators: [{
@@ -2073,7 +2268,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: ['clickable', 'linear', 'selectedIndex', 'vertical'],
+                    inputs: ['clickable', 'selectedIndex', 'vertical'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
@@ -2104,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
  *
@@ -2163,14 +2383,14 @@ class ModalService {
             data: config.data,
         };
         if (config.content instanceof Type) {
-            return this.createContentByComponentType(config, context);
+            return this.createContentByComponentType(config.content, config, context);
         }
-        const modalInstance = await this.createContentByTemplateRef(config, context);
+        const modalInstance = await this.createContentByTemplateRef(config.content, config, context);
         return modalInstance;
     }
-    async createContentByComponentType(config, context) {
+    async createContentByComponentType(componentType, config, context) {
         const activeModal = new InternalIxActiveModal(context.data);
-        const modalFactory = this.componentFactoryResolver.resolveComponentFactory(config.content);
+        const modalFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
         const modalInjector = Injector.create({
             providers: [
                 {
@@ -2182,35 +2402,35 @@ class ModalService {
         });
         const instance = modalFactory.create(modalInjector);
         this.appRef.attachView(instance.hostView);
-        const embeddedView = instance.hostView;
-        const modalInstance = await this.createModalInstance(context, embeddedView, config);
+        const element = instance.injector.get(ElementRef);
+        const modalInstance = await this.createModalInstance(context, element.nativeElement, instance.hostView, config);
         activeModal.setModalElement(modalInstance.htmlElement);
         return modalInstance;
     }
-    async createContentByTemplateRef(config, context) {
-        const embeddedView = config.content.createEmbeddedView({
+    async createContentByTemplateRef(templateRef, config, context) {
+        const embeddedView = templateRef.createEmbeddedView({
             $implicit: context,
         });
-        return await this.createModalInstance(context, embeddedView, config);
+        this.appRef.attachView(embeddedView);
+        return await this.createModalInstance(context, embeddedView.rootNodes[0], embeddedView, config);
     }
-    async createModalInstance(context, embeddedView, config) {
-        const node = embeddedView.rootNodes[0];
+    async createModalInstance(context, htmlElement, viewRef, config) {
         context.close = (result) => {
-            closeModal(node, result);
+            closeModal(htmlElement, result);
         };
         context.dismiss = (result) => {
-            dismissModal(node, result);
+            dismissModal(htmlElement, result);
         };
-        embeddedView.detectChanges();
+        viewRef.detectChanges();
         const modalInstance = await showModal({
             ...config,
-            content: node,
+            content: htmlElement,
         });
         modalInstance.onClose.once(() => {
-            embeddedView.destroy();
+            viewRef.destroy();
         });
         modalInstance.onDismiss.once(() => {
-            embeddedView.destroy();
+            viewRef.destroy();
         });
         return modalInstance;
     }
@@ -2243,24 +2463,22 @@ 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();
         }
     };
 };
 
 const DIRECTIVES = [
     IxActionCard,
-    IxAnimatedTab,
-    IxAnimatedTabs,
     IxApplicationHeader,
     IxAvatar,
     IxBasicNavigation,
@@ -2275,6 +2493,7 @@ const DIRECTIVES = [
     IxCardTitle,
     IxCategoryFilter,
     IxChip,
+    IxCol,
     IxContentHeader,
     IxDatePicker,
     IxDatetimePicker,
@@ -2292,15 +2511,17 @@ const DIRECTIVES = [
     IxFilterChip,
     IxFlipTile,
     IxFlipTileContent,
+    IxFormField,
     IxGroup,
     IxGroupContextMenu,
     IxGroupItem,
-    IxIcon,
     IxIconButton,
+    IxIconToggleButton,
     IxInputGroup,
     IxKeyValue,
     IxKeyValueList,
     IxKpi,
+    IxLayoutGrid,
     IxLinkButton,
     IxMapNavigation,
     IxMapNavigationOverlay,
@@ -2323,8 +2544,10 @@ const DIRECTIVES = [
     IxPagination,
     IxPill,
     IxPushCard,
+    IxRow,
     IxSelect,
     IxSelectItem,
+    IxSlider,
     IxSpinner,
     IxSplitButton,
     IxSplitButtonItem,
@@ -2335,14 +2558,47 @@ const DIRECTIVES = [
     IxToast,
     IxToastContainer,
     IxToggle,
+    IxToggleButton,
     IxTooltip,
     IxTreeItem,
+    IxTypography,
     IxUpload,
     IxValidationTooltip,
     IxWorkflowStep,
     IxWorkflowSteps
 ];
 
+class SelectValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+}
+/** @nocollapse */ SelectValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ SelectValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SelectValueAccessor, selector: "ix-select[ngModel],ix-select[formControlName],ix-select[formControl]", host: { listeners: { "valueChange": "handleChangeEvent($event.target.value)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: SelectValueAccessor,
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'ix-select[ngModel],ix-select[formControlName],ix-select[formControl]',
+                    host: {
+                        '(valueChange)': 'handleChangeEvent($event.target.value)'
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SelectValueAccessor,
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -2351,6 +2607,9 @@ const DIRECTIVES = [
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/**
+ * @deprecated Use themeSwitcher from core package `import { themeSwitcher } from '@siemens/ix';`
+ */
 class ThemeService {
     constructor() {
         this.themeChanged = new EventEmitter();
@@ -2527,7 +2786,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const DECLARATIONS = [...DIRECTIVES, IxTree, IxDropdownTriggerDirective];
+const DECLARATIONS = [
+    ...DIRECTIVES,
+    IxTree,
+    IxDropdownTriggerDirective,
+    IxIcon,
+    SelectValueAccessor,
+    BooleanValueAccessor
+];
 class IxModule {
     static forRoot() {
         return {
@@ -2547,7 +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, IxAnimatedTab, IxAnimatedTabs, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, 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, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxTooltip, IxTreeItem, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective], exports: [IxActionCard, IxAnimatedTab, IxAnimatedTabs, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, 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, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxTooltip, IxTreeItem, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective] });
+/** @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,
@@ -2570,5 +2842,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IxActionCard, IxActiveModal, IxAnimatedTab, IxAnimatedTabs, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxDropdownTriggerDirective, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, 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, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxTooltip, IxTree, IxTreeItem, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, ModalService, 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