@flywheel-io/vision 0.15.2 → 0.16.1

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

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./toolbar/toolbar.component";
-import * as i2 from "./layout-group.component";
-import * as i3 from "@angular/common";
+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 "@angular/common";
+import * as i5 from "../icon/icon.module";
 export declare class FwLayoutsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLayoutsModule, [typeof i1.FwLayoutToolbarComponent, typeof i2.FwLayoutGroupComponent], [typeof i3.CommonModule], [typeof i1.FwLayoutToolbarComponent, typeof i2.FwLayoutGroupComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLayoutsModule, [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent], [typeof i4.CommonModule, typeof i5.FwIconModule], [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwLayoutsModule>;
 }

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

@@ -12,11 +12,10 @@ export declare class FwMenuItemComponent {
     hidden?: boolean;
     collapsed?: boolean;
     href?: string;
-    routerLink?: string[] | string | null | undefined;
-    select?: EventEmitter<string>;
+    click: EventEmitter<string>;
     focused?: boolean;
     selected?: boolean;
     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"; "label": "label"; "subtitle": "subtitle"; "icon": "icon"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "hidden": "hidden"; "collapsed": "collapsed"; "href": "href"; "routerLink": "routerLink"; "focused": "focused"; "selected": "selected"; }, { "select": "select"; }, never, ["fw-avatar", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuItemComponent, "fw-menu-item", never, { "value": "value"; "variant": "variant"; "size": "size"; "label": "label"; "subtitle": "subtitle"; "icon": "icon"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "hidden": "hidden"; "collapsed": "collapsed"; "href": "href"; "focused": "focused"; "selected": "selected"; }, { "click": "click"; }, never, ["fw-avatar", "*"], false>;
 }

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

@@ -11,10 +11,9 @@ import * as i9 from "../icon-button/icon-button.module";
 import * as i10 from "../icon/icon.module";
 import * as i11 from "@angular/material/checkbox";
 import * as i12 from "@angular/material/menu";
-import * as i13 from "@angular/router";
-import * as i14 from "../text-input/text-input.module";
+import * as i13 from "../text-input/text-input.module";
 export declare class FwMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwMenuModule, [typeof i1.FwMenuComponent, typeof i2.FwMenuContainerComponent, typeof i3.FwMenuHeaderComponent, typeof i4.FwMenuItemComponent, typeof i5.FwMenuSeparatorComponent], [typeof i6.CdkMenuModule, typeof i7.CommonModule, typeof i8.FormsModule, typeof i9.FwIconButtonModule, typeof i10.FwIconModule, typeof i11.MatCheckboxModule, typeof i12.MatMenuModule, typeof i13.RouterModule, typeof i14.FwTextInputModule], [typeof i1.FwMenuComponent, typeof i2.FwMenuContainerComponent, typeof i3.FwMenuHeaderComponent, typeof i4.FwMenuItemComponent, typeof i5.FwMenuSeparatorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwMenuModule, [typeof i1.FwMenuComponent, typeof i2.FwMenuContainerComponent, typeof i3.FwMenuHeaderComponent, typeof i4.FwMenuItemComponent, typeof i5.FwMenuSeparatorComponent], [typeof i6.CdkMenuModule, typeof i7.CommonModule, typeof i8.FormsModule, typeof i9.FwIconButtonModule, typeof i10.FwIconModule, typeof i11.MatCheckboxModule, typeof i12.MatMenuModule, typeof i13.FwTextInputModule], [typeof i1.FwMenuComponent, typeof i2.FwMenuContainerComponent, typeof i3.FwMenuHeaderComponent, typeof i4.FwMenuItemComponent, typeof i5.FwMenuSeparatorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwMenuModule>;
 }

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

@@ -8,9 +8,8 @@ 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 "@angular/router";
 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.RouterModule], [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.FwChipModule, typeof i7.FwIconModule, typeof i8.FwMenuModule, typeof i9.FwTextInputModule], [typeof i1.FwMultiSelectMenuComponent, typeof i2.FwSelectMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwSelectMenuModule>;
 }

package/components/snackbar/snackbar/snackbar.component.d.ts

@@ -0,0 +1,24 @@
+import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnInit } from '@angular/core';
+import { FwSnackbarMessage } from '../snackbar-message.model';
+import { FwSnackbarTimerService } from '../snackbar-timer.service';
+import * as i0 from "@angular/core";
+export declare class FwSnackbarComponent implements AfterViewInit, OnInit {
+    private cdr;
+    private timerService;
+    message: FwSnackbarMessage;
+    messageDuration: number;
+    ready: EventEmitter<FwSnackbarComponent>;
+    dismiss: EventEmitter<string>;
+    action: EventEmitter<string>;
+    color: 'primary' | 'success' | 'warning' | 'danger';
+    get cssClass(): string;
+    constructor(cdr: ChangeDetectorRef, timerService: FwSnackbarTimerService);
+    ngAfterViewInit(): void;
+    startTimer(): void;
+    stopTimer(): void;
+    ngOnInit(): void;
+    handleDismiss(): void;
+    handleAction(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwSnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwSnackbarComponent, "fw-snackbar", never, { "message": "message"; "messageDuration": "messageDuration"; }, { "ready": "ready"; "dismiss": "dismiss"; "action": "action"; }, never, never, false>;
+}

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

@@ -0,0 +1,20 @@
+import { ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { FwSnackbarService } from '../snackbar.service';
+import { FwSnackbarComponent } from '../snackbar/snackbar.component';
+import { FwSnackbarMessage } from '../snackbar-message.model';
+import * as i0 from "@angular/core";
+export declare class FwSnackbarContainerComponent implements OnDestroy {
+    private cdr;
+    private snackbarService;
+    get classes(): string;
+    limit: number;
+    messages: FwSnackbarMessage[];
+    private subscriptions;
+    constructor(cdr: ChangeDetectorRef, snackbarService: FwSnackbarService);
+    ngOnDestroy(): void;
+    onReady(snackbar: FwSnackbarComponent): void;
+    onDismiss(messageId: string): void;
+    clearAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwSnackbarContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwSnackbarContainerComponent, "fw-snackbar-container", never, {}, {}, never, never, false>;
+}

package/components/snackbar/snackbar-message.model.d.ts

@@ -0,0 +1,12 @@
+import { FwSnackbarComponent } from './snackbar/snackbar.component';
+export interface FwSnackbarMessage {
+    id?: string;
+    severity: 'info' | 'success' | 'warning' | 'error';
+    message: string;
+    icon?: string;
+    showClose?: boolean;
+    actionText?: string;
+    action?: () => void;
+    duration?: number;
+    ref?: FwSnackbarComponent;
+}

package/components/snackbar/snackbar-timer.service.d.ts

@@ -0,0 +1,10 @@
+export declare class FwSnackbarTimerService {
+    private timerId;
+    private now;
+    private remainingDuration;
+    private resolver;
+    start(duration: number): Promise<void>;
+    stop(): void;
+    pause(): void;
+    continue(): void;
+}

package/components/snackbar/snackbar.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./snackbar/snackbar.component";
+import * as i2 from "./snackbar-container/snackbar-container.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../button/button.module";
+import * as i5 from "@angular/material/button";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "../icon-button/icon-button.module";
+import * as i8 from "../icon/icon.module";
+export declare class FwSnackbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwSnackbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwSnackbarModule, [typeof i1.FwSnackbarComponent, typeof i2.FwSnackbarContainerComponent], [typeof i3.CommonModule, typeof i4.FwButtonModule, typeof i5.MatButtonModule, typeof i6.MatIconModule, typeof i7.FwIconButtonModule, typeof i8.FwIconModule], [typeof i1.FwSnackbarComponent, typeof i2.FwSnackbarContainerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FwSnackbarModule>;
+}

package/components/snackbar/snackbar.service.d.ts

@@ -0,0 +1,13 @@
+import { BehaviorSubject } from 'rxjs';
+import { FwSnackbarMessage } from './snackbar-message.model';
+import * as i0 from "@angular/core";
+export declare function genMessageId(): string;
+export declare class FwSnackbarService {
+    readonly messages$: BehaviorSubject<FwSnackbarMessage[]>;
+    private messageQueue;
+    show(message: FwSnackbarMessage): void;
+    dismiss(messageId: string): void;
+    dismissAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwSnackbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FwSnackbarService>;
+}

package/components/stepper/step.component.d.ts

@@ -18,3 +18,7 @@ export declare class FwStepComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwStepComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FwStepComponent, "fw-step", never, { "stepNumber": "stepNumber"; "color": "color"; "variant": "variant"; "alignment": "alignment"; "backgroundColor": "backgroundColor"; "title": "title"; "subtitle": "subtitle"; "icon": "icon"; "disabled": "disabled"; "active": "active"; "completed": "completed"; "done": "done"; }, { "select": "select"; }, never, ["fw-step-decorator"], false>;
 }
+export declare class FwStepDecoratorComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwStepDecoratorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwStepDecoratorComponent, "fw-step-decorator", never, {}, {}, never, ["*"], false>;
+}

