@flywheel-io/vision 1.3.3 → 1.5.0

package/components/button-toggle/button-toggle-item/button-toggle-item.component.d.ts

@@ -3,16 +3,18 @@ import * as i0 from "@angular/core";
 export declare class FwButtonToggleItemComponent {
     title?: string;
     icon?: string;
+    selectedIcon?: string;
     value: string;
     selected: boolean;
     disabled: boolean;
     size?: 'small' | 'medium' | 'large';
     color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
     selectedColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
+    selectedStyle?: 'background' | 'foreground';
     click: EventEmitter<string>;
     get classes(): string;
     constructor();
     handleClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwButtonToggleItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonToggleItemComponent, "fw-button-toggle-item", never, { "title": "title"; "icon": "icon"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "size": "size"; "color": "color"; "selectedColor": "selectedColor"; }, { "click": "click"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonToggleItemComponent, "fw-button-toggle-item", never, { "title": "title"; "icon": "icon"; "selectedIcon": "selectedIcon"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "size": "size"; "color": "color"; "selectedColor": "selectedColor"; "selectedStyle": "selectedStyle"; }, { "click": "click"; }, never, never, false>;
 }

package/components/dialog/dialog-actions.component.d.ts

@@ -0,0 +1,9 @@
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class FwDialogActionsComponent {
+    private sanitizer;
+    get style(): SafeStyle;
+    constructor(sanitizer: DomSanitizer);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogActionsComponent, "fw-dialog-actions", never, {}, {}, never, ["*"], false>;
+}

package/components/dialog/dialog-confirm.component.d.ts

@@ -5,6 +5,8 @@ import * as i0 from "@angular/core";
 export declare class FwDialogConfirmComponent {
     dialogRef: DialogRef;
     title?: string;
+    icon?: string;
+    iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate';
     confirmColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'warning' | 'success';
     confirmButtonText?: string;
     confirmButtonIcon?: string;
@@ -18,5 +20,5 @@ export declare class FwDialogConfirmComponent {
     constructor(dialogRef: DialogRef);
     handleCloseButton(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogConfirmComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogConfirmComponent, "fw-dialog-confirm", never, { "title": "title"; "confirmColor": "confirmColor"; "confirmButtonText": "confirmButtonText"; "confirmButtonIcon": "confirmButtonIcon"; "cancelButtonText": "cancelButtonText"; "contentIcon": "contentIcon"; "contentTitle": "contentTitle"; "contentText": "contentText"; }, { "close": "close"; "confirm": "confirm"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogConfirmComponent, "fw-dialog-confirm", never, { "title": "title"; "icon": "icon"; "iconColor": "iconColor"; "confirmColor": "confirmColor"; "confirmButtonText": "confirmButtonText"; "confirmButtonIcon": "confirmButtonIcon"; "cancelButtonText": "cancelButtonText"; "contentIcon": "contentIcon"; "contentTitle": "contentTitle"; "contentText": "contentText"; }, { "close": "close"; "confirm": "confirm"; }, never, never, false>;
 }

package/components/dialog/dialog-content.component.d.ts

@@ -0,0 +1,10 @@
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class FwDialogContentComponent {
+    private sanitizer;
+    padded?: boolean;
+    get style(): SafeStyle;
+    constructor(sanitizer: DomSanitizer);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogContentComponent, "fw-dialog-content", never, { "padded": "padded"; }, {}, never, ["*"], false>;
+}

package/components/dialog/dialog-header.component.d.ts

@@ -0,0 +1,9 @@
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class FwDialogHeaderComponent {
+    private sanitizer;
+    get style(): SafeStyle;
+    constructor(sanitizer: DomSanitizer);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogHeaderComponent, "fw-dialog-header", never, {}, {}, never, ["*"], false>;
+}

package/components/dialog/dialog-simple.component.d.ts

@@ -5,14 +5,20 @@ export declare class FwDialogSimpleComponent {
     dialogRef: DialogRef;
     width?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
     title?: string;
+    icon?: string;
+    iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate';
     showClose?: boolean;
     actionButtonText?: string;
+    actionButtonIcon?: string;
     cancelButtonText?: string;
+    alternateButtonText?: string;
+    alternateButtonIcon?: string;
     contentText?: string;
     close: EventEmitter<void>;
     action: EventEmitter<void>;
+    alternateAction: EventEmitter<void>;
     constructor(dialogRef: DialogRef);
     handleCloseButton(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogSimpleComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogSimpleComponent, "fw-dialog-simple", never, { "width": "width"; "title": "title"; "showClose": "showClose"; "actionButtonText": "actionButtonText"; "cancelButtonText": "cancelButtonText"; "contentText": "contentText"; }, { "close": "close"; "action": "action"; }, never, ["fw-dialog-content"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogSimpleComponent, "fw-dialog-simple", never, { "width": "width"; "title": "title"; "icon": "icon"; "iconColor": "iconColor"; "showClose": "showClose"; "actionButtonText": "actionButtonText"; "actionButtonIcon": "actionButtonIcon"; "cancelButtonText": "cancelButtonText"; "alternateButtonText": "alternateButtonText"; "alternateButtonIcon": "alternateButtonIcon"; "contentText": "contentText"; }, { "close": "close"; "action": "action"; "alternateAction": "alternateAction"; }, never, ["fw-dialog-content"], false>;
 }

package/components/dialog/dialog.component.d.ts

@@ -1,6 +1,5 @@
 import { DialogRef } from '@angular/cdk/dialog';
 import { EventEmitter } from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export declare enum DialogWidth {
     ExtraSmall = "extra-small",
@@ -13,29 +12,13 @@ export declare class FwDialogComponent {
     protected dialogRef: DialogRef;
     width?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
     title?: string;
+    icon?: string;
+    iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate';
     showClose?: boolean;
     close: EventEmitter<void>;
     constructor(dialogRef: DialogRef);
     get classes(): string;
     protected handleCloseButton(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogComponent, "fw-dialog", never, { "width": "width"; "title": "title"; "showClose": "showClose"; }, { "close": "close"; }, never, ["fw-dialog-header", "fw-dialog-content", "fw-dialog-actions"], false>;
-}
-export declare class FwDialogHeaderComponent {
-    private sanitizer;
-    get style(): SafeStyle;
-    constructor(sanitizer: DomSanitizer);
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogHeaderComponent, "fw-dialog-header", never, {}, {}, never, ["*"], false>;
-}
-export declare class FwDialogContentComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogContentComponent, "fw-dialog-content", never, {}, {}, never, ["*"], false>;
-}
-export declare class FwDialogActionsComponent {
-    private sanitizer;
-    get style(): SafeStyle;
-    constructor(sanitizer: DomSanitizer);
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogActionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogActionsComponent, "fw-dialog-actions", never, {}, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogComponent, "fw-dialog", never, { "width": "width"; "title": "title"; "icon": "icon"; "iconColor": "iconColor"; "showClose": "showClose"; }, { "close": "close"; }, never, ["fw-dialog-header", "fw-dialog-content", "fw-dialog-actions"], false>;
 }

package/components/dialog/dialogs.module.d.ts

@@ -1,15 +1,18 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./dialog.component";
-import * as i2 from "./dialog-confirm.component";
-import * as i3 from "./dialog-simple.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/cdk/dialog";
-import * as i6 from "../button/button.module";
-import * as i7 from "../icon-button/icon-button.module";
-import * as i8 from "../icon/icon.module";
-import * as i9 from "../shared/pipes/pipes.module";
+import * as i1 from "./dialog-actions.component";
+import * as i2 from "./dialog.component";
+import * as i3 from "./dialog-confirm.component";
+import * as i4 from "./dialog-content.component";
+import * as i5 from "./dialog-header.component";
+import * as i6 from "./dialog-simple.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/cdk/dialog";
+import * as i9 from "../button/button.module";
+import * as i10 from "../icon-button/icon-button.module";
+import * as i11 from "../icon/icon.module";
+import * as i12 from "../shared/pipes/pipes.module";
 export declare class FwDialogsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwDialogsModule, [typeof i1.FwDialogActionsComponent, typeof i1.FwDialogComponent, typeof i2.FwDialogConfirmComponent, typeof i1.FwDialogContentComponent, typeof i1.FwDialogHeaderComponent, typeof i3.FwDialogSimpleComponent], [typeof i4.CommonModule, typeof i5.DialogModule, typeof i6.FwButtonModule, typeof i7.FwIconButtonModule, typeof i8.FwIconModule, typeof i9.PipesModule], [typeof i1.FwDialogActionsComponent, typeof i1.FwDialogComponent, typeof i2.FwDialogConfirmComponent, typeof i1.FwDialogContentComponent, typeof i1.FwDialogHeaderComponent, typeof i3.FwDialogSimpleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwDialogsModule, [typeof i1.FwDialogActionsComponent, typeof i2.FwDialogComponent, typeof i3.FwDialogConfirmComponent, typeof i4.FwDialogContentComponent, typeof i5.FwDialogHeaderComponent, typeof i6.FwDialogSimpleComponent], [typeof i7.CommonModule, typeof i8.DialogModule, typeof i9.FwButtonModule, typeof i10.FwIconButtonModule, typeof i11.FwIconModule, typeof i12.PipesModule], [typeof i1.FwDialogActionsComponent, typeof i2.FwDialogComponent, typeof i3.FwDialogConfirmComponent, typeof i4.FwDialogContentComponent, typeof i5.FwDialogHeaderComponent, typeof i6.FwDialogSimpleComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwDialogsModule>;
 }

package/components/layouts/layout-group.component.d.ts

@@ -1,7 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class FwLayoutGroupComponent {
     stackable: boolean;
+    padded: boolean;
+    justify: 'space-between' | 'space-around' | 'space-evenly' | 'flex-end' | 'flex-start';
     get classes(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutGroupComponent, "fw-layout-group", never, { "stackable": "stackable"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutGroupComponent, "fw-layout-group", never, { "stackable": "stackable"; "padded": "padded"; "justify": "justify"; }, {}, never, ["*"], false>;
 }

package/components/layouts/layouts.module.d.ts

@@ -2,11 +2,13 @@ import * as i0 from "@angular/core";
 import * as i1 from "./context/context.component";
 import * as i2 from "./toolbar/toolbar.component";
 import * as i3 from "./layout-group.component";
-import * as i4 from "./grid/grid.component";
-import * as i5 from "@angular/common";
-import * as i6 from "../icon/icon.module";
+import * as i4 from "./panel/panel.component";
+import * as i5 from "./sidebar/sidebar.component";
+import * as i6 from "./grid/grid.component";
+import * as i7 from "@angular/common";
+import * as i8 from "../icon/icon.module";
 export declare class FwLayoutsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLayoutsModule, [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent, typeof i4.FwGridComponent, typeof i4.FwGridItemComponent], [typeof i5.CommonModule, typeof i6.FwIconModule], [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent, typeof i4.FwGridComponent, typeof i4.FwGridItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLayoutsModule, [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent, typeof i4.FwLayoutPanelComponent, typeof i5.FwLayoutSidebarComponent, typeof i6.FwGridComponent, typeof i6.FwGridItemComponent], [typeof i7.CommonModule, typeof i8.FwIconModule], [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent, typeof i4.FwLayoutPanelComponent, typeof i5.FwLayoutSidebarComponent, typeof i6.FwGridComponent, typeof i6.FwGridItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwLayoutsModule>;
 }

package/components/layouts/panel/panel.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class FwLayoutPanelComponent {
+    height?: string;
+    fitted?: boolean;
+    border?: 'all' | 'left' | 'right' | 'none';
+    rounded?: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutPanelComponent, "fw-layout-panel", never, { "height": "height"; "fitted": "fitted"; "border": "border"; "rounded": "rounded"; }, {}, never, ["header", "*", "footer"], false>;
+}

package/components/layouts/sidebar/sidebar.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class FwLayoutSidebarComponent {
+    outlined: boolean;
+    rounded: boolean;
+    width?: 'third' | 'half' | 'fourth' | 'closed';
+    direction?: 'row' | 'row-reverse';
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutSidebarComponent, "fw-layout-sidebar", never, { "outlined": "outlined"; "rounded": "rounded"; "width": "width"; "direction": "direction"; }, {}, never, ["*", "aside"], false>;
+}

package/components/layouts/toolbar/toolbar.component.d.ts

@@ -1,5 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class FwLayoutToolbarComponent {
+    dense?: boolean;
+    get classes(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutToolbarComponent, "fw-layout-toolbar", never, {}, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutToolbarComponent, "fw-layout-toolbar", never, { "dense": "dense"; }, {}, never, ["*"], false>;
 }

package/components/menu/menu-container/menu-container.component.d.ts

@@ -10,8 +10,11 @@ export declare class FwMenuContainerComponent implements AfterContentInit {
     shadow?: 'none' | 'small' | 'medium' | 'large' | 'extra-large' | 'inner';
     showFilter?: boolean;
     filterText?: string;
-    collapsed?: boolean;
     offset?: string;
+    /**
+     * @deprecated please use fw-navbar instead
+     */
+    collapsed?: boolean;
     menu: FwMenuComponent;
     get classes(): string;
     get style(): SafeStyle;
@@ -19,5 +22,5 @@ export declare class FwMenuContainerComponent implements AfterContentInit {
     ngAfterContentInit(): void;
     filterTextChange(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container", never, { "width": "width"; "maxHeight": "maxHeight"; "border": "border"; "shadow": "shadow"; "showFilter": "showFilter"; "filterText": "filterText"; "collapsed": "collapsed"; "offset": "offset"; }, {}, ["menu"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container", never, { "width": "width"; "maxHeight": "maxHeight"; "border": "border"; "shadow": "shadow"; "showFilter": "showFilter"; "filterText": "filterText"; "offset": "offset"; "collapsed": "collapsed"; }, {}, ["menu"], ["*"], false>;
 }

package/components/menu/menu-item/menu-item.component.d.ts

@@ -3,11 +3,11 @@ import { FwMenuSubItemComponent } from '../menu-sub-item/menu-sub-item.component
 import * as i0 from "@angular/core";
 export declare class FwMenuItemComponent implements OnChanges, OnDestroy, AfterContentInit {
     value?: string;
-    variant?: 'default' | 'modern' | 'button';
     size?: 'default' | 'compact';
     title: string;
     description?: string;
     icon?: string;
+    iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate' | 'typography';
     disabled?: boolean;
     showCheckbox?: boolean;
     multiSelect?: boolean;
@@ -22,6 +22,10 @@ export declare class FwMenuItemComponent implements OnChanges, OnDestroy, AfterC
     selected?: boolean;
     subItems: QueryList<FwMenuSubItemComponent>;
     private subscriptions;
+    /**
+     * @deprecated please use fw-navbar-item instead
+     */
+    variant?: 'default' | 'modern' | 'button';
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
@@ -29,5 +33,5 @@ export declare class FwMenuItemComponent implements OnChanges, OnDestroy, AfterC
     toggleSubItemsView(): void;
     handleClick(evt?: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuItemComponent, "fw-menu-item", never, { "value": "value"; "variant": "variant"; "size": "size"; "title": "title"; "description": "description"; "icon": "icon"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "multiSelect": "multiSelect"; "hidden": "hidden"; "showTooltip": "showTooltip"; "collapsed": "collapsed"; "href": "href"; "target": "target"; "subItemsOpen": "subItemsOpen"; "focused": "focused"; "selected": "selected"; }, { "click": "click"; }, ["subItems"], ["fw-avatar", "p", "fw-badge", "fw-icon", "fw-icon-button", "fw-menu-sub-item"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuItemComponent, "fw-menu-item", never, { "value": "value"; "size": "size"; "title": "title"; "description": "description"; "icon": "icon"; "iconColor": "iconColor"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "multiSelect": "multiSelect"; "hidden": "hidden"; "showTooltip": "showTooltip"; "collapsed": "collapsed"; "href": "href"; "target": "target"; "subItemsOpen": "subItemsOpen"; "focused": "focused"; "selected": "selected"; "variant": "variant"; }, { "click": "click"; }, ["subItems"], ["fw-avatar", "p", "fw-badge", "fw-icon", "fw-icon-button", "fw-menu-sub-item"], false>;
 }

package/components/menu/menu-sub-item/menu-sub-item.component.d.ts

@@ -2,7 +2,6 @@ import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class FwMenuSubItemComponent {
     value?: string;
-    variant?: 'default' | 'modern' | 'button';
     size?: 'default' | 'compact';
     title: string;
     description?: string;
@@ -15,7 +14,11 @@ export declare class FwMenuSubItemComponent {
     click: EventEmitter<string>;
     focused?: boolean;
     selected?: boolean;
+    /**
+     * @deprecated please use fw-navbar-sub-item instead
+     */
+    variant?: 'default' | 'modern' | 'button';
     handleClick(evt?: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuSubItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuSubItemComponent, "fw-menu-sub-item", never, { "value": "value"; "variant": "variant"; "size": "size"; "title": "title"; "description": "description"; "icon": "icon"; "disabled": "disabled"; "hidden": "hidden"; "href": "href"; "target": "target"; "collapsed": "collapsed"; "focused": "focused"; "selected": "selected"; }, { "click": "click"; }, never, ["p", "fw-badge", "fw-icon", "fw-icon-button"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuSubItemComponent, "fw-menu-sub-item", never, { "value": "value"; "size": "size"; "title": "title"; "description": "description"; "icon": "icon"; "disabled": "disabled"; "hidden": "hidden"; "href": "href"; "target": "target"; "collapsed": "collapsed"; "focused": "focused"; "selected": "selected"; "variant": "variant"; }, { "click": "click"; }, never, ["p", "fw-badge", "fw-icon", "fw-icon-button"], false>;
 }

package/components/menu/menu.component.d.ts

@@ -5,17 +5,29 @@ import * as i0 from "@angular/core";
 export declare class FwMenuComponent implements ControlValueAccessor, OnChanges, OnDestroy, AfterContentInit {
     disabled: boolean;
     size?: 'default' | 'compact';
-    variant?: 'default' | 'modern' | 'button';
-    collapsed?: boolean;
     multiSelect?: boolean;
     useCheckbox?: boolean;
-    openWidth?: string;
-    collapsedWidth?: string;
     value?: string | string[];
     change: EventEmitter<string | string[]>;
     filteredItemsChange: EventEmitter<FwMenuItemComponent[]>;
     menuItems: QueryList<FwMenuItemComponent>;
     private _filterText;
+    /**
+     * @deprecated please use fw-navbar instead
+     */
+    variant?: 'default' | 'modern' | 'button';
+    /**
+     * @deprecated please use fw-navbar instead
+     */
+    collapsed?: boolean;
+    /**
+     * @deprecated please use fw-navbar instead
+     */
+    collapsedWidth?: string;
+    /**
+     * @deprecated please use fw-navbar instead
+     */
+    openWidth?: string;
     onChange: (value: string | string[]) => void;
     onTouched: () => void;
     private subscriptions;
@@ -30,5 +42,5 @@ export declare class FwMenuComponent implements ControlValueAccessor, OnChanges,
     handleSelect(value: string): void;
     updateLayout(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuComponent, "fw-menu", never, { "disabled": "disabled"; "size": "size"; "variant": "variant"; "collapsed": "collapsed"; "multiSelect": "multiSelect"; "useCheckbox": "useCheckbox"; "openWidth": "openWidth"; "collapsedWidth": "collapsedWidth"; "value": "value"; }, { "change": "change"; "filteredItemsChange": "filteredItemsChange"; }, ["menuItems"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuComponent, "fw-menu", never, { "disabled": "disabled"; "size": "size"; "multiSelect": "multiSelect"; "useCheckbox": "useCheckbox"; "value": "value"; "variant": "variant"; "collapsed": "collapsed"; "collapsedWidth": "collapsedWidth"; "openWidth": "openWidth"; }, { "change": "change"; "filteredItemsChange": "filteredItemsChange"; }, ["menuItems"], ["*"], false>;
 }

package/components/select-menu/multi-select-menu/multi-select-menu.component.d.ts

@@ -1,5 +1,5 @@
 import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FwMenuComponent } from '../../menu/menu.component';
 import { FwMenuItemComponent } from '../../menu/menu-item/menu-item.component';
@@ -32,6 +32,7 @@ export declare class FwMultiSelectMenuComponent implements ControlValueAccessor,
     private subscriptions;
     textInput: ElementRef<HTMLInputElement>;
     textInitialInput: ElementRef<HTMLInputElement>;
+    change: EventEmitter<any>;
     focused: number;
     private touched;
     private _isOpen;
@@ -51,12 +52,12 @@ export declare class FwMultiSelectMenuComponent implements ControlValueAccessor,
     ngAfterContentInit(): void;
     handleTouched(): void;
     handleClose(chip: object): void;
-    handleClick(e: string[]): void;
+    handleChange(e: string[]): void;
     updateFilteredItems(): void;
     updateValue(value: any[]): void;
     moveFocused(direction: string): void;
     handleKeyDown(event: KeyboardEvent): void;
     handleKeyUp(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMultiSelectMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMultiSelectMenuComponent, "fw-multi-select", never, { "options": "options"; "valueProperty": "valueProperty"; "titleProperty": "titleProperty"; "iconProperty": "iconProperty"; "disabled": "disabled"; "useCheckbox": "useCheckbox"; "closeOnSelect": "closeOnSelect"; "filterItemsOnSelect": "filterItemsOnSelect"; "maxSelectedShown": "maxSelectedShown"; "width": "width"; "minHeight": "minHeight"; "maxHeight": "maxHeight"; "optionsWidth": "optionsWidth"; "maxOptionsHeight": "maxOptionsHeight"; "placeholder": "placeholder"; "value": "value"; }, {}, ["menuItems"], ["[fw-menu-item, fw-menu-separator]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMultiSelectMenuComponent, "fw-multi-select", never, { "options": "options"; "valueProperty": "valueProperty"; "titleProperty": "titleProperty"; "iconProperty": "iconProperty"; "disabled": "disabled"; "useCheckbox": "useCheckbox"; "closeOnSelect": "closeOnSelect"; "filterItemsOnSelect": "filterItemsOnSelect"; "maxSelectedShown": "maxSelectedShown"; "width": "width"; "minHeight": "minHeight"; "maxHeight": "maxHeight"; "optionsWidth": "optionsWidth"; "maxOptionsHeight": "maxOptionsHeight"; "placeholder": "placeholder"; "value": "value"; }, { "change": "change"; }, ["menuItems"], ["[fw-menu-item, fw-menu-separator]"], false>;
 }

package/components/select-menu/select-menu.component.d.ts

@@ -1,5 +1,5 @@
 import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { AfterContentInit, ChangeDetectorRef, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FwMenuComponent } from '../menu/menu.component';
 import { FwMenuItemComponent } from '../menu/menu-item/menu-item.component';
@@ -21,6 +21,7 @@ export declare class FwSelectMenuComponent implements ControlValueAccessor, Afte
     trigger: CdkMenuTrigger;
     menu: FwMenuComponent;
     menuItems: QueryList<FwMenuItemComponent>;
+    change: EventEmitter<any>;
     selectValue: string;
     selectTitle: string;
     selectIcon: string;
@@ -69,5 +70,5 @@ export declare class FwSelectMenuComponent implements ControlValueAccessor, Afte
     handleKeyDown(event: KeyboardEvent): void;
     updateValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwSelectMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwSelectMenuComponent, "fw-select", never, { "options": "options"; "valueProperty": "valueProperty"; "titleProperty": "titleProperty"; "iconProperty": "iconProperty"; "descriptionProperty": "descriptionProperty"; "showFilter": "showFilter"; "disabled": "disabled"; "width": "width"; "optionsWidth": "optionsWidth"; "maxOptionsHeight": "maxOptionsHeight"; "placeholder": "placeholder"; "value": "value"; }, {}, ["menuItems"], ["[fw-menu-item, fw-menu-separator]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwSelectMenuComponent, "fw-select", never, { "options": "options"; "valueProperty": "valueProperty"; "titleProperty": "titleProperty"; "iconProperty": "iconProperty"; "descriptionProperty": "descriptionProperty"; "showFilter": "showFilter"; "disabled": "disabled"; "width": "width"; "optionsWidth": "optionsWidth"; "maxOptionsHeight": "maxOptionsHeight"; "placeholder": "placeholder"; "value": "value"; }, { "change": "change"; }, ["menuItems"], ["[fw-menu-item, fw-menu-separator]"], false>;
 }

package/components/text-input/text-input.component.d.ts

@@ -1,9 +1,14 @@
+import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class FwTextInputComponent implements ControlValueAccessor {
     disabled?: boolean;
+    useActionableIcons?: boolean;
     leftIcon?: string;
+    leftIconAction?: EventEmitter<void>;
     rightIcon?: string;
+    rightIconAction?: EventEmitter<void>;
+    prefix?: string;
     context?: string;
     helperText?: string;
     errorText?: string;
@@ -26,6 +31,8 @@ export declare class FwTextInputComponent implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     changeHandler(event: KeyboardEvent): void;
     blurHandler(): void;
+    onLeftIconClick(): void;
+    onRightIconClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwTextInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextInputComponent, "fw-text-input", never, { "disabled": "disabled"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; "context": "context"; "helperText": "helperText"; "errorText": "errorText"; "placeholder": "placeholder"; "readOnly": "readOnly"; "size": "size"; "type": "type"; "maxLength": "maxLength"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "error": "error"; "value": "value"; }, {}, ["textInput"], ["input", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextInputComponent, "fw-text-input", never, { "disabled": "disabled"; "useActionableIcons": "useActionableIcons"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; "prefix": "prefix"; "context": "context"; "helperText": "helperText"; "errorText": "errorText"; "placeholder": "placeholder"; "readOnly": "readOnly"; "size": "size"; "type": "type"; "maxLength": "maxLength"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "error": "error"; "value": "value"; }, { "leftIconAction": "leftIconAction"; "rightIconAction": "rightIconAction"; }, ["textInput"], ["input", "*"], false>;
 }

package/components/textarea-input/textarea-input.component.d.ts

@@ -0,0 +1,28 @@
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { min } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class FwTextAreaInputComponent implements ControlValueAccessor {
+    minRows: number;
+    maxRows: number;
+    disabled?: boolean;
+    helperText?: string;
+    errorText?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    autofocus?: string;
+    width?: string;
+    error?: boolean;
+    value: string;
+    externalControl: FormControl;
+    onTouch: () => void;
+    onChange: (value: string) => void;
+    writeValue(obj: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    changeHandler(event: KeyboardEvent): void;
+    blurHandler(): void;
+    protected readonly min: typeof min;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwTextAreaInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextAreaInputComponent, "fw-textarea-input", never, { "minRows": "minRows"; "maxRows": "maxRows"; "disabled": "disabled"; "helperText": "helperText"; "errorText": "errorText"; "placeholder": "placeholder"; "readOnly": "readOnly"; "autofocus": "autofocus"; "width": "width"; "error": "error"; "value": "value"; }, {}, never, never, false>;
+}

package/components/textarea-input/textarea-input.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./textarea-input.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/cdk/text-field";
+import * as i5 from "../icon/icon.module";
+export declare class FwTextAreaInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwTextAreaInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwTextAreaInputModule, [typeof i1.FwTextAreaInputComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.TextFieldModule, typeof i5.FwIconModule], [typeof i1.FwTextAreaInputComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FwTextAreaInputModule>;
+}

package/esm2020/components/app-icon/app-icon.component.mjs

@@ -18,10 +18,10 @@ export class FwAppIconComponent {
     }
 }
 FwAppIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { title: "title", icon: "icon", imageUrl: "imageUrl", color: "color", fontColor: "fontColor", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { title: "title", icon: "icon", imageUrl: "imageUrl", color: "color", fontColor: "fontColor", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
+            args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], icon: [{

package/esm2020/components/avatar/avatar.component.mjs

@@ -26,10 +26,10 @@ export class FwAvatarComponent {
     }
 }
 FwAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n  <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n    <img\n      *ngIf=\"!isImageBroken else displayInitial\"\n      [src]=\"imageUrl\"\n      [alt]=\"imageAltText\"\n      (load)=\"loadImage()\"\n      (error)=\"errorImage()\">\n  </div>\n  <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n    <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n  </div>\n  <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n    <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n  <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded{border-radius:12px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n  <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n    <img\n      *ngIf=\"!isImageBroken else displayInitial\"\n      [src]=\"imageUrl\"\n      [alt]=\"imageAltText\"\n      (load)=\"loadImage()\"\n      (error)=\"errorImage()\">\n  </div>\n  <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n    <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n  </div>\n  <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n    <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n  <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n  <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n    <img\n      *ngIf=\"!isImageBroken else displayInitial\"\n      [src]=\"imageUrl\"\n      [alt]=\"imageAltText\"\n      (load)=\"loadImage()\"\n      (error)=\"errorImage()\">\n  </div>\n  <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n    <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n  </div>\n  <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n    <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n  <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded{border-radius:12px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"] }]
+            args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n  <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n    <img\n      *ngIf=\"!isImageBroken else displayInitial\"\n      [src]=\"imageUrl\"\n      [alt]=\"imageAltText\"\n      (load)=\"loadImage()\"\n      (error)=\"errorImage()\">\n  </div>\n  <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n    <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n  </div>\n  <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n    <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n  <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"] }]
         }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']