@flywheel-io/vision 1.5.0 → 1.5.1

package/fesm2020/flywheel-io-vision.mjs

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule, ContentChildren, Directive, ViewEncapsulation, Optional, Injectable, Inject, SkipSelf, Pipe, SimpleChange, HostListener, ContentChild, forwardRef, ViewChild, ViewChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule, ContentChildren, Directive, ViewEncapsulation, forwardRef, HostListener, Optional, Injectable, Inject, SkipSelf, Pipe, SimpleChange, ContentChild, ViewChild, ViewChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/cdk/dialog';
 import { Dialog, DEFAULT_DIALOG_CONFIG, DIALOG_SCROLL_STRATEGY, DialogModule } from '@angular/cdk/dialog';
 import * as i1$3 from '@angular/cdk/overlay';
@@ -19,8 +21,6 @@ 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 i8 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenuTrigger, CdkMenuModule } from '@angular/cdk/menu';
 import * as i2$2 from '@angular/cdk/text-field';
@@ -1108,6 +1108,236 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwSwitchComponent {
+    constructor() {
+        this.titlePosition = 'end';
+        this.size = 'medium';
+        this.color = 'primary';
+        this.checked = false;
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
+        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);
+            }
+            this.change.emit(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" }, outputs: { change: "change" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FwSwitchComponent),
+            multi: true,
+        },
+    ], 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;height:22px;box-sizing:border-box}.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{height:20px}.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FwSwitchComponent),
+                            multi: true,
+                        },
+                    ], 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;height:22px;box-sizing:border-box}.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{height:20px}.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
+            }], change: [{
+                type: Output
+            }] } });
+
+class FwCheckboxComponent {
+    constructor() {
+        this.checked = false;
+        this.indeterminate = false;
+        this.size = 'medium';
+        this.color = 'primary';
+    }
+    get checkboxStyle() {
+        return `${this.color} ${this.size} ${this.focused} ${this.indeterminate && 'indeterminate' || ''} ${this.disabled && 'disabled' || ''}`;
+    }
+    get labelStyle() {
+        return this.disabled && 'label-disabled' || '';
+    }
+    setIndeterminate() {
+        this.indeterminate = false;
+    }
+    setFocus(focus = '') {
+        this.focused = focus;
+    }
+}
+FwCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", disabled: "disabled", size: "size", color: "color", label: "label" }, ngImport: i0, template: "<div class=\"checkbox-wrapper\">\n  <div class=\"fw-checkbox\" [class]=\"checkboxStyle\">\n    <input\n      type=\"checkbox\"\n      class=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (focusout)=\"setFocus()\"\n      (focusin)=\"setFocus('focused')\"\n      (click)=\"setIndeterminate()\"/>\n  </div>\n  <span [class]=\"labelStyle\" *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: ["@charset \"UTF-8\";.checkbox-wrapper{display:flex;align-items:center;width:-moz-fit-content;width:fit-content}.checkbox-wrapper .compact{width:30px;height:30px}.checkbox-wrapper .compact .checkbox{height:15px;width:15px}.checkbox-wrapper .medium{width:36px;height:36px}.checkbox-wrapper .medium .checkbox{height:18px;width:18px}.checkbox-wrapper .medium .checkbox:after{font-size:18px}.checkbox-wrapper .indeterminate .checkbox:after{content:\"\\2212\";display:block}.checkbox-wrapper .fw-checkbox{display:flex;align-items:center;justify-content:center;border-radius:21px}.checkbox-wrapper .fw-checkbox .checkbox{display:flex;align-items:center;justify-content:center;appearance:none;border:2px solid var(--typography-light);border-radius:1.5px;cursor:pointer;margin:0}.checkbox-wrapper .fw-checkbox .checkbox:after{font-family:Flywheel-Vision-Icons,emoji;color:var(--page-light);font-weight:600;content:\"\\e91e\";font-size:15px;display:none}.checkbox-wrapper .fw-checkbox .checkbox:checked:after{display:block}.checkbox-wrapper .disabled:hover{background:none}.checkbox-wrapper .disabled .checkbox{border:2px solid var(--typography-light)}.checkbox-wrapper .disabled .checkbox:checked{background-color:var(--typography-light);border:2px solid var(--typography-light)}.checkbox-wrapper .primary:hover{background:var(--primary-light)}.checkbox-wrapper .primary .checkbox:checked{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .primary.focused{background:var(--primary-light)}.checkbox-wrapper .primary.focused .checkbox{border:2px solid var(--primary-base)}.checkbox-wrapper .secondary:hover{background:var(--secondary-light)}.checkbox-wrapper .secondary .checkbox:checked{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .secondary.focused{background:var(--secondary-light)}.checkbox-wrapper .secondary.focused .checkbox{border:2px solid var(--secondary-base)}.checkbox-wrapper .indeterminate.compact .checkbox:after{font-size:17px}.checkbox-wrapper .indeterminate.medium .checkbox:after{font-size:22px}.checkbox-wrapper .primary.indeterminate .checkbox{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .secondary.indeterminate .checkbox{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .disabled.indeterminate .checkbox{background-color:var(--typography-light);border-color:var(--typography-light)}.checkbox-wrapper .label-disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox-wrapper\">\n  <div class=\"fw-checkbox\" [class]=\"checkboxStyle\">\n    <input\n      type=\"checkbox\"\n      class=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (focusout)=\"setFocus()\"\n      (focusin)=\"setFocus('focused')\"\n      (click)=\"setIndeterminate()\"/>\n  </div>\n  <span [class]=\"labelStyle\" *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: ["@charset \"UTF-8\";.checkbox-wrapper{display:flex;align-items:center;width:-moz-fit-content;width:fit-content}.checkbox-wrapper .compact{width:30px;height:30px}.checkbox-wrapper .compact .checkbox{height:15px;width:15px}.checkbox-wrapper .medium{width:36px;height:36px}.checkbox-wrapper .medium .checkbox{height:18px;width:18px}.checkbox-wrapper .medium .checkbox:after{font-size:18px}.checkbox-wrapper .indeterminate .checkbox:after{content:\"\\2212\";display:block}.checkbox-wrapper .fw-checkbox{display:flex;align-items:center;justify-content:center;border-radius:21px}.checkbox-wrapper .fw-checkbox .checkbox{display:flex;align-items:center;justify-content:center;appearance:none;border:2px solid var(--typography-light);border-radius:1.5px;cursor:pointer;margin:0}.checkbox-wrapper .fw-checkbox .checkbox:after{font-family:Flywheel-Vision-Icons,emoji;color:var(--page-light);font-weight:600;content:\"\\e91e\";font-size:15px;display:none}.checkbox-wrapper .fw-checkbox .checkbox:checked:after{display:block}.checkbox-wrapper .disabled:hover{background:none}.checkbox-wrapper .disabled .checkbox{border:2px solid var(--typography-light)}.checkbox-wrapper .disabled .checkbox:checked{background-color:var(--typography-light);border:2px solid var(--typography-light)}.checkbox-wrapper .primary:hover{background:var(--primary-light)}.checkbox-wrapper .primary .checkbox:checked{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .primary.focused{background:var(--primary-light)}.checkbox-wrapper .primary.focused .checkbox{border:2px solid var(--primary-base)}.checkbox-wrapper .secondary:hover{background:var(--secondary-light)}.checkbox-wrapper .secondary .checkbox:checked{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .secondary.focused{background:var(--secondary-light)}.checkbox-wrapper .secondary.focused .checkbox{border:2px solid var(--secondary-base)}.checkbox-wrapper .indeterminate.compact .checkbox:after{font-size:17px}.checkbox-wrapper .indeterminate.medium .checkbox:after{font-size:22px}.checkbox-wrapper .primary.indeterminate .checkbox{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .secondary.indeterminate .checkbox{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .disabled.indeterminate .checkbox{background-color:var(--typography-light);border-color:var(--typography-light)}.checkbox-wrapper .label-disabled{color:var(--typography-light)}\n"] }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class FwContainedInputComponent {
+    constructor() {
+        this.inputPosition = 'end';
+        this.inputVariant = 'switch';
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
+    }
+    clicked() {
+        this.checked = !this.checked;
+        this.change.emit(true);
+    }
+    get classes() {
+        return [
+            'fw-contained-input',
+            `position-${this.inputPosition}`,
+            [this.checked ? 'checked' : ''],
+            [this.disabled ? 'disabled' : ''],
+        ].join(' ');
+    }
+    ;
+}
+FwContainedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwContainedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwContainedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwContainedInputComponent, selector: "fw-contained-input", inputs: { title: "title", description: "description", status: "status", inputPosition: "inputPosition", inputVariant: "inputVariant", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, host: { listeners: { "click": "clicked()" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"heading-area\">\n  <ng-content select=\"fw-avatar\"></ng-content>\n  <div>\n    <h4 class=\"section-heading\">{{ title }}\n      <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n      <ng-content select=\"fw-icon\"></ng-content>\n    </h4>\n    <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n  </div>\n</div>\n<div class=\"input-content\">\n  <fw-switch *ngIf=\"inputVariant==='switch'\" [checked]=\"checked\" color=\"primary\"></fw-switch>\n  <fw-checkbox *ngIf=\"inputVariant==='checkbox'\" [checked]=\"checked\" color=\"primary\"></fw-checkbox>\n</div>\n", styles: [":host{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;border:1px var(--separations-base) solid;padding:16px;border-radius:8px;cursor:pointer}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start{flex-direction:row-reverse}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .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}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwSwitchComponent, selector: "fw-switch", inputs: ["name", "title", "titlePosition", "size", "color", "disabled", "checked"], outputs: ["change"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["checked", "indeterminate", "disabled", "size", "color", "label"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwContainedInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-contained-input', template: "<div class=\"heading-area\">\n  <ng-content select=\"fw-avatar\"></ng-content>\n  <div>\n    <h4 class=\"section-heading\">{{ title }}\n      <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n      <ng-content select=\"fw-icon\"></ng-content>\n    </h4>\n    <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n  </div>\n</div>\n<div class=\"input-content\">\n  <fw-switch *ngIf=\"inputVariant==='switch'\" [checked]=\"checked\" color=\"primary\"></fw-switch>\n  <fw-checkbox *ngIf=\"inputVariant==='checkbox'\" [checked]=\"checked\" color=\"primary\"></fw-checkbox>\n</div>\n", styles: [":host{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;border:1px var(--separations-base) solid;padding:16px;border-radius:8px;cursor:pointer}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start{flex-direction:row-reverse}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .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}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], inputPosition: [{
+                type: Input
+            }], inputVariant: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], clicked: [{
+                type: HostListener,
+                args: ['click']
+            }], classes: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }] } });
+
+class FwCheckboxModule {
+}
+FwCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwCheckboxModule, declarations: [FwCheckboxComponent], imports: [CommonModule], exports: [FwCheckboxComponent] });
+FwCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCheckboxModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        FwCheckboxComponent,
+                    ],
+                    declarations: [
+                        FwCheckboxComponent,
+                    ],
+                }]
+        }] });
+
+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 FwContainedInputModule {
+}
+FwContainedInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwContainedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwContainedInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwContainedInputModule, declarations: [FwContainedInputComponent], imports: [CommonModule,
+        FwButtonModule,
+        FwIconModule,
+        FwSwitchModule,
+        FwCheckboxModule], exports: [FwContainedInputComponent] });
+FwContainedInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwContainedInputModule, imports: [CommonModule,
+        FwButtonModule,
+        FwIconModule,
+        FwSwitchModule,
+        FwCheckboxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwContainedInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwButtonModule,
+                        FwIconModule,
+                        FwSwitchModule,
+                        FwCheckboxModule,
+                    ],
+                    exports: [
+                        FwContainedInputComponent,
+                    ],
+                    declarations: [
+                        FwContainedInputComponent,
+                    ],
+                }]
+        }] });
+
 var DialogWidth;
 (function (DialogWidth) {
     DialogWidth["ExtraSmall"] = "extra-small";
@@ -1134,10 +1364,10 @@ class FwDialogComponent {
     }
 }
 FwDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FwDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose" }, outputs: { close: "close" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3>{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-base);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;max-width:95%;margin:auto}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .dialog{position:relative}:host .dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .dialog .dialog-header{background-color:var(--card-header)}:host .dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .dialog .dialog-header .dialog-title h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .dialog .dialog-header h3{margin:0}:host .dialog .dialog-header:empty{display:none}:host .dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .dialog .dialog-body:empty{display:none}:host .dialog .dialog-actions{padding:16px}:host .dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose" }, outputs: { close: "close" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3>{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-base);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .dialog{position:relative}:host .dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .dialog .dialog-header{background-color:var(--card-header)}:host .dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .dialog .dialog-header .dialog-title h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .dialog .dialog-header h3{margin:0}:host .dialog .dialog-header:empty{display:none}:host .dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .dialog .dialog-body:empty{display:none}:host .dialog .dialog-actions{padding:16px}:host .dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-dialog', template: "<div class=\"dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3>{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-base);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;max-width:95%;margin:auto}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .dialog{position:relative}:host .dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .dialog .dialog-header{background-color:var(--card-header)}:host .dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .dialog .dialog-header .dialog-title h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .dialog .dialog-header h3{margin:0}:host .dialog .dialog-header:empty{display:none}:host .dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .dialog .dialog-body:empty{display:none}:host .dialog .dialog-actions{padding:16px}:host .dialog .dialog-actions:empty{display:none}\n"] }]
+            args: [{ selector: 'fw-dialog', template: "<div class=\"dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3>{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-base);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .dialog{position:relative}:host .dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .dialog .dialog-header{background-color:var(--card-header)}:host .dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .dialog .dialog-header .dialog-title h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .dialog .dialog-header h3{margin:0}:host .dialog .dialog-header:empty{display:none}:host .dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .dialog .dialog-body:empty{display:none}:host .dialog .dialog-actions{padding:16px}:host .dialog .dialog-actions:empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.DialogRef, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { width: [{
@@ -1571,6 +1801,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwFormHeadingComponent {
+    constructor() {
+        this.class = 'fw-form-heading';
+    }
+}
+FwFormHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwFormHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwFormHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: { title: "title", description: "description", status: "status" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n  <div>\n    <h4 class=\"section-heading\">{{ title }}\n      <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h4>\n    <p class=\"vision-p3\" *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-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4 .status{color:var(--primary-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-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-form-heading .right-content{display:flex;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwFormHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-form-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n  <div>\n    <h4 class=\"section-heading\">{{ title }}\n      <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h4>\n    <p class=\"vision-p3\" *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-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4 .status{color:var(--primary-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-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-form-heading .right-content{display:flex;gap:8px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }] } });
+
+class FwFormHeadingModule {
+}
+FwFormHeadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwFormHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwFormHeadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwFormHeadingModule, declarations: [FwFormHeadingComponent], imports: [CommonModule,
+        FwButtonModule,
+        FwIconModule], exports: [FwFormHeadingComponent] });
+FwFormHeadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwFormHeadingModule, imports: [CommonModule,
+        FwButtonModule,
+        FwIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwFormHeadingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwButtonModule,
+                        FwIconModule,
+                    ],
+                    exports: [
+                        FwFormHeadingComponent,
+                    ],
+                    declarations: [
+                        FwFormHeadingComponent,
+                    ],
+                }]
+        }] });
+
 class FwValidators {
 }
 FwValidators.phone = (control) => {
@@ -3525,48 +3802,326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class FwPaginatorComponent {
+class FwNavbarSubItemComponent {
     constructor() {
-        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),
-        };
-    }
-    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);
+        this.hidden = false;
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.selected = false;
     }
