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

package/fesm2020/siemens-ix-angular.mjs

@@ -1,11 +1,12 @@
-import { closeModal, dismissModal, modal, themeSwitcher, getToastContainer, toast } from '@siemens/ix';
+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 { Component, ChangeDetectionStrategy, Directive, Input, Type, Injector, ElementRef, Injectable, HostListener, EventEmitter, Output, APP_INITIALIZER, NgZone, NgModule } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /* eslint-disable */
 const proxyInputs = (Cmp, inputs) => {
@@ -80,77 +81,52 @@ 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 {
+let IxApplicationHeader = class IxApplicationHeader {
     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([
+/** @nocollapse */ IxApplicationHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxApplicationHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxApplicationHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxApplicationHeader, selector: "ix-application-header", inputs: { name: "name" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxApplicationHeader = __decorate([
     ProxyCmp({
-        inputs: ['selectedIndex', 'tabPlacement']
+        inputs: ['name']
     })
-], IxAnimatedTabs);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAnimatedTabs, decorators: [{
+], IxApplicationHeader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxApplicationHeader, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-animated-tabs',
+                    selector: 'ix-application-header',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['selectedIndex', 'tabPlacement'],
+                    inputs: ['name'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxApplicationHeader = class IxApplicationHeader {
+let IxAvatar = class IxAvatar {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
     }
 };
-/** @nocollapse */ IxApplicationHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxApplicationHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxApplicationHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxApplicationHeader, selector: "ix-application-header", inputs: { name: "name" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxApplicationHeader = __decorate([
+/** @nocollapse */ IxAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAvatar, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxAvatar, selector: "ix-avatar", inputs: { image: "image", initials: "initials" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxAvatar = __decorate([
     ProxyCmp({
-        inputs: ['name']
+        inputs: ['image', 'initials']
     })
-], IxApplicationHeader);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxApplicationHeader, decorators: [{
+], IxAvatar);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxAvatar, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-application-header',
+                    selector: 'ix-avatar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['name'],
+                    inputs: ['image', 'initials'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxBasicNavigation = class IxBasicNavigation {
@@ -161,10 +137,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: [{
@@ -174,7 +150,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 {
@@ -186,10 +162,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" }, 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']
     })
 ], IxBlind);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxBlind, decorators: [{
@@ -199,7 +175,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'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxBreadcrumb = class IxBreadcrumb {
@@ -211,10 +187,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: [{
@@ -224,7 +200,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 {
@@ -259,10 +235,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", invisible: "invisible", 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', 'invisible', '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: [{
@@ -272,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: ['disabled', 'ghost', 'invisible', '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 {
@@ -395,14 +371,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: [{
@@ -412,7 +388,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 {
@@ -440,53 +416,53 @@ 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 IxContentHeader = class IxContentHeader {
+let IxCol = class IxCol {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['backButtonClick']);
     }
 };
-/** @nocollapse */ IxContentHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxContentHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxContentHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxContentHeader, selector: "ix-content-header", inputs: { hasBackButton: "hasBackButton", headerSubtitle: "headerSubtitle", headerTitle: "headerTitle", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxContentHeader = __decorate([
+/** @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: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant']
+        inputs: ['size', 'sizeLg', 'sizeMd', 'sizeSm']
     })
-], IxContentHeader);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxContentHeader, decorators: [{
+], IxCol);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCol, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-content-header',
+                    selector: 'ix-col',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant'],
+                    inputs: ['size', 'sizeLg', 'sizeMd', 'sizeSm'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxCounterPill = class IxCounterPill {
+let IxContentHeader = class IxContentHeader {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['backButtonClick']);
     }
 };
-/** @nocollapse */ IxCounterPill.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCounterPill, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxCounterPill.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxCounterPill, selector: "ix-counter-pill", inputs: { alignLeft: "alignLeft", background: "background", color: "color", outline: "outline", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxCounterPill = __decorate([
+/** @nocollapse */ IxContentHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxContentHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxContentHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxContentHeader, selector: "ix-content-header", inputs: { hasBackButton: "hasBackButton", headerSubtitle: "headerSubtitle", headerTitle: "headerTitle", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxContentHeader = __decorate([
     ProxyCmp({
-        inputs: ['alignLeft', 'background', 'color', 'outline', 'variant']
+        inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant']
     })
-], IxCounterPill);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxCounterPill, decorators: [{
+], IxContentHeader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxContentHeader, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-counter-pill',
+                    selector: 'ix-content-header',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['alignLeft', 'background', 'color', 'outline', 'variant'],
+                    inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxDatePicker = class IxDatePicker {
@@ -597,10 +573,10 @@ let IxDropdown = class IxDropdown {
     }
 };
 /** @nocollapse */ IxDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxDropdown, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxDropdown, selector: "ix-dropdown", inputs: { adjustDropdownWidthToReferenceWidth: "adjustDropdownWidthToReferenceWidth", adjustDropdownWidthToReferenceWith: "adjustDropdownWidthToReferenceWith", anchor: "anchor", closeBehavior: "closeBehavior", header: "header", placement: "placement", positioningStrategy: "positioningStrategy", show: "show", trigger: "trigger" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxDropdown, selector: "ix-dropdown", inputs: { anchor: "anchor", closeBehavior: "closeBehavior", header: "header", placement: "placement", positioningStrategy: "positioningStrategy", show: "show", suppressAutomaticPlacement: "suppressAutomaticPlacement", trigger: "trigger" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxDropdown = __decorate([
     ProxyCmp({
-        inputs: ['adjustDropdownWidthToReferenceWidth', 'adjustDropdownWidthToReferenceWith', 'anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'trigger'],
+        inputs: ['anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'suppressAutomaticPlacement', 'trigger'],
         methods: ['updatePosition']
     })
 ], IxDropdown);
@@ -611,7 +587,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: ['adjustDropdownWidthToReferenceWidth', 'adjustDropdownWidthToReferenceWith', 'anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'trigger'],
+                    inputs: ['anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'suppressAutomaticPlacement', 'trigger'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxDropdownButton = class IxDropdownButton {
@@ -622,10 +598,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: { 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 });
 IxDropdownButton = __decorate([
     ProxyCmp({
-        inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'variant']
+        inputs: ['active', '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 +611,31 @@ 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: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxDropdownHeader = class IxDropdownHeader {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxDropdownHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxDropdownHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxDropdownHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxDropdownHeader, selector: "ix-dropdown-header", inputs: { label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxDropdownHeader = __decorate([
+    ProxyCmp({
+        inputs: ['label']
+    })
+], IxDropdownHeader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxDropdownHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-dropdown-header',
+                    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 IxDropdownItem = class IxDropdownItem {
@@ -794,10 +794,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: [{
@@ -807,7 +807,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 {
@@ -818,10 +818,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: [{
@@ -831,7 +831,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 {
@@ -856,6 +856,54 @@ 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 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;
@@ -903,30 +951,6 @@ 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 IxGroupDropdownItem = class IxGroupDropdownItem {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-/** @nocollapse */ IxGroupDropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxGroupDropdownItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxGroupDropdownItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxGroupDropdownItem, selector: "ix-group-dropdown-item", inputs: { icon: "icon", label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxGroupDropdownItem = __decorate([
-    ProxyCmp({
-        inputs: ['icon', 'label']
-    })
-], IxGroupDropdownItem);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxGroupDropdownItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-group-dropdown-item',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['icon', 'label'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxGroupItem = class IxGroupItem {
     constructor(c, r, z) {
         this.z = z;
@@ -984,10 +1008,10 @@ let IxIconButton = class IxIconButton {
     }
 };
 /** @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", 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 });
+/** @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', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'type', 'variant']
+        inputs: ['color', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'oval', 'size', 'type', 'variant']
     })
 ], IxIconButton);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconButton, decorators: [{
@@ -997,7 +1021,32 @@ 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: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'type', 'variant'],
+                    inputs: ['color', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'oval', 'size', 'type', 'variant'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxIconToggleButton = class IxIconToggleButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['pressedChange']);
+    }
+};
+/** @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: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'pressed', 'size', 'variant']
+    })
+], IxIconToggleButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxIconToggleButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-icon-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', 'size', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxInputGroup = class IxInputGroup {
@@ -1094,6 +1143,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 IxLinkButton = class IxLinkButton {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxLinkButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxLinkButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxLinkButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxLinkButton, selector: "ix-link-button", inputs: { disabled: "disabled", target: "target", url: "url" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxLinkButton = __decorate([
+    ProxyCmp({
+        inputs: ['disabled', 'target', 'url']
+    })
+], IxLinkButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxLinkButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-link-button',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['disabled', 'target', 'url'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxMapNavigation = class IxMapNavigation {
     constructor(c, r, z) {
         this.z = z;
@@ -1154,10 +1227,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", i18nCollapse: "i18nCollapse", i18nExpand: "i18nExpand", i18nLegal: "i18nLegal", i18nMore: "i18nMore", i18nSettings: "i18nSettings", i18nToggleTheme: "i18nToggleTheme", maxVisibleMenuItems: "maxVisibleMenuItems", showAbout: "showAbout", showSettings: "showSettings" }, 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', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nMore', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'showAbout', 'showSettings'],
+        inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
         methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout']
     })
 ], IxMenu);
@@ -1168,7 +1241,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', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nMore', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'showAbout', 'showSettings'],
+                    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 {
@@ -1295,6 +1368,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     inputs: ['icon', 'label'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxMenuCategory = class IxMenuCategory {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxMenuCategory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxMenuCategory, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxMenuCategory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxMenuCategory, selector: "ix-menu-category", inputs: { icon: "icon", label: "label", notifications: "notifications" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxMenuCategory = __decorate([
+    ProxyCmp({
+        inputs: ['icon', 'label', 'notifications']
+    })
+], IxMenuCategory);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxMenuCategory, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-menu-category',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['icon', 'label', 'notifications'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxMenuItem = class IxMenuItem {
     constructor(c, r, z) {
         this.z = z;
@@ -1303,10 +1400,10 @@ let IxMenuItem = class IxMenuItem {
     }
 };
 /** @nocollapse */ IxMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxMenuItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxMenuItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxMenuItem, selector: "ix-menu-item", inputs: { active: "active", bottom: "bottom", disabled: "disabled", home: "home", notifications: "notifications", tabIcon: "tabIcon" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxMenuItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxMenuItem, selector: "ix-menu-item", inputs: { active: "active", bottom: "bottom", disabled: "disabled", home: "home", icon: "icon", notifications: "notifications", tabIcon: "tabIcon" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxMenuItem = __decorate([
     ProxyCmp({
-        inputs: ['active', 'bottom', 'disabled', 'home', 'notifications', 'tabIcon']
+        inputs: ['active', 'bottom', 'disabled', 'home', 'icon', 'notifications', 'tabIcon']
     })
 ], IxMenuItem);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxMenuItem, decorators: [{
@@ -1316,7 +1413,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', 'bottom', 'disabled', 'home', 'notifications', 'tabIcon'],
+                    inputs: ['active', 'bottom', 'disabled', 'home', 'icon', 'notifications', 'tabIcon'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxMenuSettings = class IxMenuSettings {
@@ -1398,15 +1495,15 @@ let IxModal = class IxModal {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['closed', 'dismissed']);
+        proxyOutputs(this, this.el, ['dialogClose', 'dialogDismiss']);
     }
 };
 /** @nocollapse */ IxModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxModal, selector: "ix-modal", inputs: { animation: "animation", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy", backdrop: "backdrop", backdropClass: "backdropClass", beforeDismiss: "beforeDismiss", centered: "centered", content: "content", headerTitle: "headerTitle", icon: "icon", iconColor: "iconColor", keyboard: "keyboard", modalDialogClass: "modalDialogClass", scrollable: "scrollable", size: "size", windowClass: "windowClass" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxModal, selector: "ix-modal", inputs: { animation: "animation", backdrop: "backdrop", beforeDismiss: "beforeDismiss", centered: "centered", closeOnBackdropClick: "closeOnBackdropClick", keyboard: "keyboard", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxModal = __decorate([
     ProxyCmp({
-        inputs: ['animation', 'ariaDescribedBy', 'ariaLabelledBy', 'backdrop', 'backdropClass', 'beforeDismiss', 'centered', 'content', 'headerTitle', 'icon', 'iconColor', 'keyboard', 'modalDialogClass', 'scrollable', 'size', 'windowClass'],
-        methods: ['dismiss', 'close']
+        inputs: ['animation', 'backdrop', 'beforeDismiss', 'centered', 'closeOnBackdropClick', 'keyboard', 'size'],
+        methods: ['showModal', 'dismissModal', 'closeModal']
     })
 ], IxModal);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModal, decorators: [{
@@ -1416,27 +1513,25 @@ 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: ['animation', 'ariaDescribedBy', 'ariaLabelledBy', 'backdrop', 'backdropClass', 'beforeDismiss', 'centered', 'content', 'headerTitle', 'icon', 'iconColor', 'keyboard', 'modalDialogClass', 'scrollable', 'size', 'windowClass'],
+                    inputs: ['animation', 'backdrop', 'beforeDismiss', 'centered', 'closeOnBackdropClick', 'keyboard', 'size'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxModalContainer = class IxModalContainer {
+let IxModalContent = class IxModalContent {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
     }
 };
-/** @nocollapse */ IxModalContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalContainer, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxModalContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxModalContainer, selector: "ix-modal-container", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxModalContainer = __decorate([
-    ProxyCmp({
-        methods: ['showModal']
-    })
-], IxModalContainer);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalContainer, decorators: [{
+/** @nocollapse */ IxModalContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalContent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxModalContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxModalContent, selector: "ix-modal-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxModalContent = __decorate([
+    ProxyCmp({})
+], IxModalContent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ix-modal-container',
+                    selector: 'ix-modal-content',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
@@ -1465,6 +1560,53 @@ 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 IxModalFooter = class IxModalFooter {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxModalFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalFooter, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxModalFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxModalFooter, selector: "ix-modal-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxModalFooter = __decorate([
+    ProxyCmp({})
+], IxModalFooter);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-modal-footer',
+                    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 IxModalHeader = class IxModalHeader {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['closeClick']);
+    }
+};
+/** @nocollapse */ IxModalHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxModalHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxModalHeader, selector: "ix-modal-header", inputs: { hideClose: "hideClose", icon: "icon", iconColor: "iconColor" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxModalHeader = __decorate([
+    ProxyCmp({
+        inputs: ['hideClose', 'icon', 'iconColor']
+    })
+], IxModalHeader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxModalHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-modal-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['hideClose', 'icon', 'iconColor'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxPagination = class IxPagination {
     constructor(c, r, z) {
         this.z = z;
@@ -1538,19 +1680,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', '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: [{
@@ -1560,7 +1724,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 {
@@ -1621,10 +1785,10 @@ let IxSplitButton = class IxSplitButton {
     }
 };
 /** @nocollapse */ IxSplitButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxSplitButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxSplitButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxSplitButton, selector: "ix-split-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", invisible: "invisible", label: "label", outline: "outline", placement: "placement", splitIcon: "splitIcon", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxSplitButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxSplitButton, selector: "ix-split-button", inputs: { disabled: "disabled", ghost: "ghost", icon: "icon", label: "label", outline: "outline", placement: "placement", splitIcon: "splitIcon", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxSplitButton = __decorate([
     ProxyCmp({
-        inputs: ['disabled', 'ghost', 'icon', 'invisible', 'label', 'outline', 'placement', 'splitIcon', 'variant']
+        inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'splitIcon', 'variant']
     })
 ], IxSplitButton);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxSplitButton, decorators: [{
@@ -1634,7 +1798,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', 'label', 'outline', 'placement', 'splitIcon', 'variant'],
+                    inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'splitIcon', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxSplitButtonItem = class IxSplitButtonItem {
@@ -1667,6 +1831,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 });
@@ -1691,6 +1856,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 });
@@ -1819,10 +1985,10 @@ let IxToggle = class IxToggle {
     }
 };
 /** @nocollapse */ IxToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxToggle, selector: "ix-toggle", inputs: { checked: "checked", color: "color", disabled: "disabled", hideText: "hideText", indeterminate: "indeterminate", textIndeterminate: "textIndeterminate", textOff: "textOff", textOn: "textOn" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxToggle, selector: "ix-toggle", inputs: { checked: "checked", disabled: "disabled", hideText: "hideText", indeterminate: "indeterminate", textIndeterminate: "textIndeterminate", textOff: "textOff", textOn: "textOn" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxToggle = __decorate([
     ProxyCmp({
-        inputs: ['checked', 'color', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
+        inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
     })
 ], IxToggle);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxToggle, decorators: [{
@@ -1832,7 +1998,32 @@ 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: ['checked', 'color', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'],
+                    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 {
@@ -1884,6 +2075,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;
@@ -1918,10 +2133,10 @@ let IxValidationTooltip = class IxValidationTooltip {
     }
 };
 /** @nocollapse */ IxValidationTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxValidationTooltip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxValidationTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxValidationTooltip, selector: "ix-validation-tooltip", inputs: { message: "message", placement: "placement" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxValidationTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IxValidationTooltip, selector: "ix-validation-tooltip", inputs: { message: "message", placement: "placement", suppressAutomaticPlacement: "suppressAutomaticPlacement" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxValidationTooltip = __decorate([
     ProxyCmp({
-        inputs: ['message', 'placement']
+        inputs: ['message', 'placement', 'suppressAutomaticPlacement']
     })
 ], IxValidationTooltip);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IxValidationTooltip, decorators: [{
@@ -1931,7 +2146,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: ['message', 'placement'],
+                    inputs: ['message', 'placement', 'suppressAutomaticPlacement'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxWorkflowStep = class IxWorkflowStep {
@@ -1942,10 +2157,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: [{
@@ -1955,7 +2170,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 {
@@ -1967,10 +2182,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: [{
@@ -1980,7 +2195,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 }]; } });
 
@@ -2070,14 +2285,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: [
                 {
@@ -2089,36 +2304,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();
-        const modalInstance = await modal({
+        viewRef.detectChanges();
+        const modalInstance = await showModal({
             ...config,
-            title: '',
-            content: node,
+            content: htmlElement,
         });
         modalInstance.onClose.once(() => {
-            embeddedView.destroy();
+            viewRef.destroy();
         });
         modalInstance.onDismiss.once(() => {
-            embeddedView.destroy();
+            viewRef.destroy();
         });
         return modalInstance;
     }
@@ -2167,9 +2381,8 @@ const appInitialize = (doc) => {
 
 const DIRECTIVES = [
     IxActionCard,
-    IxAnimatedTab,
-    IxAnimatedTabs,
     IxApplicationHeader,
+    IxAvatar,
     IxBasicNavigation,
     IxBlind,
     IxBreadcrumb,
@@ -2182,14 +2395,15 @@ const DIRECTIVES = [
     IxCardTitle,
     IxCategoryFilter,
     IxChip,
+    IxCol,
     IxContentHeader,
-    IxCounterPill,
     IxDatePicker,
     IxDatetimePicker,
     IxDivider,
     IxDrawer,
     IxDropdown,
     IxDropdownButton,
+    IxDropdownHeader,
     IxDropdownItem,
     IxDropdownQuickActions,
     IxEmptyState,
@@ -2199,16 +2413,19 @@ const DIRECTIVES = [
     IxFilterChip,
     IxFlipTile,
     IxFlipTileContent,
+    IxFormField,
+    IxGrid,
     IxGroup,
     IxGroupContextMenu,
-    IxGroupDropdownItem,
     IxGroupItem,
     IxIcon,
     IxIconButton,
+    IxIconToggleButton,
     IxInputGroup,
     IxKeyValue,
     IxKeyValueList,
     IxKpi,
+    IxLinkButton,
     IxMapNavigation,
     IxMapNavigationOverlay,
     IxMenu,
@@ -2217,16 +2434,20 @@ const DIRECTIVES = [
     IxMenuAboutNews,
     IxMenuAvatar,
     IxMenuAvatarItem,
+    IxMenuCategory,
     IxMenuItem,
     IxMenuSettings,
     IxMenuSettingsItem,
     IxMessageBar,
     IxModal,
-    IxModalContainer,
+    IxModalContent,
     IxModalExample,
+    IxModalFooter,
+    IxModalHeader,
     IxPagination,
     IxPill,
     IxPushCard,
+    IxRow,
     IxSelect,
     IxSelectItem,
     IxSpinner,
@@ -2239,14 +2460,85 @@ const DIRECTIVES = [
     IxToast,
     IxToastContainer,
     IxToggle,
+    IxToggleButton,
     IxTooltip,
     IxTreeItem,
+    IxTypography,
     IxUpload,
     IxValidationTooltip,
     IxWorkflowStep,
     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);
+    }
+}
+/** @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
  *
@@ -2255,6 +2547,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();
@@ -2431,7 +2726,12 @@ 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,
+    SelectValueAccessor,
+];
 class IxModule {
     static forRoot() {
         return {
@@ -2451,7 +2751,9 @@ 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, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxCounterPill, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupDropdownItem, IxGroupItem, IxIcon, IxIconButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContainer, IxModalExample, 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, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxCounterPill, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupDropdownItem, IxGroupItem, IxIcon, IxIconButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContainer, IxModalExample, 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, 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.ɵ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,
@@ -2474,5 +2776,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IxActionCard, IxActiveModal, IxAnimatedTab, IxAnimatedTabs, IxApplicationHeader, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxCounterPill, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownItem, IxDropdownQuickActions, IxDropdownTriggerDirective, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupDropdownItem, IxGroupItem, IxIcon, IxIconButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContainer, IxModalExample, 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 { 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 };
 //# sourceMappingURL=siemens-ix-angular.mjs.map