package/components/stepper/stepper.module.d.ts

@@ -6,6 +6,6 @@ import * as i4 from "../icon/icon.module";
 import * as i5 from "../icon-button/icon-button.module";
 export declare class FwStepperModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwStepperModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwStepperModule, [typeof i1.FwStepComponent, typeof i2.FwStepperComponent], [typeof i3.CommonModule, typeof i4.FwIconModule, typeof i5.FwIconButtonModule], [typeof i1.FwStepComponent, typeof i2.FwStepperComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwStepperModule, [typeof i1.FwStepComponent, typeof i1.FwStepDecoratorComponent, typeof i2.FwStepperComponent], [typeof i3.CommonModule, typeof i4.FwIconModule, typeof i5.FwIconButtonModule], [typeof i1.FwStepComponent, typeof i1.FwStepDecoratorComponent, typeof i2.FwStepperComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwStepperModule>;
 }

package/esm2020/components/alert/alert.component.mjs

@@ -12,10 +12,10 @@ export class FwAlertComponent {
     }
 }
 FwAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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]=\"['alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"alert-text\">\n    <h4 *ngIf=\"title\">{{ title }}</h4>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <p>\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    icon=\"close\" size=\"small\"\n    style=\"margin-right: -10px\"\n    [color]=\"variant==='filled'?'overlay':severity\"\n    (click)=\"close?close.emit():undefined\">\n  </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:0 0 4px;color:var(--typography-contrast)}.alert p{margin:0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.alert.standard.info h4{color:var(--primary-base)}.alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.alert.standard.warning h4{color:var(--orange-base)}.alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.alert.standard.success h4{color:var(--green-base)}.alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.alert.standard.error h4{color:var(--red-base)}.alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.alert.outlined.info h4{color:var(--primary-base)}.alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.alert.outlined.warning h4{color:var(--orange-base)}.alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.alert.outlined.success h4{color:var(--green-base)}.alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.alert.outlined.error h4{color:var(--red-base)}.alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.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" }, { kind: "component", type: i3.FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }] });
+FwAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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]=\"['alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"alert-text\">\n    <h4 *ngIf=\"title\">{{ title }}</h4>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <p>\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    icon=\"close\" size=\"small\"\n    style=\"margin-right: -10px\"\n    [color]=\"variant==='filled'?'overlay':severity\"\n    (click)=\"close?close.emit():undefined\">\n  </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:2px 0 4px;color:var(--typography-contrast)}.alert p{margin:0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.alert.standard.info h4{color:var(--primary-base)}.alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.alert.standard.warning h4{color:var(--orange-base)}.alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.alert.standard.success h4{color:var(--green-base)}.alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.alert.standard.error h4{color:var(--red-base)}.alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.alert.outlined.info h4{color:var(--primary-base)}.alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.alert.outlined.warning h4{color:var(--orange-base)}.alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.alert.outlined.success h4{color:var(--green-base)}.alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.alert.outlined.error h4{color:var(--red-base)}.alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.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" }, { kind: "component", type: i3.FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-alert', template: "<div [ngClass]=\"['alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"alert-text\">\n    <h4 *ngIf=\"title\">{{ title }}</h4>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <p>\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    icon=\"close\" size=\"small\"\n    style=\"margin-right: -10px\"\n    [color]=\"variant==='filled'?'overlay':severity\"\n    (click)=\"close?close.emit():undefined\">\n  </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:0 0 4px;color:var(--typography-contrast)}.alert p{margin:0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.alert.standard.info h4{color:var(--primary-base)}.alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.alert.standard.warning h4{color:var(--orange-base)}.alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.alert.standard.success h4{color:var(--green-base)}.alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.alert.standard.error h4{color:var(--red-base)}.alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.alert.outlined.info h4{color:var(--primary-base)}.alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.alert.outlined.warning h4{color:var(--orange-base)}.alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.alert.outlined.success h4{color:var(--green-base)}.alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.alert.outlined.error h4{color:var(--red-base)}.alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
+            args: [{ selector: 'fw-alert', template: "<div [ngClass]=\"['alert', variant, severity]\">\n  <fw-icon *ngIf=\"icon\" class=\"alert-icon\">{{ icon }}</fw-icon>\n  <div class=\"alert-text\">\n    <h4 *ngIf=\"title\">{{ title }}</h4>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <p>\n      <ng-content></ng-content>\n    </p>\n  </div>\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    icon=\"close\" size=\"small\"\n    style=\"margin-right: -10px\"\n    [color]=\"variant==='filled'?'overlay':severity\"\n    (click)=\"close?close.emit():undefined\">\n  </fw-icon-button>\n</div>\n", styles: [".alert{border-radius:8px;padding:6px 16px;margin-bottom:15px;display:flex}.alert .alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.alert .alert-text{padding:8px 0;flex:1}.alert h4{margin:2px 0 4px;color:var(--typography-contrast)}.alert p{margin:0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.alert.standard.info h4{color:var(--primary-base)}.alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.alert.standard.warning h4{color:var(--orange-base)}.alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.alert.standard.success h4{color:var(--green-base)}.alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.alert.standard.error h4{color:var(--red-base)}.alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.alert.outlined.info h4{color:var(--primary-base)}.alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.alert.outlined.warning h4{color:var(--orange-base)}.alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.alert.outlined.success h4{color:var(--green-base)}.alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.alert.outlined.error h4{color:var(--red-base)}.alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
         }], propDecorators: { description: [{
                 type: Input
             }], icon: [{

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

@@ -17,10 +17,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: { label: "label", icon: "icon", color: "color", 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\">{{ badge }}</div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":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{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}: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;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}: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.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color: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 .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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 .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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.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 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
+FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { label: "label", icon: "icon", color: "color", 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  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":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;box-shadow:0 1px 2px #0000000d}: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;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}: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.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color: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 .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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 .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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.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 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
 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\">{{ badge }}</div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":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{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}: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;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}: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.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color: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 .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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 .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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.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 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  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":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;box-shadow:0 1px 2px #0000000d}: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;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}: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.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color: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 .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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 .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}: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.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 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: { label: [{
                 type: Input
             }], icon: [{
@@ -55,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: HostBinding,
                 args: ['class']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXBwLWljb24vYXBwLWljb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXBwLWljb24vYXBwLWljb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBTzlELE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFRVyxVQUFLLEdBQStDLFNBQVMsQ0FBQztRQUM5RCxTQUFJLEdBQWtELFFBQVEsQ0FBQztRQUMvRCxZQUFPLEdBQW9ELGFBQWEsQ0FBQztRQUVoRCxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ1YsV0FBTSxHQUFhLEtBQUssQ0FBQztRQUN2QixhQUFRLEdBQWEsS0FBSyxDQUFDO1FBQzlDLFNBQUksR0FBRyxRQUFRLENBQUM7S0FLdEM7SUFIQyxJQUEwQixRQUFRO1FBQ2hDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDeEUsQ0FBQzs7K0dBZFUsa0JBQWtCO21HQUFsQixrQkFBa0IscVlDUC9CLDBVQVNBOzJGREZhLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxhQUFhOzhCQUtkLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUM0QixRQUFRO3NCQUF6QyxXQUFXO3VCQUFDLFVBQVU7O3NCQUFHLEtBQUs7Z0JBQ08sTUFBTTtzQkFBM0MsV0FBVzt1QkFBQyxjQUFjOztzQkFBRyxLQUFLO2dCQUNLLFFBQVE7c0JBQS9DLFdBQVc7dUJBQUMsZ0JBQWdCOztzQkFBRyxLQUFLO2dCQUNoQixJQUFJO3NCQUF4QixXQUFXO3VCQUFDLE1BQU07Z0JBRU8sUUFBUTtzQkFBakMsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZnctYXBwLWljb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYXBwLWljb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hcHAtaWNvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGd0FwcEljb25Db21wb25lbnQge1xuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcbiAgQElucHV0KCkgY29sb3I/OiAncHJpbWFyeScgfCAnZGFyaycgfCAnbGlnaHQnIHwgJ2dyYWRpZW50JyA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgc2l6ZT86ICdzbWFsbCcgfCAnbWVkaXVtJyB8ICdsYXJnZScgfCAnZXh0cmEtbGFyZ2UnID0gJ21lZGl1bSc7XG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiAnaW50ZXJhY3RpdmUnIHwgJ2hvdmVyJyB8ICdmb2N1c2VkJyB8ICdzdGF0aWMnID0gJ2ludGVyYWN0aXZlJztcbiAgQElucHV0KCkgYmFkZ2U/OiBzdHJpbmc7XG4gIEBIb3N0QmluZGluZygndGFiaW5kZXgnKSBASW5wdXQoKSB0YWJpbmRleCA9ICcnO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmxvY2tlZCcpIEBJbnB1dCgpIGxvY2tlZD86IGJvb2xlYW4gPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hbmltYXRlZCcpIEBJbnB1dCgpIGFuaW1hdGVkPzogYm9vbGVhbiA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ3JvbGUnKSByb2xlID0gJ2J1dHRvbic7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBjc3NDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbJ2Z3LWFwcC1pY29uJywgdGhpcy5zaXplLCB0aGlzLmNvbG9yLCB0aGlzLnZhcmlhbnRdLmpvaW4oJyAnKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImljb24taGlnaGxpZ2h0XCI+PC9kaXY+XG48ZGl2IGNsYXNzPVwiaWNvbi13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJhcHAtYmFkZ2VcIiAqbmdJZj1cImJhZGdlXCI+e3sgYmFkZ2UgfX08L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImFwcC1sb2NrZWRcIiAqbmdJZj1cImxvY2tlZFwiPlxuICAgIDxmdy1pY29uPmxvY2s8L2Z3LWljb24+XG4gIDwvZGl2PlxuICA8ZnctaWNvbiAqbmdJZj1cImljb25cIj57eyBpY29uIH19PC9mdy1pY29uPlxuPC9kaXY+XG48cCBjbGFzcz1cInZpc2lvbi1wM1wiICpuZ0lmPVwibGFiZWxcIj57eyBsYWJlbCB9fTwvcD5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXBwLWljb24vYXBwLWljb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXBwLWljb24vYXBwLWljb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBTzlELE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFRVyxVQUFLLEdBQStDLFNBQVMsQ0FBQztRQUM5RCxTQUFJLEdBQWtELFFBQVEsQ0FBQztRQUMvRCxZQUFPLEdBQW9ELGFBQWEsQ0FBQztRQUVoRCxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ1YsV0FBTSxHQUFhLEtBQUssQ0FBQztRQUN2QixhQUFRLEdBQWEsS0FBSyxDQUFDO1FBQzlDLFNBQUksR0FBRyxRQUFRLENBQUM7S0FLdEM7SUFIQyxJQUEwQixRQUFRO1FBQ2hDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDeEUsQ0FBQzs7K0dBZFUsa0JBQWtCO21HQUFsQixrQkFBa0IscVlDUC9CLHVWQVNBOzJGREZhLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxhQUFhOzhCQUtkLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUM0QixRQUFRO3NCQUF6QyxXQUFXO3VCQUFDLFVBQVU7O3NCQUFHLEtBQUs7Z0JBQ08sTUFBTTtzQkFBM0MsV0FBVzt1QkFBQyxjQUFjOztzQkFBRyxLQUFLO2dCQUNLLFFBQVE7c0JBQS9DLFdBQVc7dUJBQUMsZ0JBQWdCOztzQkFBRyxLQUFLO2dCQUNoQixJQUFJO3NCQUF4QixXQUFXO3VCQUFDLE1BQU07Z0JBRU8sUUFBUTtzQkFBakMsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZnctYXBwLWljb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYXBwLWljb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hcHAtaWNvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGd0FwcEljb25Db21wb25lbnQge1xuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcbiAgQElucHV0KCkgY29sb3I/OiAncHJpbWFyeScgfCAnZGFyaycgfCAnbGlnaHQnIHwgJ2dyYWRpZW50JyA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgc2l6ZT86ICdzbWFsbCcgfCAnbWVkaXVtJyB8ICdsYXJnZScgfCAnZXh0cmEtbGFyZ2UnID0gJ21lZGl1bSc7XG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiAnaW50ZXJhY3RpdmUnIHwgJ2hvdmVyJyB8ICdmb2N1c2VkJyB8ICdzdGF0aWMnID0gJ2ludGVyYWN0aXZlJztcbiAgQElucHV0KCkgYmFkZ2U/OiBzdHJpbmc7XG4gIEBIb3N0QmluZGluZygndGFiaW5kZXgnKSBASW5wdXQoKSB0YWJpbmRleCA9ICcnO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmxvY2tlZCcpIEBJbnB1dCgpIGxvY2tlZD86IGJvb2xlYW4gPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hbmltYXRlZCcpIEBJbnB1dCgpIGFuaW1hdGVkPzogYm9vbGVhbiA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ3JvbGUnKSByb2xlID0gJ2J1dHRvbic7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBjc3NDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbJ2Z3LWFwcC1pY29uJywgdGhpcy5zaXplLCB0aGlzLmNvbG9yLCB0aGlzLnZhcmlhbnRdLmpvaW4oJyAnKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImljb24taGlnaGxpZ2h0XCI+PC9kaXY+XG48ZGl2IGNsYXNzPVwiaWNvbi13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJhcHAtYmFkZ2VcIiAqbmdJZj1cImJhZGdlXCI+PHNwYW4+e3sgYmFkZ2UgfX08L3NwYW4+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJhcHAtbG9ja2VkXCIgKm5nSWY9XCJsb2NrZWRcIj5cbiAgICA8ZnctaWNvbj5sb2NrPC9mdy1pY29uPlxuICA8L2Rpdj5cbiAgPGZ3LWljb24gKm5nSWY9XCJpY29uXCI+e3sgaWNvbiB9fTwvZnctaWNvbj5cbjwvZGl2PlxuPHAgY2xhc3M9XCJ2aXNpb24tcDNcIiAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L3A+XG4iXX0=

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: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#e9ecf1!important}.fill-light-soft-blue{background-color:#e9ecf1!important}.border-light-soft-blue{border-color:#e9ecf1!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.lighter-soft-blue{color:#e6e9ef!important}.fill-lighter-soft-blue{background-color:#e6e9ef!important}.border-lighter-soft-blue{border-color:#e6e9ef!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}: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:#fff;font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter;font-style:normal;font-weight:500;color:#fff;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:4px}:host.circular{border-radius:64px}.avatar-primary{background:#1b68fa}.avatar-slate{background:#5d6877}.avatar-red{background:#de584c}.avatar-light-slate{background:#9ea8b5}.avatar-secondary{background:#b080fc}.avatar-warning{background:#dd8e0a}.avatar-success{background:#1b9e4b}\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" }] });
+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:4px}: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" }] });
 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: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#e9ecf1!important}.fill-light-soft-blue{background-color:#e9ecf1!important}.border-light-soft-blue{border-color:#e9ecf1!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.lighter-soft-blue{color:#e6e9ef!important}.fill-lighter-soft-blue{background-color:#e6e9ef!important}.border-lighter-soft-blue{border-color:#e6e9ef!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}: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:#fff;font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter;font-style:normal;font-weight:500;color:#fff;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:4px}:host.circular{border-radius:64px}.avatar-primary{background:#1b68fa}.avatar-slate{background:#5d6877}.avatar-red{background:#de584c}.avatar-light-slate{background:#9ea8b5}.avatar-secondary{background:#b080fc}.avatar-warning{background:#dd8e0a}.avatar-success{background:#1b9e4b}\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{border-radius:4px}: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']