-    nextPage() {
-        if (this.hasNextPage()) {
-            const evt = this.buildPageEvent(this.pageIndex + 1);
+}
+FwNavbarSubItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwNavbarSubItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  [@openClose]=\"{value: collapsed?'closed':'open'}\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <h5>{{ title }}</h5>\n        <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n      </div>\n      <div class=\"key-text vision-p2\">\n        <ng-content select=\"p\"></ng-content>\n        <ng-content select=\"fw-badge\"></ng-content>\n        <ng-content select=\"fw-icon\"></ng-content>\n        <ng-content select=\"fw-icon-button\"></ng-content>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host .navbar-sub-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);min-height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+        trigger('openClose', [
+            // ...
+            state('open', style({
+                height: 'auto',
+            }), { params: {} }),
+            state('closed', style({
+                height: '0',
+            }), { params: {} }),
+            transition('open <=> closed', [
+                animate('.33s ease-in-out'),
+            ]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarSubItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-navbar-sub-item', animations: [
+                        trigger('openClose', [
+                            // ...
+                            state('open', style({
+                                height: 'auto',
+                            }), { params: {} }),
+                            state('closed', style({
+                                height: '0',
+                            }), { params: {} }),
+                            transition('open <=> closed', [
+                                animate('.33s ease-in-out'),
+                            ]),
+                        ]),
+                    ], template: "<div\n  *ngIf=\"!hidden\"\n  [@openClose]=\"{value: collapsed?'closed':'open'}\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <h5>{{ title }}</h5>\n        <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n      </div>\n      <div class=\"key-text vision-p2\">\n        <ng-content select=\"p\"></ng-content>\n        <ng-content select=\"fw-badge\"></ng-content>\n        <ng-content select=\"fw-icon\"></ng-content>\n        <ng-content select=\"fw-icon-button\"></ng-content>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host .navbar-sub-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);min-height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], collapsed: [{
+                type: HostBinding,
+                args: ['class.collapsed']
+            }, {
+                type: Input
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.selected']
+            }, {
+                type: Input
+            }] } });
+
+class FwNavbarItemComponent {
+    constructor() {
+        this.iconColor = 'primary';
+        this.hidden = false;
+        this.showTooltip = false;
+        this.subItemsOpen = false;
+        this.subItemsTooltipTitle = '';
+        this.selected = false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ngOnChanges(changes) {
+        this.updateLayout();
+    }
+    ngAfterViewInit() {
+        this.updateLayout();
+    }
+    updateLayout() {
+        if (this.subItems) {
+            this.subItems.forEach(subItem => {
+                subItem.hidden = !(this.subItemsOpen && !this.collapsed);
+                if (this.collapsed !== undefined) {
+                    subItem.collapsed = this.collapsed;
+                }
+                if (this.disabled !== undefined) {
+                    subItem.disabled = this.disabled;
+                }
+            });
+        }
+    }
+    toggleSubItemsView() {
+        this.subItemsOpen = !this.subItemsOpen;
+        this.updateLayout();
+        return false;
+    }
+}
+FwNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n      </fw-tooltip>\n      <ng-content select=\"fw-avatar\"></ng-content>\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <h5>{{ title }}</h5>\n        <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n      </div>\n      <div class=\"key-text vision-p2\">\n        <ng-content select=\"p\"></ng-content>\n        <ng-content select=\"fw-badge\"></ng-content>\n        <ng-content select=\"fw-icon\"></ng-content>\n        <ng-content select=\"fw-icon-button\"></ng-content>\n        <fw-tooltip\n          *ngIf=\"subItems.length>0 && !collapsed\"\n          [title]=\"subItemsTooltipTitle\"\n          position=\"right\">\n          <fw-icon-button\n            [size]=\"'small'\"\n            [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n            (click)=\"toggleSubItemsView()\">\n          </fw-icon-button>\n        </fw-tooltip>\n      </div>\n    </div>\n  </a>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "isOpen", "trigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-navbar-item', template: "<div *ngIf=\"!hidden\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n      </fw-tooltip>\n      <ng-content select=\"fw-avatar\"></ng-content>\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <h5>{{ title }}</h5>\n        <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n      </div>\n      <div class=\"key-text vision-p2\">\n        <ng-content select=\"p\"></ng-content>\n        <ng-content select=\"fw-badge\"></ng-content>\n        <ng-content select=\"fw-icon\"></ng-content>\n        <ng-content select=\"fw-icon-button\"></ng-content>\n        <fw-tooltip\n          *ngIf=\"subItems.length>0 && !collapsed\"\n          [title]=\"subItemsTooltipTitle\"\n          position=\"right\">\n          <fw-icon-button\n            [size]=\"'small'\"\n            [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n            (click)=\"toggleSubItemsView()\">\n          </fw-icon-button>\n        </fw-tooltip>\n      </div>\n    </div>\n  </a>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], collapsed: [{
+                type: HostBinding,
+                args: ['class.collapsed']
+            }, {
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], subItemsOpen: [{
+                type: Input
+            }], subItemsTooltipTitle: [{
+                type: Input
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.selected']
+            }, {
+                type: Input
+            }], subItems: [{
+                type: ContentChildren,
+                args: [FwNavbarSubItemComponent]
+            }] } });
+
+class FwNavbarComponent {
+    constructor() {
+        this.width = '200px';
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ngOnChanges(changes) {
+        this.updateLayout();
+    }
+    ngAfterViewInit() {
+        this.updateLayout();
+    }
+    updateLayout() {
+        if (this.menuItems) {
+            this.menuItems.forEach(item => {
+                if (this.collapsed !== undefined) {
+                    item.collapsed = this.collapsed;
+                }
+                if (this.disabled !== undefined) {
+                    item.disabled = this.disabled;
+                }
+                item.showTooltip = this.collapsed;
+                item.updateLayout();
+            });
+        }
+    }
+}
+FwNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarComponent, selector: "fw-navbar", inputs: { disabled: "disabled", collapsed: "collapsed", width: "width" }, host: { properties: { "class.collapsed": "this.collapsed" } }, queries: [{ propertyName: "menuItems", predicate: FwNavbarItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"navbar\"\n  [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: width || 'inherit'}}\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:hidden auto;scrollbar-width:thin;scrollbar-color:var(--typography-light) var(--slate-hover)}:host .navbar{background-color:var(--card-header)}:host.collapsed{scrollbar-width:none}\n"], animations: [
+        trigger('openClose', [
+            // ...
+            state('open', style({
+                width: '{{openWidth}}',
+            }), { params: { openWidth: '200px' } }),
+            state('closed', style({
+                width: '60px',
+            })),
+            transition('open <=> closed', [
+                animate('.33s ease-in-out'),
+            ]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-navbar', animations: [
+                        trigger('openClose', [
+                            // ...
+                            state('open', style({
+                                width: '{{openWidth}}',
+                            }), { params: { openWidth: '200px' } }),
+                            state('closed', style({
+                                width: '60px',
+                            })),
+                            transition('open <=> closed', [
+                                animate('.33s ease-in-out'),
+                            ]),
+                        ]),
+                    ], template: "<div\n  class=\"navbar\"\n  [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: width || 'inherit'}}\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%;overflow:hidden auto;scrollbar-width:thin;scrollbar-color:var(--typography-light) var(--slate-hover)}:host .navbar{background-color:var(--card-header)}:host.collapsed{scrollbar-width:none}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], collapsed: [{
+                type: HostBinding,
+                args: ['class.collapsed']
+            }, {
+                type: Input
+            }], width: [{
+                type: Input
+            }], menuItems: [{
+                type: ContentChildren,
+                args: [FwNavbarItemComponent]
+            }] } });
+
+class FwNavbarHeaderComponent {
+}
+FwNavbarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwNavbarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarHeaderComponent, selector: "fw-navbar-header", ngImport: i0, template: "<h4>\n  <ng-content></ng-content>\n</h4>\n<ng-content select=\"fw-icon-button\"></ng-content>\n<ng-content select=\"fw-badge\"></ng-content>\n", styles: [":host{display:flex;align-items:center;height:34px;overflow:hidden;container-name:navbarheader;container-type:size}:host h4{padding:8px;margin:0 4px 0 12px;width:100%}@container navbarheader (max-width: 100px){h4{opacity:0}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-navbar-header', template: "<h4>\n  <ng-content></ng-content>\n</h4>\n<ng-content select=\"fw-icon-button\"></ng-content>\n<ng-content select=\"fw-badge\"></ng-content>\n", styles: [":host{display:flex;align-items:center;height:34px;overflow:hidden;container-name:navbarheader;container-type:size}:host h4{padding:8px;margin:0 4px 0 12px;width:100%}@container navbarheader (max-width: 100px){h4{opacity:0}}\n"] }]
+        }] });
+
+class FwNavbarModule {
+}
+FwNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarModule, declarations: [FwNavbarComponent,
+        FwNavbarHeaderComponent,
+        FwNavbarItemComponent,
+        FwNavbarSubItemComponent], imports: [CdkMenuModule,
+        CommonModule,
+        FormsModule,
+        FwBadgeModule,
+        FwIconButtonModule,
+        FwIconModule,
+        FwTextInputModule,
+        FwTooltipModule], exports: [FwNavbarComponent,
+        FwNavbarHeaderComponent,
+        FwNavbarItemComponent,
+        FwNavbarSubItemComponent] });
+FwNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarModule, imports: [CdkMenuModule,
+        CommonModule,
+        FormsModule,
+        FwBadgeModule,
+        FwIconButtonModule,
+        FwIconModule,
+        FwTextInputModule,
+        FwTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CdkMenuModule,
+                        CommonModule,
+                        FormsModule,
+                        FwBadgeModule,
+                        FwIconButtonModule,
+                        FwIconModule,
+                        FwTextInputModule,
+                        FwTooltipModule,
+                    ],
+                    exports: [
+                        FwNavbarComponent,
+                        FwNavbarHeaderComponent,
+                        FwNavbarItemComponent,
+                        FwNavbarSubItemComponent,
+                    ],
+                    declarations: [
+                        FwNavbarComponent,
+                        FwNavbarHeaderComponent,
+                        FwNavbarItemComponent,
+                        FwNavbarSubItemComponent,
+                    ],
+                }]
+        }] });
+
+class FwPaginatorComponent {
+    constructor() {
+        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),
+        };
+    }
+    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);
         }
