@flywheel-io/vision 2.0.0-beta.10 → 2.0.0-beta.12

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

@@ -1,28 +1,43 @@
-import { AfterContentInit, EventEmitter } from '@angular/core';
+import { AfterViewInit } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { FwTextInputComponent } from '../../text-input/text-input.component';
 import { FwMenuComponent } from '../menu.component';
+import { FwMenuItemComponent } from '../menu-item/menu-item.component';
 import * as i0 from "@angular/core";
-export declare class FwMenuContainerComponent implements AfterContentInit {
+import * as i1 from "@angular/cdk/coercion";
+export declare class FwMenuContainerComponent implements AfterViewInit {
     private sanitizer;
     width?: string;
     maxHeight?: string;
     minHeight?: string;
     border?: 'none' | 'default';
     shadow?: 'none' | 'small' | 'medium' | 'large' | 'extra-large' | 'inner';
-    showFilter?: boolean;
+    showFilter: boolean;
     filterText?: string;
+    focusFilterOnMount: boolean;
     offset?: string;
-    /**
-     * @deprecated please use fw-navbar instead
-     */
-    collapsed?: boolean;
-    readonly filterChanged: EventEmitter<string>;
+    emptyText: import("@angular/core").InputSignal<string>;
+    filteredMenuItems: FwMenuItemComponent[];
+    filteredMenuItemChange: import("@angular/core").OutputEmitterRef<FwMenuItemComponent[]>;
+    private defaultFilterFn;
+    filterFn: import("@angular/core").InputSignal<(filter: string, menuItems: FwMenuItemComponent[]) => FwMenuItemComponent[]>;
+    filterChanged: import("@angular/core").OutputEmitterRef<string>;
+    filterRef: FwTextInputComponent;
     menu: FwMenuComponent;
+    additionalMenuItems: import("@angular/core").InputSignal<FwMenuItemComponent[]>;
+    childMenuItems: import("@angular/core").Signal<readonly FwMenuItemComponent[]>;
+    private combinedMenuItems;
+    keyHandler: (event: KeyboardEvent) => void;
     get classes(): string;
     get style(): SafeStyle;
     constructor(sanitizer: DomSanitizer);
-    ngAfterContentInit(): void;
-    filterTextChange(event: Event): void;
+    ngAfterViewInit(): void;
+    noResults: import("@angular/core").WritableSignal<boolean>;
+    handleFilterClick(event: Event): void;
+    handleFilterInput(event: Event): void;
+    onFilterChange(filter: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container", never, { "width": { "alias": "width"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "border": { "alias": "border"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "showFilter": { "alias": "showFilter"; "required": false; }; "filterText": { "alias": "filterText"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "filterChanged": "filterChanged"; }, ["menu"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container, fw-menu-filter", never, { "width": { "alias": "width"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "border": { "alias": "border"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "showFilter": { "alias": "showFilter"; "required": false; }; "filterText": { "alias": "filterText"; "required": false; }; "focusFilterOnMount": { "alias": "focusFilterOnMount"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "additionalMenuItems": { "alias": "additionalMenuItems"; "required": false; "isSignal": true; }; "keyHandler": { "alias": "keyHandler"; "required": false; }; }, { "filteredMenuItemChange": "filteredMenuItemChange"; "filterChanged": "filterChanged"; }, ["childMenuItems", "menu"], [".filter-content", "*", "custom-menu-items"], false, never>;
+    static ngAcceptInputType_showFilter: i1.BooleanInput;
+    static ngAcceptInputType_focusFilterOnMount: i1.BooleanInput;
 }

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

@@ -1,8 +1,9 @@
-import { AfterContentInit, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
 import { IconType } from '../../icon/icon.types';
 import { FwMenuSubItemComponent } from '../menu-sub-item/menu-sub-item.component';
 import * as i0 from "@angular/core";
 export declare class FwMenuItemComponent implements OnChanges, OnDestroy, AfterContentInit {
+    private elementRef;
     value?: string;
     size?: 'default' | 'compact';
     title: string;
@@ -23,10 +24,8 @@ 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';
+    constructor(elementRef: ElementRef<HTMLElement>);
+    scrollIntoView(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
@@ -34,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": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "checkboxColor": { "alias": "checkboxColor"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "subItemsOpen": { "alias": "subItemsOpen"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "click": "click"; }, ["subItems"], ["fw-avatar", "p", "fw-badge", "fw-icon", "fw-icon-button", "fw-menu-sub-item"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuItemComponent, "fw-menu-item", never, { "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "checkboxColor": { "alias": "checkboxColor"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "subItemsOpen": { "alias": "subItemsOpen"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "click": "click"; }, ["subItems"], ["fw-avatar", "p", "fw-badge", "fw-icon", "fw-icon-button", "fw-menu-sub-item"], false, never>;
 }

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

@@ -15,11 +15,7 @@ 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": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "click": "click"; }, never, ["p", "fw-badge", "fw-icon", "fw-icon-button"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuSubItemComponent, "fw-menu-sub-item", never, { "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "click": "click"; }, never, ["p", "fw-badge", "fw-icon", "fw-icon-button"], false, never>;
 }

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FwMenuItemComponent } from './menu-item/menu-item.component';
 import * as i0 from "@angular/core";
@@ -9,40 +9,20 @@ export declare class FwMenuComponent implements ControlValueAccessor, OnChanges,
     useCheckbox?: boolean;
     value?: string | string[];
     change: EventEmitter<string | string[]>;
-    filteredItemsChange: EventEmitter<FwMenuItemComponent[]>;
     menuItems: QueryList<FwMenuItemComponent>;
     menuContentWrapper: ElementRef;
-    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;
-    noFilterResults: boolean;
     onChange: (value: string | string[]) => void;
     onTouched: () => void;
     private subscriptions;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
     writeValue(value: string | string[]): void;
     registerOnChange(fn: (value: string | string[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState?(isDisabled: boolean): void;
-    setFilter(filterText: string): void;
     handleSelect(value: string): void;
     updateLayout(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuComponent, "fw-menu", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "useCheckbox": { "alias": "useCheckbox"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; }; "openWidth": { "alias": "openWidth"; "required": false; }; }, { "change": "change"; "filteredItemsChange": "filteredItemsChange"; }, ["menuContentWrapper", "menuItems"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuComponent, "fw-menu", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "useCheckbox": { "alias": "useCheckbox"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["menuContentWrapper", "menuItems"], ["*"], false, never>;
 }

package/components/paginator/paginator.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnChanges, SimpleChanges, TrackByFunction } from '@angular/core';
 import { FwPaginatorEvent } from './paginator.model';
 import * as i0 from "@angular/core";
 export interface PaginationPage {
@@ -6,7 +6,7 @@ export interface PaginationPage {
     number: number;
     active: boolean;
 }
-export declare class FwPaginatorComponent {
+export declare class FwPaginatorComponent implements OnChanges {
     size: 'small' | 'medium' | 'large';
     color: 'slate' | 'primary' | 'secondary';
     shape: 'rounded' | 'circle';
@@ -23,6 +23,9 @@ export declare class FwPaginatorComponent {
     alignment: 'start' | 'center' | 'end';
     selectorTitle: string;
     page: EventEmitter<FwPaginatorEvent>;
+    pages: PaginationPage[];
+    pagesTrackByFn: TrackByFunction<PaginationPage>;
+    ngOnChanges(changes: SimpleChanges): void;
     private buildPageEvent;
     firstPage(): void;
     lastPage(): void;

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

@@ -1,21 +1,33 @@
+import { BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, WritableSignal } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FwMenuComponent } from '../../menu/menu.component';
+import { FwMenuContainerComponent } from '../../menu/menu-container/menu-container.component';
 import { FwMenuItemComponent } from '../../menu/menu-item/menu-item.component';
 import * as i0 from "@angular/core";
-export declare class FwMultiSelectMenuComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnDestroy {
+/**
+ * FwMultiSelect a component for selecting multiple options
+ * @see [Storybook Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-multi-select--docs)
+ */
+export declare class FwMultiSelectMenuComponent implements ControlValueAccessor, AfterContentInit, OnDestroy {
     protected _changeDetectorRef: ChangeDetectorRef;
+    private elementRef;
     outsideClick(): void;
     options: object[];
     valueProperty?: string;
     titleProperty?: string;
     iconProperty?: string;
+    emptyText: string;
+    placeholder: string;
     disabled?: boolean;
     useCheckbox?: boolean;
     closeOnSelect?: boolean;
-    filterItemsOnSelect?: boolean;
     maxSelectedShown: number;
+    showClear: import("@angular/core").InputSignal<boolean>;
+    showFilter: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    showSelectionInfo: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    filterItemsOnSelect: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     width: string;
     minHeight: string;
     maxHeight: string;
@@ -23,44 +35,48 @@ export declare class FwMultiSelectMenuComponent implements ControlValueAccessor,
     minOptionsHeight?: string;
     maxOptionsHeight?: string;
     size?: 'small' | 'medium' | 'large';
-    placeholder: string;
-    emptyText: string;
     trigger: CdkMenuTrigger;
     menu: FwMenuComponent;
+    menuFilter: import("@angular/core").Signal<FwMenuContainerComponent>;
     renderedMenuItems: QueryList<FwMenuItemComponent>;
     customMenuItems: QueryList<FwMenuItemComponent>;
-    selectedValues: string[];
+    createArray: (d: Iterable<unknown>) => unknown[];
+    selectedValues: Set<string>;
     selectedOptions: object[];
-    filteredOptions: object[];
+    displayedOptions: WritableSignal<FwMenuItemComponent[]>;
+    focusedIndex: WritableSignal<number>;
+    touched: boolean;
     private subscriptions;
-    textInput: ElementRef<HTMLInputElement>;
-    textInitialInput: ElementRef<HTMLInputElement>;
-    change: EventEmitter<any>;
-    focused: number;
-    private touched;
     private _isOpen;
+    change: EventEmitter<any>;
     get value(): any[];
     set value(newValue: any[]);
     private _value;
-    constructor(_changeDetectorRef: ChangeDetectorRef);
+    constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef);
+    tabIndex: number;
+    pointerEvents: string;
     onChange: (value: any[]) => void;
     onTouched: () => void;
     registerOnChange(fn: (value: any[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState?(isDisabled: boolean): void;
     writeValue(value: any[]): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
-    registerCustomMenuItems(): void;
+    private registerCustomMenuItems;
     handleTouched(): void;
-    handleClose(chip: object): void;
+    handleChipClose(chip: object): void;
     handleChange(e: string[]): void;
-    updateFilteredItems(): void;
-    updateValue(incomingValues: any[], additive?: boolean): void;
-    moveFocused(direction: string): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleFilterChange(event: Event): void;
+    addValue(incoming: string): void;
+    updateValue(incomingValues: any[]): void;
+    customFilter: (filter: string, menuItems: FwMenuItemComponent[]) => FwMenuItemComponent[];
+    private moveFocused;
+    setFocusedIndex(item: unknown): void;
+    displayFocusIndicator: import("@angular/core").EffectRef;
+    private keyboardActionMap;
+    private closedTriggerKeyboardActionsMap;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    private postSelectSideEffects;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMultiSelectMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMultiSelectMenuComponent, "fw-multi-select", never, { "options": { "alias": "options"; "required": false; }; "valueProperty": { "alias": "valueProperty"; "required": false; }; "titleProperty": { "alias": "titleProperty"; "required": false; }; "iconProperty": { "alias": "iconProperty"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useCheckbox": { "alias": "useCheckbox"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "filterItemsOnSelect": { "alias": "filterItemsOnSelect"; "required": false; }; "maxSelectedShown": { "alias": "maxSelectedShown"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "optionsWidth": { "alias": "optionsWidth"; "required": false; }; "minOptionsHeight": { "alias": "minOptionsHeight"; "required": false; }; "maxOptionsHeight": { "alias": "maxOptionsHeight"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["customMenuItems"], ["[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMultiSelectMenuComponent, "fw-multi-select", never, { "options": { "alias": "options"; "required": false; }; "valueProperty": { "alias": "valueProperty"; "required": false; }; "titleProperty": { "alias": "titleProperty"; "required": false; }; "iconProperty": { "alias": "iconProperty"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "useCheckbox": { "alias": "useCheckbox"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "maxSelectedShown": { "alias": "maxSelectedShown"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "showSelectionInfo": { "alias": "showSelectionInfo"; "required": false; "isSignal": true; }; "filterItemsOnSelect": { "alias": "filterItemsOnSelect"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "optionsWidth": { "alias": "optionsWidth"; "required": false; }; "minOptionsHeight": { "alias": "minOptionsHeight"; "required": false; }; "maxOptionsHeight": { "alias": "maxOptionsHeight"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["customMenuItems"], ["[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]"], false, never>;
 }

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

@@ -4,13 +4,14 @@ import * as i2 from "./select-menu.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/cdk/menu";
 import * as i5 from "@angular/forms";
-import * as i6 from "../chip/chip.module";
-import * as i7 from "../icon/icon.module";
-import * as i8 from "../menu/menu.module";
-import * as i9 from "../text-input/text-input.module";
-import * as i10 from "../../directives/menu-register.directive";
+import * as i6 from "../button/button.module";
+import * as i7 from "../chip/chip.module";
+import * as i8 from "../icon/icon.module";
+import * as i9 from "../menu/menu.module";
+import * as i10 from "../text-input/text-input.module";
+import * as i11 from "../../directives/menu-register.directive";
 export declare class FwSelectMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwSelectMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwSelectMenuModule, [typeof i1.FwMultiSelectMenuComponent, typeof i2.FwSelectMenuComponent], [typeof i3.CommonModule, typeof i4.CdkMenuModule, typeof i5.FormsModule, typeof i6.FwChipModule, typeof i7.FwIconModule, typeof i8.FwMenuModule, typeof i9.FwTextInputModule, typeof i10.MenuRegisterDirective], [typeof i1.FwMultiSelectMenuComponent, typeof i2.FwSelectMenuComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwSelectMenuModule, [typeof i1.FwMultiSelectMenuComponent, typeof i2.FwSelectMenuComponent], [typeof i3.CommonModule, typeof i4.CdkMenuModule, typeof i5.FormsModule, typeof i6.FwButtonModule, typeof i7.FwChipModule, typeof i8.FwIconModule, typeof i9.FwMenuModule, typeof i10.FwTextInputModule, typeof i11.MenuRegisterDirective], [typeof i1.FwMultiSelectMenuComponent, typeof i2.FwSelectMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwSelectMenuModule>;
 }

package/components/table/row.d.ts

@@ -6,9 +6,8 @@ import * as i0 from "@angular/core";
  */
 export declare class FwHeaderRowDef extends CdkHeaderRowDef {
     columns: string[];
-    sticky: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwHeaderRowDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FwHeaderRowDef, "[fwHeaderRowDef]", never, { "columns": { "alias": "fwHeaderRowDef"; "required": false; }; "sticky": { "alias": "fwHeaderRowDefSticky"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FwHeaderRowDef, "[fwHeaderRowDef]", never, { "columns": { "alias": "fwHeaderRowDef"; "required": false; }; }, {}, never, never, false, never>;
 }
 /**
  * Footer row definition for the fw-table.
@@ -16,9 +15,8 @@ export declare class FwHeaderRowDef extends CdkHeaderRowDef {
  */
 export declare class FwFooterRowDef extends CdkFooterRowDef {
     columns: string[];
-    sticky: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwFooterRowDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FwFooterRowDef, "[fwFooterRowDef]", never, { "columns": { "alias": "fwFooterRowDef"; "required": false; }; "sticky": { "alias": "fwFooterRowDefSticky"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FwFooterRowDef, "[fwFooterRowDef]", never, { "columns": { "alias": "fwFooterRowDef"; "required": false; }; }, {}, never, never, false, never>;
 }
 /**
  * Data row definition for the fw-table.

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { IconType } from '../icon/icon.types';
 import * as i0 from "@angular/core";
@@ -6,9 +6,7 @@ export declare class FwTextInputComponent implements ControlValueAccessor {
     disabled?: boolean;
     useActionableIcons?: boolean;
     leftIcon?: IconType;
-    leftIconAction?: EventEmitter<void>;
     rightIcon?: string;
-    rightIconAction?: EventEmitter<void>;
     prefix?: string;
     context?: string;
     /**
@@ -24,11 +22,15 @@ export declare class FwTextInputComponent implements ControlValueAccessor {
     size?: 'small' | 'medium' | 'large';
     type?: string;
     maxLength?: number;
-    autofocus?: string;
+    autofocus?: boolean;
     autocomplete?: string;
+    value: string;
+    inputRef: ElementRef<HTMLInputElement>;
     error?: boolean;
+    leftIconAction: EventEmitter<void>;
+    rightIconAction: EventEmitter<void>;
     textInput: any;
-    value: string;
+    width: string;
     externalControl: FormControl;
     onTouch: () => void;
     onChange: (value: string) => void;
@@ -40,6 +42,7 @@ export declare class FwTextInputComponent implements ControlValueAccessor {
     blurHandler(): void;
     onLeftIconClick(): void;
     onRightIconClick(): void;
+    focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwTextInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextInputComponent, "fw-text-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "useActionableIcons": { "alias": "useActionableIcons"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "context": { "alias": "context"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "error": { "alias": "error"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "leftIconAction": "leftIconAction"; "rightIconAction": "rightIconAction"; }, ["textInput"], ["input", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextInputComponent, "fw-text-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "useActionableIcons": { "alias": "useActionableIcons"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "context": { "alias": "context"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "value": { "alias": "value"; "required": false; }; "error": { "alias": "error"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "leftIconAction": "leftIconAction"; "rightIconAction": "rightIconAction"; }, ["textInput"], ["input", "*"], false, never>;
 }

package/esm2022/components/alert/alert.component.mjs

@@ -10,10 +10,10 @@ export class FwAlertComponent {
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FwAlertComponent, selector: "fw-alert", inputs: { description: "description", icon: "icon", severity: "severity", title: "title", variant: "variant", showClose: "showClose" }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['fw-alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"fw-alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"fw-alert-text\">\n    <h4 *ngIf=\"title\" class=\"vision-h4\">{{ title }}</h4>\n    <p *ngIf=\"description\" class=\"vision-p2\">{{ description }}</p>\n    <p class=\"vision-p2\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"close-icon\">\n    <ng-content select=\"fw-button\"></ng-content>\n    <fw-icon-button\n      *ngIf=\"showClose\"\n      icon=\"close\" size=\"small\"\n      [color]=\"variant==='filled'?'overlay':severity\"\n      (click)=\"close?close.emit():undefined\">\n    </fw-icon-button>\n  </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-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: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: i3.FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwAlertComponent, selector: "fw-alert", inputs: { description: "description", icon: "icon", severity: "severity", title: "title", variant: "variant", showClose: "showClose" }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['fw-alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"fw-alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"fw-alert-text\">\n    <h4 *ngIf=\"title\" class=\"vision-h4\">{{ title }}</h4>\n    <p *ngIf=\"description\" class=\"vision-p2\">{{ description }}</p>\n    <p class=\"vision-p2\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"close-icon\">\n    <ng-content select=\"fw-button\"></ng-content>\n    <fw-icon-button\n      *ngIf=\"showClose\"\n      icon=\"close\" size=\"small\"\n      [color]=\"variant==='filled'?'overlay':severity\"\n      (click)=\"close?close.emit():undefined\">\n    </fw-icon-button>\n  </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-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: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: i3.FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-alert', template: "<div [ngClass]=\"['fw-alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"fw-alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"fw-alert-text\">\n    <h4 *ngIf=\"title\" class=\"vision-h4\">{{ title }}</h4>\n    <p *ngIf=\"description\" class=\"vision-p2\">{{ description }}</p>\n    <p class=\"vision-p2\">\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <div class=\"close-icon\">\n    <ng-content select=\"fw-button\"></ng-content>\n    <fw-icon-button\n      *ngIf=\"showClose\"\n      icon=\"close\" size=\"small\"\n      [color]=\"variant==='filled'?'overlay':severity\"\n      (click)=\"close?close.emit():undefined\">\n    </fw-icon-button>\n  </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
         }], propDecorators: { description: [{

package/esm2022/components/alert/alert.module.mjs

@@ -5,15 +5,15 @@ import { FwIconButtonModule } from '../icon-button/icon-button.module';
 import { FwAlertComponent } from './alert.component';
 import * as i0 from "@angular/core";
 export class FwAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FwAlertModule, declarations: [FwAlertComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwAlertModule, declarations: [FwAlertComponent], imports: [CommonModule,
             FwIconModule,
             FwIconButtonModule], exports: [FwAlertComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAlertModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAlertModule, imports: [CommonModule,
             FwIconModule,
             FwIconButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -16,10 +16,10 @@ export class FwAppIconComponent {
     get cssClass() {
         return ['fw-app-icon', this.size, this.color, this.variant].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-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;width:16px;min-width: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;width:20px;min-width: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;width:32px;min-width: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;width:48px;min-width: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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-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;width:16px;min-width: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;width:20px;min-width: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;width:32px;min-width: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;width:48px;min-width: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: "16.2.12", ngImport: i0, type: FwAppIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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}: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-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;width:16px;min-width: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;width:20px;min-width: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;width:32px;min-width: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;width:48px;min-width: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: [{

package/esm2022/components/app-icon/app-icon.module.mjs

@@ -4,13 +4,13 @@ import { FwIconModule } from '../icon/icon.module';
 import { FwAppIconComponent } from './app-icon.component';
 import * as i0 from "@angular/core";
 export class FwAppIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAppIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FwAppIconModule, declarations: [FwAppIconComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAppIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwAppIconModule, declarations: [FwAppIconComponent], imports: [CommonModule,
             FwIconModule], exports: [FwAppIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAppIconModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAppIconModule, imports: [CommonModule,
             FwIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAppIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAppIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/components/avatar/avatar.component.mjs

@@ -24,10 +24,10 @@ export class FwAvatarComponent {
     errorImage() {
         this.isImageBroken = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;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: "16.2.12", ngImport: i0, type: FwAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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<ng-template #displayInitial>\n  <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;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: [{

package/esm2022/components/avatar/avatar.module.mjs

@@ -4,13 +4,13 @@ import { FwIconModule } from '../icon/icon.module';
 import { FwAvatarComponent } from './avatar.component';
 import * as i0 from "@angular/core";
 export class FwAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FwAvatarModule, declarations: [FwAvatarComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarModule, declarations: [FwAvatarComponent], imports: [CommonModule,
             FwIconModule], exports: [FwAvatarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAvatarModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarModule, imports: [CommonModule,
             FwIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FwAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [