@flywheel-io/vision 1.0.4 → 1.1.1

package/fesm2020/flywheel-io-vision.mjs

@@ -18,7 +18,7 @@ import * as i5 from '@angular/cdk/portal';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { takeUntil } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3$1 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenuModule, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -663,6 +663,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwButtonToggleItemComponent {
+    constructor() {
+        this.selected = false;
+        this.disabled = false;
+        this.size = 'medium';
+        this.color = 'slate';
+        this.selectedColor = 'primary';
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.click = new EventEmitter();
+    }
+    get classes() {
+        return ['fw-button-toggle-item', this.title && this.title.length > 0 ? 'has-title' : 'no-title'].filter(Boolean).join(' ');
+    }
+    ;
+    handleClick() {
+        this.click.emit(this.value);
+    }
+}
+FwButtonToggleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwButtonToggleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonToggleItemComponent, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n  [title]=\"title\"\n  [leftIcon]=\"icon\"\n  [variant]=\"selected?'solid':'outline'\"\n  [color]=\"selected?selectedColor:color\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick()\">\n  {{ title }}\n</fw-button>\n", dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-button-toggle-item', template: "<fw-button\n  [title]=\"title\"\n  [leftIcon]=\"icon\"\n  [variant]=\"selected?'solid':'outline'\"\n  [color]=\"selected?selectedColor:color\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick()\">\n  {{ title }}\n</fw-button>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], selectedColor: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }], classes: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }] } });
+
+class FwButtonToggleComponent {
+    constructor(cdref) {
+        this.cdref = cdref;
+        this.layout = 'basic';
+        this.size = 'medium';
+        this.subscriptions = [];
+    }
+    get classes() {
+        return ['fw-button-toggle', this.size, this.layout].filter(Boolean).join(' ');
+    }
+    ;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ngOnChanges(changes) {
+        this.formatToggles();
+    }
+    ngOnDestroy() {
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
+    }
+    ngAfterContentInit() {
+        if (this.toggleButtons.length > 0) {
+            this.formatToggles();
+        }
+    }
+    formatToggles() {
+        if (this.toggleButtons) {
+            this.toggleButtons.forEach(toggle => {
+                if (this.multiple && Array.isArray(this.value)) {
+                    if (this.value.indexOf(toggle.value) >= 0) {
+                        toggle.selected = true;
+                    }
+                }
+                else {
+                    if (toggle.value === this.value) {
+                        toggle.selected = true;
+                    }
+                }
+                toggle.size = this.size;
+                if (this.color) {
+                    toggle.color = this.color;
+                }
+                if (this.selectedColor) {
+                    toggle.selectedColor = this.selectedColor;
+                }
+                const sub = toggle.click.subscribe(value => {
+                    if (this.multiple && Array.isArray(this.value)) {
+                        toggle.selected = !toggle.selected;
+                        this.value.push(value);
+                    }
+                    else {
+                        this.toggleButtons.forEach(t => {
+                            t.selected = false;
+                        });
+                        toggle.selected = true;
+                        this.value = value;
+                    }
+                });
+                this.subscriptions.push(sub);
+            });
+        }
+    }
+}
+FwButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FwButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonToggleComponent, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", multiple: "multiple", value: "value", color: "color", selectedColor: "selectedColor" }, host: { properties: { "attr.class": "this.classes" } }, queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-button-toggle', template: '<ng-content select="fw-button-toggle-item"></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }], layout: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], selectedColor: [{
+                type: Input
+            }], toggleButtons: [{
+                type: ContentChildren,
+                args: [FwButtonToggleItemComponent]
+            }] } });
+
+class FwButtonToggleModule {
+}
+FwButtonToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwButtonToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleModule, declarations: [FwButtonToggleComponent,
+        FwButtonToggleItemComponent], imports: [FwButtonModule,
+        FwIconModule], exports: [FwButtonToggleComponent,
+        FwButtonToggleItemComponent] });
+FwButtonToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleModule, imports: [FwButtonModule,
+        FwIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        FwButtonToggleComponent,
+                        FwButtonToggleItemComponent,
+                    ],
+                    declarations: [
+                        FwButtonToggleComponent,
+                        FwButtonToggleItemComponent,
+                    ],
+                    imports: [
+                        FwButtonModule,
+                        FwIconModule,
+                    ],
+                }]
+        }] });
+
 class FwCardComponent {
     constructor() {
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -1910,53 +2071,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class FwButtonGroupComponent {
-    constructor() {
-        this.layout = 'basic';
-        this.size = 'medium';
-    }
-    get classes() {
-        return [
-            'fw-button-group',
-            this.size === 'small' ? 'small' : null,
-            this.size === 'medium' ? 'medium' : null,
-            this.size === 'large' ? 'large' : null,
-            this.layout === 'compact' ? 'compact' : null,
-        ].filter(Boolean).join(' ');
-    }
-    ;
-}
-FwButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonGroupComponent, selector: "fw-button-group", inputs: { layout: "layout", size: "size" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group fw-button:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group fw-button:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group .mat-stroked-button:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group .mat-stroked-button:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fw-button-group', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group fw-button:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group fw-button:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group .mat-stroked-button:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group .mat-stroked-button:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}\n"] }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }], layout: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class FwButtonGroupModule {
-}
-FwButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FwButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwButtonGroupModule, declarations: [FwButtonGroupComponent], exports: [FwButtonGroupComponent] });
-FwButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonGroupModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonGroupModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        FwButtonGroupComponent,
-                    ],
-                    declarations: [
-                        FwButtonGroupComponent,
-                    ],
-                }]
-        }] });
-
 function genId() {
     return String.prototype.padStart(24, Math.floor(Math.random() * Date.now()).toString(16));
 }
@@ -2178,10 +2292,10 @@ class FwNotificationContainerComponent {
     }
 }
 FwNotificationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FwNotificationService }], target: i0.ɵɵFactoryTarget.Component });
-FwNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNotificationContainerComponent, selector: "fw-notification-container", host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div role=\"list\">\n  <fw-notification *ngFor=\"let notification of notifications; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [class]=\"notificationClass($index)\"\n    [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n    [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n    role=\"listitem\"\n  ></fw-notification>\n  <div class=\"buttons\">\n    <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" size=\"small\" color=\"slate\">\n      <mat-icon>expand_less</mat-icon>\n    </fw-button>\n    <fw-button *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" aria-label=\"show more\" size=\"small\" color=\"slate\">\n      <mat-icon>expand_more</mat-icon>\n    </fw-button>\n    <fw-button *ngIf=\"notifications.length > 0\"(click)=\"clearAll()\" class=\"clear-all\" aria-label=\"clear all\" size=\"small\" color=\"slate\">\n      Clear All\n    </fw-button>\n  </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FwNotificationComponent, selector: "fw-notification", inputs: ["notification", "notificationDuration"], outputs: ["ready", "dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FwNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNotificationContainerComponent, selector: "fw-notification-container", host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div role=\"list\">\n  <fw-notification\n    *ngFor=\"let notification of notifications; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [class]=\"notificationClass($index)\"\n    [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n    [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n    role=\"listitem\">\n  </fw-notification>\n  <div class=\"buttons\">\n    <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" aria-label=\"show less\" size=\"small\" color=\"slate\">\n      <fw-icon>chevron-up</fw-icon>\n    </fw-button>\n    <fw-button\n      *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" aria-label=\"show more\" size=\"small\"\n      color=\"slate\">\n      <fw-icon>chevron-down</fw-icon>\n    </fw-button>\n    <fw-button\n      *ngIf=\"notifications.length > 0\" (click)=\"clearAll()\" class=\"clear-all\" aria-label=\"clear all\" size=\"small\"\n      color=\"slate\">\n      Clear All\n    </fw-button>\n  </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button fw-icon{font-size:24px}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwNotificationComponent, selector: "fw-notification", inputs: ["notification", "notificationDuration"], outputs: ["ready", "dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-notification-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"list\">\n  <fw-notification *ngFor=\"let notification of notifications; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [class]=\"notificationClass($index)\"\n    [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n    [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n    role=\"listitem\"\n  ></fw-notification>\n  <div class=\"buttons\">\n    <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" mat-button aria-label=\"show less\" size=\"small\" color=\"slate\">\n      <mat-icon>expand_less</mat-icon>\n    </fw-button>\n    <fw-button *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" aria-label=\"show more\" size=\"small\" color=\"slate\">\n      <mat-icon>expand_more</mat-icon>\n    </fw-button>\n    <fw-button *ngIf=\"notifications.length > 0\"(click)=\"clearAll()\" class=\"clear-all\" aria-label=\"clear all\" size=\"small\" color=\"slate\">\n      Clear All\n    </fw-button>\n  </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button.mat-button{line-height:24px!important;margin:0 0 0 2px!important}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"] }]
+            args: [{ selector: 'fw-notification-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"list\">\n  <fw-notification\n    *ngFor=\"let notification of notifications; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [class]=\"notificationClass($index)\"\n    [notification]=\"expanded || $index === notifications.length - 1 ? notification : getEmptyNotification(notification)\"\n    [attr.aria-label]=\"notification.type + ' : ' + notification.message\"\n    role=\"listitem\">\n  </fw-notification>\n  <div class=\"buttons\">\n    <fw-button *ngIf=\"expanded\" (click)=\"onShowLess()\" aria-label=\"show less\" size=\"small\" color=\"slate\">\n      <fw-icon>chevron-up</fw-icon>\n    </fw-button>\n    <fw-button\n      *ngIf=\"!expanded && notifications.length > 1\" (click)=\"onShowMore()\" aria-label=\"show more\" size=\"small\"\n      color=\"slate\">\n      <fw-icon>chevron-down</fw-icon>\n    </fw-button>\n    <fw-button\n      *ngIf=\"notifications.length > 0\" (click)=\"clearAll()\" class=\"clear-all\" aria-label=\"clear all\" size=\"small\"\n      color=\"slate\">\n      Clear All\n    </fw-button>\n  </div>\n</div>\n", styles: ["fw-notification-container{position:absolute;right:0;top:0;margin-top:20px;z-index:999999}fw-notification-container>div{display:flex;flex-direction:column-reverse}fw-notification-container .buttons{display:none;position:absolute;top:-5px;right:25px}fw-notification-container .buttons button{color:#fff;background-color:#919292;margin-left:2px}fw-notification-container .buttons button fw-icon{font-size:24px}fw-notification-container:hover .buttons{display:flex}fw-notification-container .hidden{display:none}fw-notification-container fw-notification:last-of-type{margin-top:24px}fw-notification-container.duo fw-notification.level-0{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-1{transform:scale(.95) translateY(-51px)}fw-notification-container.triple fw-notification.level-0{transform:scale(.9) translateY(-108px)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FwNotificationService }]; }, propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -2193,26 +2307,23 @@ FwNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 FwNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationModule, declarations: [FwNotificationComponent,
         FwNotificationContainerComponent], imports: [CommonModule,
         FwButtonModule,
-        FwButtonGroupModule,
         MatButtonModule,
-        MatIconModule], exports: [FwNotificationComponent,
+        FwIconModule], exports: [FwNotificationComponent,
         FwNotificationContainerComponent] });
 FwNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationModule, providers: [
         FwNotificationService,
     ], imports: [CommonModule,
         FwButtonModule,
-        FwButtonGroupModule,
         MatButtonModule,
-        MatIconModule] });
+        FwIconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         FwButtonModule,
-                        FwButtonGroupModule,
                         MatButtonModule,
-                        MatIconModule,
+                        FwIconModule,
                     ],
                     exports: [
                         FwNotificationComponent,
@@ -2257,10 +2368,10 @@ class FwMenuItemComponent {
     }
 }
 FwMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", variant: "variant", size: "size", title: "title", description: "description", icon: "icon", disabled: "disabled", showCheckbox: "showCheckbox", multiSelect: "multiSelect", hidden: "hidden", collapsed: "collapsed", href: "href", target: "target", focused: "focused", selected: "selected" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <input\n        type=\"checkbox\"\n        value=\"true\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <input\n        type=\"radio\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\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: FwIconComponent, selector: "fw-icon" }] });
+FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", variant: "variant", size: "size", title: "title", description: "description", icon: "icon", disabled: "disabled", showCheckbox: "showCheckbox", multiSelect: "multiSelect", hidden: "hidden", collapsed: "collapsed", href: "href", target: "target", focused: "focused", selected: "selected" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <input\n        type=\"checkbox\"\n        value=\"true\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <input\n        type=\"radio\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\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: FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <input\n        type=\"checkbox\"\n        value=\"true\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <input\n        type=\"radio\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
+            args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <input\n        type=\"checkbox\"\n        value=\"true\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <input\n        type=\"radio\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n    </div>\n    <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -2314,10 +2425,11 @@ class FwMenuComponent {
         this.useCheckbox = false;
         this.openWidth = 'inherit';
         this.collapsedWidth = '44px';
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
         this._filterText = '';
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.onChange = (value) => {
-            this.updateLayout();
         };
         this.onTouched = () => {
         };
@@ -2342,6 +2454,7 @@ class FwMenuComponent {
     writeValue(value) {
         this.value = value;
         this.onChange(this.value);
+        this.change.emit(this.value);
         this.updateLayout();
     }
     registerOnChange(fn) {
@@ -2405,7 +2518,7 @@ class FwMenuComponent {
     }
 }
 FwMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuComponent, selector: "fw-menu", inputs: { disabled: "disabled", size: "size", variant: "variant", collapsed: "collapsed", multiSelect: "multiSelect", useCheckbox: "useCheckbox", openWidth: "openWidth", collapsedWidth: "collapsedWidth", value: "value" }, providers: [{
+FwMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuComponent, selector: "fw-menu", inputs: { disabled: "disabled", size: "size", variant: "variant", collapsed: "collapsed", multiSelect: "multiSelect", useCheckbox: "useCheckbox", openWidth: "openWidth", collapsedWidth: "collapsedWidth", value: "value" }, outputs: { change: "change" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: FwMenuComponent,
             multi: true,
@@ -2461,6 +2574,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], change: [{
+                type: Output
             }], menuItems: [{
                 type: ContentChildren,
                 args: [FwMenuItemComponent]
@@ -2470,6 +2585,8 @@ class FwTextInputComponent {
     constructor() {
         this.disabled = false;
         this.size = 'medium';
+        this.type = 'text';
+        this.maxLength = 255;
         // we bind this to host because that's where angular form apis put the error classes
         this.error = false;
         this.value = '';
@@ -2504,18 +2621,18 @@ class FwTextInputComponent {
     }
 }
 FwTextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
+FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", type: "type", maxLength: "maxLength", error: "error", value: "value" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: FwTextInputComponent,
             multi: true,
-        }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
+        }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-text-input', providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: FwTextInputComponent,
                             multi: true,
-                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], leftIcon: [{
@@ -2534,11 +2651,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], type: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
             }], error: [{
                 type: HostBinding,
                 args: ['class.errored']
             }, {
                 type: Input
+            }], textInput: [{
+                type: ContentChild,
+                args: ['textInput', { static: false }]
+            }], value: [{
+                type: Input
             }] } });
 
 class FwTextInputModule {
@@ -2608,7 +2734,7 @@ class FwMenuContainerComponent {
     }
 }
 FwMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
+FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "error", "value"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
@@ -2706,230 +2832,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class FwPopoverPanelComponent {
+class FwPaginatorComponent {
     constructor() {
-        this.mouseLeave = new EventEmitter();
-    }
-    get classes() {
-        return ['fw-popover-panel', 'fw-popover-' + this.position].join(' ');
+        this.size = 'medium';
+        this.color = 'slate';
+        this.shape = 'rounded';
+        this.variant = 'ghost';
+        this.disabled = false;
+        this.showNext = true;
+        this.showPrevious = true;
+        this.showFirst = false;
+        this.showLast = false;
+        this.pageIndex = 0;
+        this.pageSize = 10;
+        this.maxPagesShown = 10;
+        this.length = 0;
+        this.alignment = 'center';
+        this.selectorTitle = 'Items per page:';
+        this.page = new EventEmitter();
+    }
+    buildPageEvent(pageIndex) {
+        return {
+            length: this.length,
+            pageSize: this.pageSize,
+            pageIndex: pageIndex,
+            previousPageIndex: this.pageIndex,
+            rowIndexStart: this.getRowIndexStart(pageIndex),
+            rowIndexEnd: this.getRowIndexEnd(pageIndex),
+        };
     }
-    hidePopover(e) {
-        this.mouseLeave.emit(e);
+    firstPage() {
+        const evt = this.buildPageEvent(0);
+        this.pageIndex = 0;
+        this.page.emit(evt);
+    }
+    lastPage() {
+        const evt = this.buildPageEvent(this.getNumberOfPages());
+        this.pageIndex = this.getNumberOfPages() - 1;
+        this.page.emit(evt);
+    }
+    nextPage() {
+        if (this.hasNextPage()) {
+            const evt = this.buildPageEvent(this.pageIndex + 1);
+            this.pageIndex++;
+            this.page.emit(evt);
+        }
     }
-}
-FwPopoverPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwPopoverPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: { position: "position" }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-popover-content-wrapper\">\n  <ng-content></ng-content>\n  <div class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}:host.fw-popover-above{margin-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{margin-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{margin-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fw-popover-panel', template: "<div class=\"fw-popover-content-wrapper\">\n  <ng-content></ng-content>\n  <div class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}:host.fw-popover-above{margin-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{margin-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{margin-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }]
-        }], propDecorators: { position: [{
-                type: Input
-            }], mouseLeave: [{
-                type: Output
-            }], classes: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }], hidePopover: [{
-                type: HostListener,
-                args: ['mouseleave', ['$event']]
-            }] } });
-
-class FwPopoverComponent {
-    constructor() {
-        this.position = 'above';
-        this.isOpen = false;
-        this.action = 'mouseenter';
-        this.positionMap = {
-            'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
-            'above-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 40 },
-            'above-right': { originX: 'center', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetX: -40 },
-            'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
-            'below-left': { originX: 'center', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX: 40 },
-            'below-right': { originX: 'center', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX: -40 },
-            'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
-            'left-above': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'bottom', offsetY: 37 },
-            'left-below': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'top', offsetY: -40 },
-            'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
-            'right-above': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 37 },
-            'right-below': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -40 },
-        };
+    previousPage() {
+        if (this.hasPreviousPage()) {
+            const evt = this.buildPageEvent(this.pageIndex - 1);
+            this.pageIndex--;
+            this.page.emit(evt);
+        }
     }
-    ngOnChanges() {
-        if (this.action && this.trigger) {
-            const trigger = this.trigger;
-            if (this.action === 'mouseenter' && !trigger.onmouseenter) {
-                trigger.onclick = undefined;
-                trigger.style.cursor = 'pointer';
-                trigger.onmouseenter = () => {
-                    this.isOpen = true;
-                };
-                // @ts-expect-error MouseEvent
-                trigger.onmouseleave = (e) => {
-                    const relatedTarget = e.relatedTarget;
-                    if (!relatedTarget.classList.contains('fw-popover-caret') && !relatedTarget.classList.contains('cdk-overlay-pane')) {
-                        this.isOpen = false;
-                    }
-                };
-            }
-            if (this.action === 'click' && !trigger.onclick) {
-                trigger.onmouseenter = undefined;
-                trigger.onmouseleave = undefined;
-                trigger.onclick = () => {
-                    this.isOpen = !this.isOpen;
-                };
+    setPage(pageIndex) {
+        const evt = this.buildPageEvent(pageIndex);
+        this.pageIndex = pageIndex;
+        this.page.emit(evt);
+    }
+    getPages() {
+        const pages = [];
+        const currentSet = Math.ceil((this.pageIndex + 1) / this.maxPagesShown);
+        for (let i = 0; i < this.getNumberOfPages(); i++) {
+            if (currentSet === Math.ceil((i + 1) / this.maxPagesShown)) {
+                pages.push({ pageIndex: i, number: i + 1, active: this.pageIndex === i });
             }
         }
+        return pages;
     }
-    backdropClick() {
-        this.isOpen = false;
+    getNumberOfPages() {
+        return Math.ceil(this.length / this.pageSize);
     }
-    handlePanelLeave() {
-        if (this.action === 'mouseenter') {
-            this.isOpen = false;
+    getRowIndexStart(pageIndex) {
+        const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
+        return index * this.pageSize;
+    }
+    getRowIndexEnd(pageIndex) {
+        const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
+        let indexEnd = (index * this.pageSize) + this.pageSize - 1;
+        if (indexEnd >= this.length) {
+            indexEnd = this.length - 1;
         }
+        return indexEnd;
+    }
+    hasNextPage() {
+        return (this.pageIndex !== this.getNumberOfPages() - 1);
+    }
+    hasPreviousPage() {
+        return (this.pageIndex > 0);
     }
 }
-FwPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPopoverComponent, selector: "fw-popover", inputs: { position: "position", trigger: "trigger", isOpen: "isOpen", action: "action", flyoutPanel: "flyoutPanel" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel [position]=\"position\" (mouseLeave)=\"handlePanelLeave()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: ["position"], outputs: ["mouseLeave"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverComponent, decorators: [{
+FwPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4>{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-popover', template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel [position]=\"position\" (mouseLeave)=\"handlePanelLeave()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n" }]
-        }], propDecorators: { position: [{
+            args: [{ selector: 'fw-paginator', template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4>{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
+        }], propDecorators: { size: [{
                 type: Input
-            }], trigger: [{
+            }], color: [{
                 type: Input
-            }], isOpen: [{
+            }], shape: [{
                 type: Input
-            }], action: [{
+            }], variant: [{
                 type: Input
-            }], flyoutPanel: [{
+            }], disabled: [{
+                type: Input
+            }], showNext: [{
+                type: Input
+            }], showPrevious: [{
+                type: Input
+            }], showFirst: [{
+                type: Input
+            }], showLast: [{
+                type: Input
+            }], pageIndex: [{
                 type: Input
+            }], pageSize: [{
+                type: Input
+            }], maxPagesShown: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], selectorTitle: [{
+                type: Input
+            }], page: [{
+                type: Output
             }] } });
 
-class FwPopoverModule {
-}
-FwPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FwPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, declarations: [FwPopoverComponent,
-        FwPopoverPanelComponent], imports: [CommonModule,
-        FwLayoutsModule,
-        OverlayModule], exports: [FwPopoverComponent,
-        FwPopoverPanelComponent] });
-FwPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, providers: [
-        Overlay,
-    ], imports: [CommonModule,
-        FwLayoutsModule,
-        OverlayModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FwLayoutsModule,
-                        OverlayModule,
-                    ],
-                    exports: [
-                        FwPopoverComponent,
-                        FwPopoverPanelComponent,
-                    ],
-                    declarations: [
-                        FwPopoverComponent,
-                        FwPopoverPanelComponent,
-                    ],
-                    providers: [
-                        Overlay,
-                    ],
-                }]
-        }] });
-
-class BackButtonComponent {
-    constructor(location) {
-        this.location = location;
-        this.class = 'fw-back-button';
-    }
-}
-BackButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BackButtonComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-BackButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BackButtonComponent, selector: "fw-back-button", host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<button (click)=\"location.back()\"><fw-icon>arrow-back</fw-icon></button>", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--typography-light);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BackButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fw-back-button', encapsulation: ViewEncapsulation.None, template: "<button (click)=\"location.back()\"><fw-icon>arrow-back</fw-icon></button>", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--typography-light);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { class: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }] } });
-
-class FwSectionHeadingComponent {
-    constructor() {
-        this.class = 'fw-section-heading';
-        this.backButton = false;
-    }
-}
-FwSectionHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwSectionHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSectionHeadingComponent, selector: "fw-section-heading", inputs: { title: "title", description: "description", backButton: "backButton", icon: "icon" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n  <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n  <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-icon\"></ng-content>\n  <div>\n    <h2 class=\"section-heading\">{{ title }}\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h2>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: BackButtonComponent, selector: "fw-back-button" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fw-section-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n  <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n  <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-icon\"></ng-content>\n  <div>\n    <h2 class=\"section-heading\">{{ title }}\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h2>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], backButton: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }] } });
-
-class FwSubsectionHeadingComponent {
-    constructor() {
-    }
-}
-FwSubsectionHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSubsectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwSubsectionHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSubsectionHeadingComponent, selector: "fw-subsection-heading", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<div class=\"heading-area\">\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n  <h3 class=\"subsection-heading\">{{ title }}</h3>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%;display:flex;justify-content:space-between;align-items:center}:host .heading-area{display:flex;align-items:center;gap:8px}:host .heading-area h3{color:var(--typography-base);margin:0}:host .heading-area fw-icon{color:var(--typography-light);width:24px;height:24px;font-size:24px;text-align:center}:host .right-content{display:flex;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSubsectionHeadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fw-subsection-heading', template: "<div class=\"heading-area\">\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n  <h3 class=\"subsection-heading\">{{ title }}</h3>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%;display:flex;justify-content:space-between;align-items:center}:host .heading-area{display:flex;align-items:center;gap:8px}:host .heading-area h3{color:var(--typography-base);margin:0}:host .heading-area fw-icon{color:var(--typography-light);width:24px;height:24px;font-size:24px;text-align:center}:host .right-content{display:flex;gap:10px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }] } });
-
-class FwSectionHeadingModule {
-}
-FwSectionHeadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FwSectionHeadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, declarations: [BackButtonComponent,
-        FwSectionHeadingComponent,
-        FwSubsectionHeadingComponent], imports: [CommonModule,
-        FwButtonModule,
-        FwIconModule], exports: [FwSectionHeadingComponent,
-        FwSubsectionHeadingComponent] });
-FwSectionHeadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, imports: [CommonModule,
-        FwButtonModule,
-        FwIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FwButtonModule,
-                        FwIconModule,
-                    ],
-                    exports: [
-                        FwSectionHeadingComponent,
-                        FwSubsectionHeadingComponent,
-                    ],
-                    declarations: [
-                        BackButtonComponent,
-                        FwSectionHeadingComponent,
-                        FwSubsectionHeadingComponent,
-                    ],
-                }]
-        }] });
-
+/* eslint-disable  @typescript-eslint/no-explicit-any */
 class FwMultiSelectMenuComponent {
-    constructor() {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
         this.options = [];
         this.valueProperty = 'value';
         this.titleProperty = 'title';
@@ -2944,15 +2979,34 @@ class FwMultiSelectMenuComponent {
         this.minHeight = '36px';
         this.maxHeight = '200px';
         this.placeholder = 'Select something...';
-        this.value = [];
         this.selectedValues = [];
+        this.selectedOptions = [];
         this.filteredOptions = [];
         this.subscriptions = [];
         this.focused = 0;
         this.touched = false;
+        this._isOpen = false;
         this.onTouched = () => {
         };
     }
+    outsideClick() {
+        if (this._isOpen) {
+            this.trigger.close();
+            this._isOpen = false;
+        }
+        if (this.trigger && this.trigger.isOpen()) {
+            this._isOpen = true;
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        if (newValue && newValue.length > 0) {
+            this._valueType = typeof newValue[0];
+        }
+        this.updateValue(newValue);
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -2963,7 +3017,8 @@ class FwMultiSelectMenuComponent {
         this.disabled = isDisabled;
     }
     writeValue(value) {
-        this.updateValue(value);
+        // this.updateValue(value);
+        this.value = value;
     }
     ngOnChanges(changes) {
         if (changes.options) {
@@ -2976,14 +3031,20 @@ class FwMultiSelectMenuComponent {
         }
     }
     ngAfterContentInit() {
-        if (this.options && this.options.length === 0 && this.menuItems && this.menuItems.length > 0) {
-            this.options = [];
-            this.menuItems.forEach(item => {
-                this.options.push({ value: item.value, label: item.title, icon: item.icon });
-                const sub = item.click.subscribe(value => this.menu.writeValue(value));
-                this.subscriptions.push(sub);
-            });
-            this.updateFilteredItems();
+        if (this.menuItems && this.menuItems.length > 0) {
+            if (this.options && this.options.length === 0) {
+                this.options = [];
+                this.menuItems.forEach(item => {
+                    const opt = { value: item.value, label: item.title, icon: item.icon };
+                    this.options.push(opt);
+                    if (this.selectedValues.indexOf(item.value.toString()) >= 0) {
+                        this.selectedOptions.push(opt);
+                    }
+                    const sub = item.click.subscribe(value => this.menu.writeValue(value));
+                    this.subscriptions.push(sub);
+                });
+                this.updateFilteredItems();
+            }
         }
     }
     handleTouched() {
@@ -3040,11 +3101,26 @@ class FwMultiSelectMenuComponent {
         }
     }
     updateValue(value) {
-        this.value = value;
+        this._value = value;
         this.selectedValues = [];
+        this.selectedOptions = [];
         if (value) {
             value.forEach(val => {
-                this.selectedValues.push(val[this.valueProperty]);
+                if (value && this._valueType === 'object') {
+                    this.selectedValues.push(val[this.valueProperty]);
+                    this.selectedOptions.push(val);
+                }
+                else {
+                    this.selectedValues.push(val);
+                    if (this.options && this.options.length) {
+                        this.selectedOptions = [];
+                        this.options.forEach(opt => {
+                            if (value.indexOf(opt[this.valueProperty]) >= 0) {
+                                this.selectedOptions.push(opt);
+                            }
+                        });
+                    }
+                }
             });
         }
         this.updateFilteredItems();
@@ -3128,14 +3204,14 @@ class FwMultiSelectMenuComponent {
         }
     }
 }
-FwMultiSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", disabled: "disabled", useCheckbox: "useCheckbox", closeOnSelect: "closeOnSelect", filterItemsOnSelect: "filterItemsOnSelect", maxSelectedShown: "maxSelectedShown", width: "width", minHeight: "minHeight", maxHeight: "maxHeight", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder" }, providers: [
+FwMultiSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", disabled: "disabled", useCheckbox: "useCheckbox", closeOnSelect: "closeOnSelect", filterItemsOnSelect: "filterItemsOnSelect", maxSelectedShown: "maxSelectedShown", width: "width", minHeight: "minHeight", maxHeight: "maxHeight", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, host: { listeners: { "document:click": "outsideClick()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of value | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [ngModel]=\"selectedValues\"\n        (ngModelChange)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-multi-select', providers: [
@@ -3144,8 +3220,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of value | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [ngModel]=\"selectedValues\"\n        (ngModelChange)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
-        }], propDecorators: { options: [{
+                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }], options: [{
                 type: Input
             }], valueProperty: [{
                 type: Input
@@ -3193,10 +3272,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], textInitialInput: [{
                 type: ViewChild,
                 args: ['textInitialInput']
+            }], value: [{
+                type: Input
             }] } });
 
+/* eslint-disable  @typescript-eslint/no-explicit-any */
 class FwSelectMenuComponent {
-    constructor() {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
         this.options = [];
         this.valueProperty = 'value';
         this.titleProperty = 'title';
@@ -3209,18 +3292,63 @@ class FwSelectMenuComponent {
         this.selectTitle = '';
         this.selectIcon = '';
         this.subscriptions = [];
+        this._isOpen = false;
         this.onTouched = () => {
         };
     }
+    outsideClick() {
+        if (this._isOpen) {
+            this.trigger.close();
+            this._isOpen = false;
+        }
+        if (this.trigger && this.trigger.isOpen()) {
+            this._isOpen = true;
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this._valueType = typeof newValue;
+        this.updateValue(newValue);
+    }
+    /**
+     * Saves a callback function to be invoked when the select's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the value changes.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /**
+     * Saves a callback function to be invoked when the select is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param fn Callback to be triggered when the component has been touched.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Disables the select. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     *
+     * @param isDisabled Sets whether the component is disabled.
+     */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+        this._changeDetectorRef.markForCheck();
     }
+    /**
+     * Sets the select's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     *
+     * @param value New value to be written to the model.
+     */
     writeValue(value) {
         this.updateValue(value);
     }
@@ -3233,9 +3361,13 @@ class FwSelectMenuComponent {
         if (this.options.length === 0 && this.menuItems.length > 0) {
             this.options = [];
             this.menuItems.forEach(item => {
-                this.options.push({ value: item.value, title: item.title, icon: item.icon });
+                this.options.push({ value: item.value.toString(), title: item.title.toString(), icon: item.icon });
                 const sub = item.click.subscribe(value => this.menu.writeValue(value));
                 this.subscriptions.push(sub);
+                if (item.value.toString() === this.selectValue) {
+                    this.selectTitle = item.title.toString();
+                    this.selectIcon = item.icon;
+                }
             });
         }
     }
@@ -3243,32 +3375,53 @@ class FwSelectMenuComponent {
         if (e && e.length > 0) {
             if (this.selectValue !== e) {
                 this.options.forEach(item => {
-                    if (item[this.valueProperty] === e) {
-                        this.updateValue(item);
-                        this.onChange(item);
+                    if (item[this.valueProperty].toString() === e) {
+                        if (this._valueType === 'object') {
+                            this.updateValue(item);
+                            this.onChange(item);
+                        }
+                        else {
+                            this.updateValue(item[this.valueProperty]);
+                            this.onChange(item[this.valueProperty]);
+                        }
                     }
                 });
-                this.trigger.close();
+                // this.trigger.close();
             }
         }
     }
     updateValue(value) {
-        this.value = value;
-        if (value) {
-            this.selectValue = value[this.valueProperty];
-            this.selectTitle = value[this.titleProperty];
+        this._value = value;
+        if (this.trigger) {
+            this.trigger.close();
+        }
+        if (value && this._valueType === 'object') {
+            this.selectValue = value[this.valueProperty].toString();
+            this.selectTitle = value[this.titleProperty].toString();
             this.selectIcon = value[this.iconProperty];
         }
+        else {
+            this.selectValue = value ? value.toString() : '';
+            this.selectTitle = value ? value.toString() : '';
+            if (this.options && this.options.length) {
+                this.options.forEach(opt => {
+                    if (opt[this.valueProperty] === value) {
+                        this.selectTitle = opt[this.titleProperty].toString();
+                        this.selectIcon = opt[this.iconProperty];
+                    }
+                });
+            }
+        }
     }
 }
-FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", showFilter: "showFilter", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder" }, providers: [
+FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", showFilter: "showFilter", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, host: { listeners: { "document:click": "outsideClick()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FwSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [(ngModel)]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [ngModel]=\"selectValue\"\n        (ngModelChange)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "error", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-select', providers: [
@@ -3277,8 +3430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FwSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [(ngModel)]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [ngModel]=\"selectValue\"\n        (ngModelChange)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
-        }], propDecorators: { options: [{
+                    ], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }], options: [{
                 type: Input
             }], valueProperty: [{
                 type: Input
@@ -3307,6 +3463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], menuItems: [{
                 type: ContentChildren,
                 args: [FwMenuItemComponent]
+            }], value: [{
+                type: Input
             }] } });
 
 class FwSelectMenuModule {
@@ -3351,6 +3509,383 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwPaginatorAdvancedComponent {
+    constructor() {
+        this.disabled = false;
+        this.showNext = true;
+        this.showPrevious = true;
+        this.showFirst = false;
+        this.showLast = false;
+        this.pageIndex = 0;
+        this.pageSizeOptions = [10, 25, 50, 100];
+        this.length = 0;
+        this.alignment = 'center';
+        this.selectorTitle = 'Items per page:';
+        this._pageSize = 10;
+        this.page = new EventEmitter();
+    }
+    get pageSize() {
+        return this._pageSize;
+    }
+    set pageSize(newSize) {
+        this._pageSize = parseInt(newSize.toString());
+        this.pageIndex = 0;
+        const pageEvt = this.buildPageEvent(0);
+        this.page.emit(pageEvt);
+    }
+    buildPageEvent(pageIndex) {
+        return {
+            length: this.length,
+            pageSize: this.pageSize,
+            pageIndex: pageIndex,
+            previousPageIndex: this.pageIndex,
+            rowIndexStart: this.getRowIndexStart(pageIndex),
+            rowIndexEnd: this.getRowIndexEnd(pageIndex),
+        };
+    }
+    firstPage() {
+        const evt = this.buildPageEvent(1);
+        this.pageIndex = 0;
+        this.page.emit(evt);
+    }
+    lastPage() {
+        const evt = this.buildPageEvent(this.getNumberOfPages());
+        this.pageIndex = this.getNumberOfPages() - 1;
+        this.page.emit(evt);
+    }
+    nextPage() {
+        if (this.hasNextPage()) {
+            const evt = this.buildPageEvent(this.pageIndex + 1);
+            this.pageIndex++;
+            this.page.emit(evt);
+        }
+    }
+    previousPage() {
+        if (this.hasPreviousPage()) {
+            const evt = this.buildPageEvent(this.pageIndex - 1);
+            this.pageIndex--;
+            this.page.emit(evt);
+        }
+    }
+    setPage(pageNumber) {
+        const evt = this.buildPageEvent(pageNumber);
+        this.pageIndex = pageNumber;
+        this.page.emit(evt);
+    }
+    getNumberOfPages() {
+        return Math.ceil(this.length / this.pageSize);
+    }
+    getRowIndexStart(pageIndex) {
+        const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
+        return index * this.pageSize;
+    }
+    getRowIndexEnd(pageIndex) {
+        const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
+        let indexEnd = (index * this.pageSize) + this.pageSize - 1;
+        if (indexEnd > this.length) {
+            indexEnd = this.length - 1;
+        }
+        return indexEnd;
+    }
+    hasNextPage() {
+        return (this.pageIndex !== this.getNumberOfPages() - 1);
+    }
+    hasPreviousPage() {
+        return (this.pageIndex > 0);
+    }
+}
+FwPaginatorAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (click)=\"firstPage()\">\n        <fw-icon>arrow-back-collapse</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showPrevious\"\n        class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"nextPage()\">\n        <fw-icon>chevron-forward</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"lastPage()\">\n        <fw-icon>arrow-forward-collapse</fw-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "showFilter", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-paginator-advanced', template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (click)=\"firstPage()\">\n        <fw-icon>arrow-back-collapse</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showPrevious\"\n        class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"nextPage()\">\n        <fw-icon>chevron-forward</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"lastPage()\">\n        <fw-icon>arrow-forward-collapse</fw-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], showNext: [{
+                type: Input
+            }], showPrevious: [{
+                type: Input
+            }], showFirst: [{
+                type: Input
+            }], showLast: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], selectorTitle: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], page: [{
+                type: Output
+            }] } });
+
+class FwPaginatorModule {
+}
+FwPaginatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwPaginatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorModule, declarations: [FwPaginatorComponent,
+        FwPaginatorAdvancedComponent], imports: [CommonModule,
+        FormsModule,
+        FwIconButtonModule,
+        FwIconModule,
+        FwMenuModule,
+        FwSelectMenuModule], exports: [FwPaginatorComponent,
+        FwPaginatorAdvancedComponent] });
+FwPaginatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorModule, imports: [CommonModule,
+        FormsModule,
+        FwIconButtonModule,
+        FwIconModule,
+        FwMenuModule,
+        FwSelectMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        FwIconButtonModule,
+                        FwIconModule,
+                        FwMenuModule,
+                        FwSelectMenuModule,
+                    ],
+                    exports: [
+                        FwPaginatorComponent,
+                        FwPaginatorAdvancedComponent,
+                    ],
+                    declarations: [
+                        FwPaginatorComponent,
+                        FwPaginatorAdvancedComponent,
+                    ],
+                }]
+        }] });
+
+class FwPopoverPanelComponent {
+    constructor() {
+        this.mouseLeave = new EventEmitter();
+    }
+    get classes() {
+        return ['fw-popover-panel', 'fw-popover-' + this.position].join(' ');
+    }
+    hidePopover(e) {
+        this.mouseLeave.emit(e);
+    }
+}
+FwPopoverPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwPopoverPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: { position: "position" }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-popover-content-wrapper\">\n  <ng-content></ng-content>\n  <div class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}:host.fw-popover-above{margin-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{margin-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{margin-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-popover-panel', template: "<div class=\"fw-popover-content-wrapper\">\n  <ng-content></ng-content>\n  <div class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}.vision-overlay{background-color:var(--separations-overlay)}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}:host.fw-popover-above{margin-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{margin-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{margin-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], mouseLeave: [{
+                type: Output
+            }], classes: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }], hidePopover: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
+class FwPopoverComponent {
+    constructor() {
+        this.position = 'above';
+        this.isOpen = false;
+        this.action = 'mouseenter';
+        this.positionMap = {
+            'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
+            'above-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 40 },
+            'above-right': { originX: 'center', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetX: -40 },
+            'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
+            'below-left': { originX: 'center', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX: 40 },
+            'below-right': { originX: 'center', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX: -40 },
+            'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
+            'left-above': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'bottom', offsetY: 37 },
+            'left-below': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'top', offsetY: -40 },
+            'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
+            'right-above': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 37 },
+            'right-below': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -40 },
+        };
+    }
+    ngOnChanges() {
+        if (this.action && this.trigger) {
+            const trigger = this.trigger;
+            if (this.action === 'mouseenter' && !trigger.onmouseenter) {
+                trigger.onclick = undefined;
+                trigger.style.cursor = 'pointer';
+                trigger.onmouseenter = () => {
+                    this.isOpen = true;
+                };
+                // @ts-expect-error MouseEvent
+                trigger.onmouseleave = (e) => {
+                    const relatedTarget = e.relatedTarget;
+                    if (!relatedTarget.classList.contains('fw-popover-caret') && !relatedTarget.classList.contains('cdk-overlay-pane')) {
+                        this.isOpen = false;
+                    }
+                };
+            }
+            if (this.action === 'click' && !trigger.onclick) {
+                trigger.onmouseenter = undefined;
+                trigger.onmouseleave = undefined;
+                trigger.onclick = () => {
+                    this.isOpen = !this.isOpen;
+                };
+            }
+        }
+    }
+    backdropClick() {
+        this.isOpen = false;
+    }
+    handlePanelLeave() {
+        if (this.action === 'mouseenter') {
+            this.isOpen = false;
+        }
+    }
+}
+FwPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPopoverComponent, selector: "fw-popover", inputs: { position: "position", trigger: "trigger", isOpen: "isOpen", action: "action", flyoutPanel: "flyoutPanel" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel [position]=\"position\" (mouseLeave)=\"handlePanelLeave()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: ["position"], outputs: ["mouseLeave"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-popover', template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel [position]=\"position\" (mouseLeave)=\"handlePanelLeave()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n" }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], trigger: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], flyoutPanel: [{
+                type: Input
+            }] } });
+
+class FwPopoverModule {
+}
+FwPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, declarations: [FwPopoverComponent,
+        FwPopoverPanelComponent], imports: [CommonModule,
+        FwLayoutsModule,
+        OverlayModule], exports: [FwPopoverComponent,
+        FwPopoverPanelComponent] });
+FwPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, providers: [
+        Overlay,
+    ], imports: [CommonModule,
+        FwLayoutsModule,
+        OverlayModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwLayoutsModule,
+                        OverlayModule,
+                    ],
+                    exports: [
+                        FwPopoverComponent,
+                        FwPopoverPanelComponent,
+                    ],
+                    declarations: [
+                        FwPopoverComponent,
+                        FwPopoverPanelComponent,
+                    ],
+                    providers: [
+                        Overlay,
+                    ],
+                }]
+        }] });
+
+class BackButtonComponent {
+    constructor(location) {
+        this.location = location;
+        this.class = 'fw-back-button';
+    }
+}
+BackButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BackButtonComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
+BackButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BackButtonComponent, selector: "fw-back-button", host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<button (click)=\"location.back()\"><fw-icon>arrow-back</fw-icon></button>", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--typography-light);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BackButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-back-button', encapsulation: ViewEncapsulation.None, template: "<button (click)=\"location.back()\"><fw-icon>arrow-back</fw-icon></button>", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--typography-light);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }] } });
+
+class FwSectionHeadingComponent {
+    constructor() {
+        this.class = 'fw-section-heading';
+        this.backButton = false;
+    }
+}
+FwSectionHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwSectionHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSectionHeadingComponent, selector: "fw-section-heading", inputs: { title: "title", description: "description", backButton: "backButton", icon: "icon" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n  <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n  <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-icon\"></ng-content>\n  <div>\n    <h2 class=\"section-heading\">{{ title }}\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h2>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: BackButtonComponent, selector: "fw-back-button" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-section-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n  <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n  <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-icon\"></ng-content>\n  <div>\n    <h2 class=\"section-heading\">{{ title }}\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h2>\n    <p *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], backButton: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class FwSubsectionHeadingComponent {
+    constructor() {
+    }
+}
+FwSubsectionHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSubsectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwSubsectionHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSubsectionHeadingComponent, selector: "fw-subsection-heading", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<div class=\"heading-area\">\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n  <h3 class=\"subsection-heading\">{{ title }}</h3>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%;display:flex;justify-content:space-between;align-items:center}:host .heading-area{display:flex;align-items:center;gap:8px}:host .heading-area h3{color:var(--typography-base);margin:0}:host .heading-area fw-icon{color:var(--typography-light);width:24px;height:24px;font-size:24px;text-align:center}:host .right-content{display:flex;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSubsectionHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-subsection-heading', template: "<div class=\"heading-area\">\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n  <h3 class=\"subsection-heading\">{{ title }}</h3>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%;display:flex;justify-content:space-between;align-items:center}:host .heading-area{display:flex;align-items:center;gap:8px}:host .heading-area h3{color:var(--typography-base);margin:0}:host .heading-area fw-icon{color:var(--typography-light);width:24px;height:24px;font-size:24px;text-align:center}:host .right-content{display:flex;gap:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class FwSectionHeadingModule {
+}
+FwSectionHeadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwSectionHeadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, declarations: [BackButtonComponent,
+        FwSectionHeadingComponent,
+        FwSubsectionHeadingComponent], imports: [CommonModule,
+        FwButtonModule,
+        FwIconModule], exports: [FwSectionHeadingComponent,
+        FwSubsectionHeadingComponent] });
+FwSectionHeadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, imports: [CommonModule,
+        FwButtonModule,
+        FwIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwButtonModule,
+                        FwIconModule,
+                    ],
+                    exports: [
+                        FwSectionHeadingComponent,
+                        FwSubsectionHeadingComponent,
+                    ],
+                    declarations: [
+                        BackButtonComponent,
+                        FwSectionHeadingComponent,
+                        FwSubsectionHeadingComponent,
+                    ],
+                }]
+        }] });
+
 function genMessageId() {
     return String.prototype.padStart(24, Math.floor(Math.random() * Date.now()).toString(16));
 }
@@ -3563,10 +4098,10 @@ class FwSnackbarContainerComponent {
     }
 }
 FwSnackbarContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FwSnackbarService }], target: i0.ɵɵFactoryTarget.Component });
-FwSnackbarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSnackbarContainerComponent, selector: "fw-snackbar-container", host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div role=\"list\">\n  <div class=\"buttons\">\n    <fw-button\n      *ngIf=\"messages.length > 5\" (click)=\"clearAll()\"\n      class=\"clear-all\" aria-label=\"clear all\"\n      color=\"slate\" size=\"small\" type=\"ghost\">\n      Clear All\n    </fw-button>\n  </div>\n  <fw-snackbar\n    *ngFor=\"let message of messages; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [message]=\"message\"\n    [attr.aria-label]=\"message.message\"\n    role=\"listitem\"\n  ></fw-snackbar>\n</div>\n", styles: ["fw-snackbar-container{position:absolute;right:6px;bottom:10px;z-index:999999}fw-snackbar-container .buttons{text-align:right;padding-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwSnackbarComponent, selector: "fw-snackbar", inputs: ["message", "messageDuration"], outputs: ["ready", "dismiss", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FwSnackbarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSnackbarContainerComponent, selector: "fw-snackbar-container", host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div role=\"list\">\n  <div class=\"buttons\">\n    <fw-button\n      *ngIf=\"messages.length > 5\" (click)=\"clearAll()\"\n      class=\"clear-all\" aria-label=\"clear all\"\n      color=\"slate\" size=\"small\" type=\"ghost\">\n      Clear All\n    </fw-button>\n  </div>\n  <fw-snackbar\n    *ngFor=\"let message of messages; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [message]=\"message\"\n    [attr.aria-label]=\"message.message\"\n    role=\"listitem\"\n  ></fw-snackbar>\n</div>\n", styles: ["fw-snackbar-container{position:fixed;right:6px;bottom:10px;z-index:999999}fw-snackbar-container .buttons{text-align:right;padding-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwSnackbarComponent, selector: "fw-snackbar", inputs: ["message", "messageDuration"], outputs: ["ready", "dismiss", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSnackbarContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-snackbar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"list\">\n  <div class=\"buttons\">\n    <fw-button\n      *ngIf=\"messages.length > 5\" (click)=\"clearAll()\"\n      class=\"clear-all\" aria-label=\"clear all\"\n      color=\"slate\" size=\"small\" type=\"ghost\">\n      Clear All\n    </fw-button>\n  </div>\n  <fw-snackbar\n    *ngFor=\"let message of messages; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [message]=\"message\"\n    [attr.aria-label]=\"message.message\"\n    role=\"listitem\"\n  ></fw-snackbar>\n</div>\n", styles: ["fw-snackbar-container{position:absolute;right:6px;bottom:10px;z-index:999999}fw-snackbar-container .buttons{text-align:right;padding-right:10px}\n"] }]
+            args: [{ selector: 'fw-snackbar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"list\">\n  <div class=\"buttons\">\n    <fw-button\n      *ngIf=\"messages.length > 5\" (click)=\"clearAll()\"\n      class=\"clear-all\" aria-label=\"clear all\"\n      color=\"slate\" size=\"small\" type=\"ghost\">\n      Clear All\n    </fw-button>\n  </div>\n  <fw-snackbar\n    *ngFor=\"let message of messages; index as $index\"\n    (ready)=\"onReady($event)\"\n    (dismiss)=\"onDismiss($event)\"\n    [message]=\"message\"\n    [attr.aria-label]=\"message.message\"\n    role=\"listitem\"\n  ></fw-snackbar>\n</div>\n", styles: ["fw-snackbar-container{position:fixed;right:6px;bottom:10px;z-index:999999}fw-snackbar-container .buttons{text-align:right;padding-right:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FwSnackbarService }]; }, propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -3683,10 +4218,10 @@ class FwStepComponent {
     }
 }
 FwStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done", status: "status" }, outputs: { select: "select" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\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: FwIconComponent, selector: "fw-icon" }] });
+FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done", status: "status" }, outputs: { select: "select" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{opacity:.4;color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\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: FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-step', template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"] }]
+            args: [{ selector: 'fw-step', template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{opacity:.4;color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"] }]
         }], propDecorators: { stepNumber: [{
                 type: Input
             }], color: [{
@@ -3850,6 +4385,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwSwitchComponent {
+    constructor() {
+        this.titlePosition = 'end';
+        this.size = 'medium';
+        this.color = 'default';
+        this.onTouched = () => {
+        };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(checked) {
+        this.checked = checked;
+    }
+    handleClick() {
+        this.onTouched();
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            if (this.onChange) {
+                this.onChange(this.checked);
+            }
+        }
+    }
+}
+FwSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSwitchComponent, selector: "fw-switch", inputs: { name: "name", title: "title", titlePosition: "titlePosition", size: "size", color: "color", disabled: "disabled", checked: "checked" }, ngImport: i0, template: "<div\n  [ngClass]=\"['fw-switch', 'size-'+size, 'title-'+titlePosition, color, disabled?'disabled':'']\"\n  (click)=\"handleClick()\">\n  <div class=\"switch-track\" [ngClass]=\"[checked?'checked':'']\">\n    <div class=\"switch-slide\"></div>\n    <div class=\"switch-knob\"></div>\n  </div>\n  <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\">\n  <label *ngIf=\"title\"><p>{{ title }}</p></label>\n</div>\n", styles: [".fw-switch{display:inline-flex;align-items:center;cursor:pointer;margin-left:12px;margin-right:8px}.fw-switch p{margin:0}.fw-switch input{display:none}.fw-switch label{margin-left:8px;margin-right:8px;cursor:pointer}.fw-switch .switch-track{position:relative;width:34px;height:14px;transition:all .4s ease}.fw-switch .switch-track .switch-slide{width:34px;height:14px;border-radius:10px;opacity:.1;background:var(--slate-dark);position:absolute;top:0;left:0;transition:background-color .2s linear,opacity .2s linear}.fw-switch .switch-track .switch-knob{width:20px;height:20px;background-color:var(--slate-light);border-radius:10px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.12)) drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 2px 1px rgba(0,0,0,.2));position:absolute;top:-3px;left:-3px;transition:left .5s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease}.fw-switch .switch-track .switch-knob:hover{outline:9px solid var(--slate-hover)}.fw-switch .switch-track.checked .switch-slide{background-color:var(--slate-dark);opacity:.6;transition:background-color .2s linear,opacity .2s linear}.fw-switch .switch-track.checked .switch-knob{transition:background-color .2s linear,opacity .2s linear,left .5s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;left:16px}.fw-switch.primary .switch-track.checked .switch-slide{background-color:var(--primary-base);transition:background-color .2s linear,opacity .2s linear}.fw-switch.primary .switch-track.checked .switch-knob{background-color:var(--primary-base)}.fw-switch.primary .switch-track.checked .switch-knob:hover{outline:9px solid var(--primary-hover)}.fw-switch.secondary .switch-track.checked .switch-slide,.fw-switch.secondary .switch-track.checked .switch-knob{background-color:var(--secondary-base)}.fw-switch.secondary .switch-track.checked .switch-knob:hover{outline:9px solid var(--secondary-hover)}.fw-switch.title-start{flex-direction:row-reverse}.fw-switch.title-start label{margin-right:10px;margin-left:0}.fw-switch.size-small .switch-track{position:relative;width:26px;height:10px}.fw-switch.size-small .switch-track .switch-slide{width:26px;height:10px;border-radius:10px}.fw-switch.size-small .switch-track .switch-knob{width:16px;height:16px;border-radius:8px}.fw-switch.size-small .switch-track .switch-knob:hover{outline-width:7px}.fw-switch.size-small .switch-track.checked .switch-knob{left:13px}.fw-switch.disabled{cursor:not-allowed}.fw-switch.disabled p{color:var(--typography-light)}.fw-switch.disabled .switch-track{opacity:.5}.fw-switch.disabled .switch-track.checked .switch-slide{background-color:var(--slate-base)}.fw-switch.disabled .switch-track.checked .switch-knob{background-color:var(--slate-light)}.fw-switch.disabled .switch-track.checked .switch-knob:hover{outline:9px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-switch', template: "<div\n  [ngClass]=\"['fw-switch', 'size-'+size, 'title-'+titlePosition, color, disabled?'disabled':'']\"\n  (click)=\"handleClick()\">\n  <div class=\"switch-track\" [ngClass]=\"[checked?'checked':'']\">\n    <div class=\"switch-slide\"></div>\n    <div class=\"switch-knob\"></div>\n  </div>\n  <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\">\n  <label *ngIf=\"title\"><p>{{ title }}</p></label>\n</div>\n", styles: [".fw-switch{display:inline-flex;align-items:center;cursor:pointer;margin-left:12px;margin-right:8px}.fw-switch p{margin:0}.fw-switch input{display:none}.fw-switch label{margin-left:8px;margin-right:8px;cursor:pointer}.fw-switch .switch-track{position:relative;width:34px;height:14px;transition:all .4s ease}.fw-switch .switch-track .switch-slide{width:34px;height:14px;border-radius:10px;opacity:.1;background:var(--slate-dark);position:absolute;top:0;left:0;transition:background-color .2s linear,opacity .2s linear}.fw-switch .switch-track .switch-knob{width:20px;height:20px;background-color:var(--slate-light);border-radius:10px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.12)) drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 2px 1px rgba(0,0,0,.2));position:absolute;top:-3px;left:-3px;transition:left .5s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease}.fw-switch .switch-track .switch-knob:hover{outline:9px solid var(--slate-hover)}.fw-switch .switch-track.checked .switch-slide{background-color:var(--slate-dark);opacity:.6;transition:background-color .2s linear,opacity .2s linear}.fw-switch .switch-track.checked .switch-knob{transition:background-color .2s linear,opacity .2s linear,left .5s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;left:16px}.fw-switch.primary .switch-track.checked .switch-slide{background-color:var(--primary-base);transition:background-color .2s linear,opacity .2s linear}.fw-switch.primary .switch-track.checked .switch-knob{background-color:var(--primary-base)}.fw-switch.primary .switch-track.checked .switch-knob:hover{outline:9px solid var(--primary-hover)}.fw-switch.secondary .switch-track.checked .switch-slide,.fw-switch.secondary .switch-track.checked .switch-knob{background-color:var(--secondary-base)}.fw-switch.secondary .switch-track.checked .switch-knob:hover{outline:9px solid var(--secondary-hover)}.fw-switch.title-start{flex-direction:row-reverse}.fw-switch.title-start label{margin-right:10px;margin-left:0}.fw-switch.size-small .switch-track{position:relative;width:26px;height:10px}.fw-switch.size-small .switch-track .switch-slide{width:26px;height:10px;border-radius:10px}.fw-switch.size-small .switch-track .switch-knob{width:16px;height:16px;border-radius:8px}.fw-switch.size-small .switch-track .switch-knob:hover{outline-width:7px}.fw-switch.size-small .switch-track.checked .switch-knob{left:13px}.fw-switch.disabled{cursor:not-allowed}.fw-switch.disabled p{color:var(--typography-light)}.fw-switch.disabled .switch-track{opacity:.5}.fw-switch.disabled .switch-track.checked .switch-slide{background-color:var(--slate-base)}.fw-switch.disabled .switch-track.checked .switch-knob{background-color:var(--slate-light)}.fw-switch.disabled .switch-track.checked .switch-knob:hover{outline:9px solid transparent}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], titlePosition: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }] } });
+
+class FwSwitchModule {
+}
+FwSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwSwitchModule, declarations: [FwSwitchComponent], imports: [CommonModule], exports: [FwSwitchComponent] });
+FwSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSwitchModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        FwSwitchComponent,
+                    ],
+                    declarations: [
+                        FwSwitchComponent,
+                    ],
+                }]
+        }] });
+
 class FwTabComponent {
     constructor() {
         this.color = 'primary';
@@ -4052,10 +4658,10 @@ class FwTooltipPanelComponent {
     }
 }
 FwTooltipPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTooltipPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: { position: "position", color: "color", maxWidth: "maxWidth" }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div\n  class=\"fw-tooltip-content-wrapper\" [ngClass]=\"color==='dark'?'vision-dark-theme':''\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [".fw-tooltip-panel .fw-tooltip-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center}.fw-tooltip-panel .fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-base);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}.fw-tooltip-panel.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-panel.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 5px);bottom:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-panel.fw-tooltip-below{margin-top:10px}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 5px);top:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-panel.fw-tooltip-left{margin-right:10px}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-panel.fw-tooltip-right{margin-left:10px}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+FwTooltipPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: { position: "position", color: "color", maxWidth: "maxWidth" }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div\n  class=\"fw-tooltip-content-wrapper\" [ngClass]=\"color==='dark'?'vision-dark-theme':''\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [".fw-tooltip-panel .fw-tooltip-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word}.fw-tooltip-panel .fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-base);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}.fw-tooltip-panel.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-panel.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-panel.fw-tooltip-below{margin-top:10px}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-panel.fw-tooltip-left{margin-right:10px}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-panel.fw-tooltip-right{margin-left:10px}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fw-tooltip-content-wrapper\" [ngClass]=\"color==='dark'?'vision-dark-theme':''\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [".fw-tooltip-panel .fw-tooltip-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center}.fw-tooltip-panel .fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-base);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}.fw-tooltip-panel.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-panel.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 5px);bottom:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-panel.fw-tooltip-below{margin-top:10px}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 5px);top:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-panel.fw-tooltip-left{margin-right:10px}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-panel.fw-tooltip-right{margin-left:10px}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
+            args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fw-tooltip-content-wrapper\" [ngClass]=\"color==='dark'?'vision-dark-theme':''\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [".fw-tooltip-panel .fw-tooltip-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-base);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word}.fw-tooltip-panel .fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-panel .fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-base);border:1px solid var(--separations-base);transform:rotate(45deg);position:relative}.fw-tooltip-panel.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-panel.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-panel.fw-tooltip-below{margin-top:10px}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-panel.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-panel.fw-tooltip-left{margin-right:10px}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-panel.fw-tooltip-right{margin-left:10px}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-panel.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
         }], propDecorators: { position: [{
                 type: Input
             }], color: [{
@@ -4088,10 +4694,10 @@ class FwTooltipComponent {
     }
 }
 FwTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: "title", color: "color", position: "position", maxWidth: "maxWidth", isOpen: "isOpen", trigger: "trigger" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  class=\"tooltip-trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }] });
+FwTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: "title", color: "color", position: "position", maxWidth: "maxWidth", isOpen: "isOpen", trigger: "trigger" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  title=\"\" class=\"tooltip-trigger\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:-moz-fit-content;width:fit-content;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-tooltip', template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  class=\"tooltip-trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:-moz-fit-content;width:fit-content}\n"] }]
+            args: [{ selector: 'fw-tooltip', template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  title=\"\" class=\"tooltip-trigger\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:-moz-fit-content;width:fit-content;display:inline-block}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], color: [{
@@ -4145,5 +4751,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwCrumbComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, MinimalTranslationService, TranslationService, genId, genMessageId };
+export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwCrumbComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, MinimalTranslationService, TranslationService, genId, genMessageId };
 //# sourceMappingURL=flywheel-io-vision.mjs.map