@@ -3662,7 +4217,6 @@ class FwMultiSelectMenuComponent {
         this.valueProperty = 'value';
         this.titleProperty = 'title';
         this.iconProperty = 'icon';
-        // @Input() showFilter?: boolean = false;
         this.disabled = false;
         this.useCheckbox = false;
         this.closeOnSelect = true;
@@ -3794,7 +4348,7 @@ class FwMultiSelectMenuComponent {
         this.selectedOptions = [];
         if (value) {
             value.forEach(val => {
-                if (value && this._valueType === 'object') {
+                if (typeof val === 'object') {
                     this.selectedValues.push(val[this.valueProperty]);
                     this.selectedOptions.push(val);
                 }
@@ -5787,95 +6341,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class FwSwitchComponent {
-    constructor() {
-        this.titlePosition = 'end';
-        this.size = 'medium';
-        this.color = 'primary';
-        this.checked = false;
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        this.change = new EventEmitter();
-        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);
-            }
-            this.change.emit(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" }, outputs: { change: "change" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FwSwitchComponent),
-            multi: true,
-        },
-    ], 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;height:22px;box-sizing:border-box}.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{height:20px}.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FwSwitchComponent),
-                            multi: true,
-                        },
-                    ], 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;height:22px;box-sizing:border-box}.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{height:20px}.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
-            }], change: [{
-                type: Output
-            }] } });
-
-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';
@@ -6179,5 +6644,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, FwBackButtonComponent, 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, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, LayoutWidth, MinimalTranslationService, TranslationService, genId, genMessageId };
+export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, LayoutWidth, MinimalTranslationService, TranslationService, genId, genMessageId };
 //# sourceMappingURL=flywheel-io-vision.mjs.map