@flywheel-io/vision 1.6.1 → 1.7.0

package/fesm2015/flywheel-io-vision.mjs

@@ -395,10 +395,10 @@ class FwBadgeComponent {
     }
 }
 FwBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwBadgeComponent, selector: "fw-badge", inputs: { color: "color", variant: "variant", value: "value", hideZero: "hideZero", hideEmpty: "hideEmpty" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n  {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FwBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwBadgeComponent, selector: "fw-badge", inputs: { color: "color", variant: "variant", value: "value", hideZero: "hideZero", hideEmpty: "hideEmpty" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n  {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{position:relative;display:inline-flex;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\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: FwBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n  {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{position:relative;display:inline-flex;width:-moz-fit-content;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"] }]
+            args: [{ selector: 'fw-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div class=\"badge-content vision-p4\" *ngIf=\"showBadge()\">\n  {{ value }}\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host.standard .badge-content,:host.static .badge-content{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{position:relative;display:inline-flex;width:fit-content}:host .badge-content{z-index:99;position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--typography-contrast);overflow:hidden;box-sizing:border-box}:host.dot .badge-content{width:8px;height:8px;border-radius:8px;content-visibility:hidden;right:-3px;top:-3px}:host.standard .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;right:-11px;top:-11px}:host.static{align-items:center}:host.static .badge-content{padding:6px;min-width:22px;height:22px;border-radius:64px;position:relative}:host.default .badge-content{background:var(--slate-light);color:var(--typography-base)}:host.primary .badge-content{background:var(--primary-base)}:host.secondary .badge-content{background:var(--secondary-base)}:host.error .badge-content{background:var(--red-base)}:host.warning .badge-content{background:var(--orange-base)}:host.success .badge-content{background:var(--green-base)}:host.slate .badge-content{background:var(--slate-base)}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], variant: [{
@@ -615,8 +615,6 @@ class FwButtonComponent {
         this.variant = 'solid';
         this.disabled = false;
         this.fullWidth = false;
-        this.leftIcon = '';
-        this.rightIcon = '';
     }
     get classes() {
         return ['fw-button', this.size, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
@@ -990,12 +988,35 @@ class FwButtonToggleComponent {
         this.cdref = cdref;
         this.layout = 'basic';
         this.size = 'medium';
+        this.disabled = false;
         this.subscriptions = [];
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
+        this.onTouched = () => {
+        };
     }
     get classes() {
         return ['fw-button-toggle', this.size, this.layout].filter(Boolean).join(' ');
     }
     ;
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this.updateValue(newValue);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ngOnChanges(changes) {
         this.formatToggles();
@@ -1010,6 +1031,13 @@ class FwButtonToggleComponent {
             this.formatToggles();
         }
     }
+    updateValue(value) {
+        this._value = value;
+        if (this.onChange) {
+            this.onChange(value);
+        }
+        this.change.emit(value);
+    }
     formatToggles() {
         if (this.toggleButtons) {
             this.toggleButtons.forEach(toggle => {
@@ -1030,24 +1058,33 @@ class FwButtonToggleComponent {
                 if (this.selectedColor) {
                     toggle.selectedColor = this.selectedColor;
                 }
-                const sub = toggle.click.subscribe(value => {
+                if (this.disabled) {
+                    toggle.disabled = this.disabled;
+                }
+                const sub = toggle.click.subscribe(() => {
                     if (this.multiple && Array.isArray(this.value)) {
                         toggle.selected = !toggle.selected;
-                        this.value.push(value);
                     }
                     else {
                         if (this.toggleButtons.length === 1) {
                             toggle.selected = !toggle.selected;
-                            this.value = toggle.selected ? value : '';
                         }
                         else {
                             this.toggleButtons.forEach(t => {
                                 t.selected = false;
                             });
                             toggle.selected = true;
-                            this.value = value;
                         }
                     }
+                    const vals = this.toggleButtons.map(tb => {
+                        if (tb.selected) {
+                            return tb.value;
+                        }
+                        else {
+                            return null;
+                        }
+                    }).filter(Boolean);
+                    this.writeValue(vals);
                 });
                 this.subscriptions.push(sub);
             });
@@ -1055,10 +1092,22 @@ class FwButtonToggleComponent {
     }
 }
 FwButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FwButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonToggleComponent, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", multiple: "multiple", value: "value", color: "color", selectedColor: "selectedColor" }, host: { properties: { "attr.class": "this.classes" } }, queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}\n"], encapsulation: i0.ViewEncapsulation.None });
+FwButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonToggleComponent, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", multiple: "multiple", disabled: "disabled", color: "color", selectedColor: "selectedColor", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FwButtonToggleComponent),
+            multi: true,
+        },
+    ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-button-toggle', template: '<ng-content select="fw-button-toggle-item"></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}\n"] }]
+            args: [{ selector: 'fw-button-toggle', template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FwButtonToggleComponent),
+                            multi: true,
+                        },
+                    ], styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -1068,7 +1117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
-            }], value: [{
+            }], disabled: [{
                 type: Input
             }], color: [{
                 type: Input
@@ -1076,7 +1125,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], toggleButtons: [{
                 type: ContentChildren,
-                args: [FwButtonToggleItemComponent]
+                args: [FwButtonToggleItemComponent, { descendants: true }]
+            }], change: [{
+                type: Output
+            }], value: [{
+                type: Input
             }] } });
 
 class FwButtonToggleModule {
@@ -1422,10 +1475,10 @@ class FwCheckboxComponent {
     }
 }
 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 });
+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: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"] }]
+            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: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: [{
@@ -1562,6 +1615,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwDateInputComponent {
+    constructor() {
+        this.disabled = false;
+        this.useActionableIcons = false;
+        this.leftIconAction = new EventEmitter();
+        this.placeholder = 'mm/dd/yyyy';
+        this.size = 'medium';
+        this.type = 'date';
+        // we bind this to host because that's where angular form apis put the error classes
+        this.error = false;
+        this.externalControl = null;
+        this.onTouch = () => {
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        this.onChange = (value) => {
+        };
+    }
+    writeValue(obj) {
+        this.value = obj;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    changeHandler(event) {
+        this.value = event.target.value;
+        this.onChange(this.value);
+        this.onTouch();
+    }
+    blurHandler() {
+        this.onTouch();
+    }
+    onLeftIconClick() {
+        this.leftIconAction.emit();
+    }
+}
+FwDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwDateInputComponent, selector: "fw-date-input", inputs: { disabled: "disabled", useActionableIcons: "useActionableIcons", leftIcon: "leftIcon", prefix: "prefix", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", type: "type", max: "max", min: "min", step: "step", autofocus: "autofocus", autocomplete: "autocomplete", error: "error", value: "value" }, outputs: { leftIconAction: "leftIconAction" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: FwDateInputComponent,
+            multi: true,
+        }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">\n      {{ leftIcon }}\n    </fw-icon>\n    <p class=\"context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n    <input\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [max]=\"max\"\n      [min]=\"min\"\n      [step]=\"step\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\">\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-family:Inter,sans-serif;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::-webkit-datetime-edit-fields-wrapper{font-family:Inter,sans-serif}.full-container .input-container input::-webkit-datetime-edit-text{color:var(--typography-light)}.full-container .input-container input::-webkit-datetime-edit-year-field:hover,.full-container .input-container input::-webkit-datetime-edit-year-field:active,.full-container .input-container input::-webkit-datetime-edit-year-field:focus,.full-container .input-container input::-webkit-datetime-edit-month-field:hover,.full-container .input-container input::-webkit-datetime-edit-month-field:active,.full-container .input-container input::-webkit-datetime-edit-month-field:focus,.full-container .input-container input::-webkit-datetime-edit-week-field:hover,.full-container .input-container input::-webkit-datetime-edit-week-field:active,.full-container .input-container input::-webkit-datetime-edit-week-field:focus,.full-container .input-container input::-webkit-datetime-edit-day-field:hover,.full-container .input-container input::-webkit-datetime-edit-day-field:active,.full-container .input-container input::-webkit-datetime-edit-day-field:focus,.full-container .input-container input::-webkit-datetime-edit-hour-field:hover,.full-container .input-container input::-webkit-datetime-edit-hour-field:active,.full-container .input-container input::-webkit-datetime-edit-hour-field:focus,.full-container .input-container input::-webkit-datetime-edit-minute-field:hover,.full-container .input-container input::-webkit-datetime-edit-minute-field:active,.full-container .input-container input::-webkit-datetime-edit-minute-field:focus,.full-container .input-container input::-webkit-datetime-edit-second-field:hover,.full-container .input-container input::-webkit-datetime-edit-second-field:active,.full-container .input-container input::-webkit-datetime-edit-second-field:focus,.full-container .input-container input::-webkit-datetime-edit-millisecond-field:hover,.full-container .input-container input::-webkit-datetime-edit-millisecond-field:active,.full-container .input-container input::-webkit-datetime-edit-millisecond-field:focus,.full-container .input-container input::-webkit-datetime-edit-ampm-field:hover,.full-container .input-container input::-webkit-datetime-edit-ampm-field:active,.full-container .input-container input::-webkit-datetime-edit-ampm-field:focus{background-color:var(--primary-focus);color:var(--typography-base)}.full-container .input-container input::-webkit-calendar-picker-indicator{color:#0000;opacity:1;width:22px;height:22px;cursor:pointer;margin-left:.5rem;margin-right:-1px;outline-width:1px;border-radius:6px}.full-container .input-container input[type=date]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H19C20.5192 3.25 21.75 4.48079 21.75 6V9V19C21.75 20.5192 20.5192 21.75 19 21.75H5C3.48079 21.75 2.25 20.5192 2.25 19V9V6C2.25 4.48079 3.48079 3.25 5 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 6V4.75H5C4.30921 4.75 3.75 5.30921 3.75 6V8.25H20.25V6C20.25 5.30921 19.6908 4.75 19 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6ZM3.75 19V9.75H20.25V19C20.25 19.6908 19.6908 20.25 19 20.25H5C4.30921 20.25 3.75 19.6908 3.75 19ZM7 14C7.55228 14 8 13.5523 8 13C8 12.4477 7.55228 12 7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14ZM8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17ZM12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14ZM11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17ZM17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13C18 13.5523 17.5523 14 17 14Z\" fill=\"%238996a9\"/></svg>')}.full-container .input-container input[type=datetime-local]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H19C20.5192 3.25 21.75 4.48079 21.75 6V9V19C21.75 20.5192 20.5192 21.75 19 21.75H5C3.48079 21.75 2.25 20.5192 2.25 19V9V6C2.25 4.48079 3.48079 3.25 5 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 6V4.75H5C4.30921 4.75 3.75 5.30921 3.75 6V8.25H20.25V6C20.25 5.30921 19.6908 4.75 19 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6ZM3.75 19V9.75H20.25V19C20.25 19.6908 19.6908 20.25 19 20.25H5C4.30921 20.25 3.75 19.6908 3.75 19ZM7 14C7.55228 14 8 13.5523 8 13C8 12.4477 7.55228 12 7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14ZM8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17ZM12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14ZM11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17ZM17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13C18 13.5523 17.5523 14 17 14Z\" fill=\"%238996a9\"/></svg>')}.full-container .input-container input[type=time]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg fill=\"none\" height=\"1024\" viewBox=\"0 0 1024 1024\" width=\"1024\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M981.333 512c0-129.579-52.565-246.997-137.472-331.861s-202.283-137.472-331.861-137.472-246.997 52.565-331.861 137.472-137.472 202.283-137.472 331.861 52.565 246.997 137.472 331.861 202.283 137.472 331.861 137.472 246.997-52.565 331.861-137.472 137.472-202.283 137.472-331.861zM896 512c0 106.069-42.923 201.984-112.469 271.531s-165.461 112.469-271.531 112.469-201.984-42.923-271.531-112.469-112.469-165.461-112.469-271.531 42.923-201.984 112.469-271.531 165.461-112.469 271.531-112.469 201.984 42.923 271.531 112.469 112.469 165.461 112.469 271.531zM469.333 256v256c0 16.597 9.472 31.019 23.595 38.144l170.667 85.333c21.077 10.539 46.72 2.005 57.259-19.072s2.005-46.72-19.072-57.259l-147.115-73.515v-229.632c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667z\" fill=\"%238996a9\"/></svg>')}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-date-input', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FwDateInputComponent,
+                            multi: true,
+                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">\n      {{ leftIcon }}\n    </fw-icon>\n    <p class=\"context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n    <input\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [max]=\"max\"\n      [min]=\"min\"\n      [step]=\"step\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\">\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-family:Inter,sans-serif;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::-webkit-datetime-edit-fields-wrapper{font-family:Inter,sans-serif}.full-container .input-container input::-webkit-datetime-edit-text{color:var(--typography-light)}.full-container .input-container input::-webkit-datetime-edit-year-field:hover,.full-container .input-container input::-webkit-datetime-edit-year-field:active,.full-container .input-container input::-webkit-datetime-edit-year-field:focus,.full-container .input-container input::-webkit-datetime-edit-month-field:hover,.full-container .input-container input::-webkit-datetime-edit-month-field:active,.full-container .input-container input::-webkit-datetime-edit-month-field:focus,.full-container .input-container input::-webkit-datetime-edit-week-field:hover,.full-container .input-container input::-webkit-datetime-edit-week-field:active,.full-container .input-container input::-webkit-datetime-edit-week-field:focus,.full-container .input-container input::-webkit-datetime-edit-day-field:hover,.full-container .input-container input::-webkit-datetime-edit-day-field:active,.full-container .input-container input::-webkit-datetime-edit-day-field:focus,.full-container .input-container input::-webkit-datetime-edit-hour-field:hover,.full-container .input-container input::-webkit-datetime-edit-hour-field:active,.full-container .input-container input::-webkit-datetime-edit-hour-field:focus,.full-container .input-container input::-webkit-datetime-edit-minute-field:hover,.full-container .input-container input::-webkit-datetime-edit-minute-field:active,.full-container .input-container input::-webkit-datetime-edit-minute-field:focus,.full-container .input-container input::-webkit-datetime-edit-second-field:hover,.full-container .input-container input::-webkit-datetime-edit-second-field:active,.full-container .input-container input::-webkit-datetime-edit-second-field:focus,.full-container .input-container input::-webkit-datetime-edit-millisecond-field:hover,.full-container .input-container input::-webkit-datetime-edit-millisecond-field:active,.full-container .input-container input::-webkit-datetime-edit-millisecond-field:focus,.full-container .input-container input::-webkit-datetime-edit-ampm-field:hover,.full-container .input-container input::-webkit-datetime-edit-ampm-field:active,.full-container .input-container input::-webkit-datetime-edit-ampm-field:focus{background-color:var(--primary-focus);color:var(--typography-base)}.full-container .input-container input::-webkit-calendar-picker-indicator{color:#0000;opacity:1;width:22px;height:22px;cursor:pointer;margin-left:.5rem;margin-right:-1px;outline-width:1px;border-radius:6px}.full-container .input-container input[type=date]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H19C20.5192 3.25 21.75 4.48079 21.75 6V9V19C21.75 20.5192 20.5192 21.75 19 21.75H5C3.48079 21.75 2.25 20.5192 2.25 19V9V6C2.25 4.48079 3.48079 3.25 5 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 6V4.75H5C4.30921 4.75 3.75 5.30921 3.75 6V8.25H20.25V6C20.25 5.30921 19.6908 4.75 19 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6ZM3.75 19V9.75H20.25V19C20.25 19.6908 19.6908 20.25 19 20.25H5C4.30921 20.25 3.75 19.6908 3.75 19ZM7 14C7.55228 14 8 13.5523 8 13C8 12.4477 7.55228 12 7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14ZM8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17ZM12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14ZM11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17ZM17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13C18 13.5523 17.5523 14 17 14Z\" fill=\"%238996a9\"/></svg>')}.full-container .input-container input[type=datetime-local]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H19C20.5192 3.25 21.75 4.48079 21.75 6V9V19C21.75 20.5192 20.5192 21.75 19 21.75H5C3.48079 21.75 2.25 20.5192 2.25 19V9V6C2.25 4.48079 3.48079 3.25 5 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 6V4.75H5C4.30921 4.75 3.75 5.30921 3.75 6V8.25H20.25V6C20.25 5.30921 19.6908 4.75 19 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6ZM3.75 19V9.75H20.25V19C20.25 19.6908 19.6908 20.25 19 20.25H5C4.30921 20.25 3.75 19.6908 3.75 19ZM7 14C7.55228 14 8 13.5523 8 13C8 12.4477 7.55228 12 7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14ZM8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17ZM12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14ZM11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17ZM17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13C18 13.5523 17.5523 14 17 14Z\" fill=\"%238996a9\"/></svg>')}.full-container .input-container input[type=time]::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml,<svg fill=\"none\" height=\"1024\" viewBox=\"0 0 1024 1024\" width=\"1024\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M981.333 512c0-129.579-52.565-246.997-137.472-331.861s-202.283-137.472-331.861-137.472-246.997 52.565-331.861 137.472-137.472 202.283-137.472 331.861 52.565 246.997 137.472 331.861 202.283 137.472 331.861 137.472 246.997-52.565 331.861-137.472 137.472-202.283 137.472-331.861zM896 512c0 106.069-42.923 201.984-112.469 271.531s-165.461 112.469-271.531 112.469-201.984-42.923-271.531-112.469-112.469-165.461-112.469-271.531 42.923-201.984 112.469-271.531 165.461-112.469 271.531-112.469 201.984 42.923 271.531 112.469 112.469 165.461 112.469 271.531zM469.333 256v256c0 16.597 9.472 31.019 23.595 38.144l170.667 85.333c21.077 10.539 46.72 2.005 57.259-19.072s2.005-46.72-19.072-57.259l-147.115-73.515v-229.632c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667z\" fill=\"%238996a9\"/></svg>')}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], useActionableIcons: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], leftIconAction: [{
+                type: Output
+            }], prefix: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], error: [{
+                type: HostBinding,
+                args: ['class.errored']
+            }, {
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class FwDateInputModule {
+}
+FwDateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwDateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwDateInputModule, declarations: [FwDateInputComponent], imports: [CommonModule,
+        FwIconModule,
+        ReactiveFormsModule], exports: [FwDateInputComponent] });
+FwDateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDateInputModule, imports: [CommonModule,
+        FwIconModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDateInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwIconModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [
+                        FwDateInputComponent,
+                    ],
+                    declarations: [
+                        FwDateInputComponent,
+                    ],
+                }]
+        }] });
+
 var DialogWidth;
 (function (DialogWidth) {
     DialogWidth["ExtraSmall"] = "extra-small";
@@ -2039,10 +2215,10 @@ class FwFormHeadingComponent {
     }
 }
 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 });
+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-tooltip\"></ng-content>\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"] }]
+            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-tooltip\"></ng-content>\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']
@@ -2106,6 +2282,308 @@ FwValidators.url = (control) => {
     return urlRegEx.test(v) ? null : { 'url': true };
 };
 
+const allIcons = [
+    'technology-cube-3d',
+    'brightness-photo-edit',
+    'target-space-object-select',
+    'crown-style-circle',
+    'hammer-legal-square',
+    'browser-internet-web-windows',
+    'settings-adjust',
+    'lock-unlock',
+    'private-mode-protection-circle',
+    'ai',
+    'reader-studies',
+    'shapes-objects',
+    'cloud-upload',
+    'floppy-save',
+    'text-input-form',
+    'document-file-add-plus-bottom-left',
+    'document-file-upload-bottom-center',
+    'paint-roller',
+    'brush-edit-create',
+    'bucket-paint',
+    'edit-erase',
+    'grid-dot-square',
+    'column-edit',
+    'molecule',
+    'invoice-checkmark-paid',
+    'invoice',
+    'pause',
+    'calendar-arrow-left-center',
+    'file-blank-image-load-mask',
+    'closed-freehand-vector-poly',
+    'curve-object-secet-cursor',
+    'freehand-vector-poly',
+    'pen-edit-circle',
+    'code-block-embed',
+    'italic',
+    'list-paragraph-number',
+    'list-paragraph',
+    'text-bold',
+    'text-cross',
+    'text-h1',
+    'text-h2',
+    'text-underline',
+    'twitter',
+    'smiley-emoji-face',
+    'exchange',
+    'markdown',
+    'quote',
+    'measure-ruler-calibration',
+    'zendesk-logo',
+    'add-server-databases-endpoint',
+    'cloud-network-add',
+    'server-database-endpoint',
+    'book-lab-flask',
+    'list-test-lab-flask',
+    'test-lab-flask',
+    'message-checkmark-sent',
+    'send-message-share',
+    'flywheel-mark-logo',
+    'speed-dashboard',
+    'arrange-filter-sort',
+    'delivery-shipment-packages',
+    'color-ven-design-profile-central',
+    'home-modern-door',
+    'tasklist-to-do-checkmark',
+    'user-profile-group-discovery',
+    'flip-horizontal',
+    'flip-vertical',
+    'facebook',
+    'github-color-login',
+    'linkedin',
+    'youtube',
+    'server-databases-connect',
+    'server-databases-download',
+    'server-databases-minimal-download',
+    'server-databases-sync',
+    'graduate-hat',
+    'blocks-code-test-checkmark',
+    'camera-photo-capture',
+    'photo-edit-brightness-invert',
+    'unlimited-repeat-subscription-circle',
+    'mute',
+    'volume-full',
+    'hand-money-currency',
+    'bookmark-plus-add',
+    'circle',
+    'clip-attachment',
+    'code-text',
+    'document-status-done-checkmark',
+    'done-check-tracked',
+    'home-modern-option-lines',
+    'keyboard',
+    'line',
+    'link-unlink',
+    'measure-angle',
+    'media-library-imports-dowload',
+    'message-chat-info',
+    'microphone-mic-rec-circle',
+    'microphone-mic-rec',
+    'microphone-mic-recording-circle',
+    'pie-graph-chart-sample',
+    'plus-add-rectangle',
+    'polygon',
+    'rotate-arrow-manual',
+    'rotate-item-left',
+    'rotate-item-right',
+    'stars-light-sparkle',
+    'undone-uncheck-untracked',
+    'clap-applause-hands',
+    'email-mail-checkmark-group',
+    'circle-ellipses',
+    'crosshair',
+    'cursor-select',
+    'draw-rectangle',
+    'ruler-bidirectional',
+    'ruler',
+    'workspace-mode',
+    'creative-commons',
+    'free-rights',
+    'hammer-screwdriver',
+    'arrow-annotate',
+    'arrow',
+    'notebook-open',
+    'windows',
+    'add-new-create',
+    'add-row-above',
+    'add-row-below',
+    'arrow-rotate-restore',
+    'arrow-rotate',
+    'arrow-back-collapse',
+    'arrow-forward-collapse',
+    'barcode-serial',
+    'barcode-stack-scan',
+    'button-form-element',
+    'calendar-schedule',
+    'chat-messages-bubble',
+    'checklist-tasks-chechmark-square',
+    'color-design-profile',
+    'computer-chip',
+    'contrast-photo-edit',
+    'document-file-list-protocol',
+    'drag-drop-indicator',
+    'form-metadata-element',
+    'full-screen-zoom',
+    'layout',
+    'header-form-element',
+    'human-artificial-intelligence',
+    'image-photo-copy-left-down',
+    'image-picture-square',
+    'items-group-elements',
+    'layers',
+    'menu-burger-handle',
+    'menu-list-form-square',
+    'message-chat-question-support',
+    'message-question-checkmark',
+    'minus',
+    'mouse-big',
+    'move',
+    'music-play-resume',
+    'music-stop',
+    'notebook-add-plus',
+    'notebook-pen-edit',
+    'notebook',
+    'notes-pen',
+    'object-search-zoom-plus',
+    'pencil-edit-create',
+    'protection-target',
+    'rotate',
+    'scanner',
+    'search-user-profile-person',
+    'search-zoom-minus',
+    'search-zoom-plus',
+    'section-form-element',
+    'server-databases-key-protection',
+    'server-databases-sync-import',
+    'servers-database',
+    'target',
+    'text-long',
+    'text-short-form-element',
+    'timer-clock-style',
+    'user-document',
+    'video-player-controls',
+    'visible-eye-hidden',
+    'window-finder-resize-arrow-down',
+    'window-finder-resize-arrow-up',
+    'window-resize-left',
+    'window-resize-right',
+    'window-zoom-plus-loupe',
+    'laptop-health-medical-cross',
+    'radiology-scan-circle',
+    'money-coin',
+    'brain',
+    'dna-hospital-medical',
+    'lung',
+    'lungs',
+    'protective-mask',
+    'radiology-scan',
+    'stomach',
+    'cash-banknotes',
+    'money-dollar',
+    'money',
+    'cloud-storage-checkmark',
+    'modalities',
+    'search-loop',
+    'question-circle',
+    'earth-globe-fail',
+    'user-setting-gear',
+    'user-delete-cross',
+    'apply-copy-duplicate',
+    'arrow-down',
+    'arrow-up',
+    'grid-layout',
+    'folder-blank',
+    'folder-group',
+    'file-text',
+    'edit-boxed',
+    'chart-trend-square',
+    'layout-grid',
+    'files-library-content',
+    'user-lock',
+    'lock',
+    'add-user',
+    'user-checked',
+    'user-group',
+    'user-key',
+    'thumbs-up-like',
+    'apple',
+    'gitlab',
+    'linux',
+    'add-server',
+    'server-checkmark',
+    'server-upload',
+    'server',
+    'data-tree',
+    'add-circle',
+    'bell-notification',
+    'bookmark',
+    'chart-square',
+    'checklist',
+    'clock-history',
+    'clock-loading',
+    'close-circled',
+    'close',
+    'copy-item',
+    'done-check',
+    'download-status',
+    'download',
+    'edit',
+    'email',
+    'file-download',
+    'files-library',
+    'files',
+    'filter',
+    'flag',
+    'information-circle',
+    'key',
+    'keychain',
+    'label-tag',
+    'link',
+    'loading-status-checkmark',
+    'logout',
+    'menu-horizontal',
+    'menu-vertical',
+    'open',
+    'pie-chart',
+    'search',
+    'setting-gear',
+    'settings-gear-square',
+    'settings-gear',
+    'settings-select',
+    'share',
+    'show-visible',
+    'star',
+    'substract-group',
+    'switch',
+    'trash-delete',
+    'upload',
+    'user',
+    'warning-circle',
+    'warning',
+    'icon-placeholder',
+    'network-storage-alert',
+    'folder-add',
+    'folder-checked',
+    'folder-open',
+    'folder-share',
+    'document-file-blank',
+    'document-file-download',
+    'document-file-tar',
+    'document-file-zip',
+    'document-visible',
+    'documents-files',
+    'arrow-back',
+    'arrow-forward',
+    'chevron-back',
+    'chevron-down',
+    'chevron-forward',
+    'chevron-up',
+    'embed-circle',
+    'rotate-refresh',
+];
+
 var LayoutWidth;
 (function (LayoutWidth) {
     LayoutWidth["Small"] = "small";
@@ -3214,10 +3692,10 @@ class FwTooltipComponent {
     }
 }
 FwTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: "title", color: "color", position: "position", maxWidth: "maxWidth", isOpen: "isOpen", trigger: "trigger" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  title=\"\" class=\"tooltip-trigger\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:-moz-fit-content;width:fit-content;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }] });
+FwTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: "title", color: "color", position: "position", maxWidth: "maxWidth", isOpen: "isOpen", trigger: "trigger" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  title=\"\" class=\"tooltip-trigger\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:fit-content;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-tooltip', template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  title=\"\" class=\"tooltip-trigger\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:-moz-fit-content;width:fit-content;display:inline-block}\n"] }]
+            args: [{ selector: 'fw-tooltip', template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n    <h5>{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n\n<div\n  title=\"\" class=\"tooltip-trigger\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tooltip-trigger{width:fit-content;display:inline-block}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], color: [{
@@ -3675,9 +4153,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     declarations: [
                         FwTextInputComponent,
                     ],
-                    entryComponents: [
-                        FwTextInputComponent,
-                    ],
                 }]
         }] });
 
@@ -4418,10 +4893,10 @@ class FwPaginatorComponent {
     }
 }
 FwPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4>{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4>{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-paginator', template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4>{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
+            args: [{ selector: 'fw-paginator', template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4>{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], color: [{
@@ -4710,7 +5185,7 @@ FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-multi-select', providers: [
@@ -4719,7 +5194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
+                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    class=\"chip-grid\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\n    <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n      <fw-chip\n        *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n        [title]=\"chip[titleProperty]\"\n        [value]=\"chip[valueProperty]\"\n        [icon]=\"chip[iconProperty]\"\n        color=\"primary\"\n        [showClose]=\"true\"\n        (close)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [useCheckbox]=\"useCheckbox\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0\"\n            [disabled]=\"true\" label=\"No options\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click']
@@ -4798,6 +5273,8 @@ class FwSelectMenuComponent {
         this.selectIcon = '';
         this.subscriptions = [];
         this._isOpen = false;
+        this.focused = 0;
+        this.inFocusOpen = false;
         this.onTouched = () => {
         };
     }
@@ -4877,7 +5354,6 @@ class FwSelectMenuComponent {
                 if (item.value.toString() === this.selectValue) {
                     this.selectTitle = item.title.toString();
                     this.selectIcon = item.icon;
-                    // this.selectDescription = item.description.toString();
                 }
             });
         }
@@ -4895,20 +5371,70 @@ class FwSelectMenuComponent {
                 }
             });
         }
+        this.trigger.close();
+    }
+    moveFocused(direction) {
+        switch (direction) {
+            case 'down': {
+                this.focused++;
+                if (this.focused >= this.options.length) {
+                    this.focused = 0;
+                }
+                break;
+            }
+            case 'up': {
+                this.focused--;
+                if (this.focused < 0) {
+                    this.focused = this.options.length - 1;
+                }
+                break;
+            }
+            default: {
+                this.focused = 0;
+                break;
+            }
+        }
     }
     handleKeyDown(event) {
-        if (this.trigger.isOpen() && event.key === 'Escape') {
-            this.trigger.close();
+        if (this.trigger.isOpen()) {
+            if (this.inFocusOpen) {
+                if (event.key === 'ArrowDown') {
+                    this.moveFocused('down');
+                    this.updateValue(this.options[this.focused]);
+                }
+                if (event.key === 'ArrowUp') {
+                    this.moveFocused('up');
+                    this.updateValue(this.options[this.focused]);
+                }
+                if (event.key === 'Tab') {
+                    this.trigger.close();
+                    this.inFocusOpen = false;
+                    this.updateValue(this.preFocusValue);
+                }
+            }
+            else {
+                this.inFocusOpen = true;
+                this.preFocusValue = this.value;
+            }
         }
-        if (this.trigger.isOpen() && event.key === 'Tab') {
-            this.trigger.close();
+        else {
+            if (event.key === 'Enter') {
+                this.inFocusOpen = false;
+                this.preFocusValue = this.value;
+            }
+        }
+    }
+    handleKeyUp(event) {
+        if (this.trigger.isOpen()) {
+            if (event.key === 'Escape') {
+                this.trigger.close();
+                this.inFocusOpen = false;
+                this.updateValue(this.preFocusValue);
+            }
         }
     }
     updateValue(value) {
         this._value = value;
-        if (this.trigger) {
-            this.trigger.close();
-        }
         if (value && this._valueType === 'object' && typeof value === 'object') {
             this.selectValue = value[this.valueProperty].toString();
             this.selectTitle = value[this.titleProperty].toString();
@@ -4929,10 +5455,11 @@ class FwSelectMenuComponent {
                 this.selectTitle = value ? value.toString() : '';
             }
             if (this.options && this.options.length) {
-                this.options.forEach(opt => {
+                this.options.forEach((opt, index) => {
                     if (opt[this.valueProperty] === value) {
                         this.selectTitle = opt[this.titleProperty].toString();
                         this.selectIcon = opt[this.iconProperty];
+                        this.focused = index;
                     }
                 });
             }
@@ -4955,7 +5482,7 @@ FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => FwSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-select', providers: [
@@ -4964,7 +5491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FwSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
+                    ], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
@@ -5135,10 +5662,10 @@ class FwPaginatorAdvancedComponent {
     }
 }
 FwPaginatorAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (click)=\"firstPage()\">\n        <fw-icon>arrow-back-collapse</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showPrevious\"\n        class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"nextPage()\">\n        <fw-icon>chevron-forward</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"lastPage()\">\n        <fw-icon>arrow-forward-collapse</fw-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "descriptionProperty", "showFilter", "showReset", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change"] }] });
+FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (click)=\"firstPage()\">\n        <fw-icon>arrow-back-collapse</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showPrevious\"\n        class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"nextPage()\">\n        <fw-icon>chevron-forward</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"lastPage()\">\n        <fw-icon>arrow-forward-collapse</fw-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "descriptionProperty", "showFilter", "showReset", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-paginator-advanced', template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (click)=\"firstPage()\">\n        <fw-icon>arrow-back-collapse</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showPrevious\"\n        class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"nextPage()\">\n        <fw-icon>chevron-forward</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"lastPage()\">\n        <fw-icon>arrow-forward-collapse</fw-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
+            args: [{ selector: 'fw-paginator-advanced', template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (click)=\"firstPage()\">\n        <fw-icon>arrow-back-collapse</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showPrevious\"\n        class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"nextPage()\">\n        <fw-icon>chevron-forward</fw-icon>\n      </button>\n      <button\n        *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n        (click)=\"lastPage()\">\n        <fw-icon>arrow-forward-collapse</fw-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], showNext: [{
@@ -6892,9 +7419,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     declarations: [
                         FwTextAreaInputComponent,
                     ],
-                    entryComponents: [
-                        FwTextAreaInputComponent,
-                    ],
                 }]
         }] });
 
@@ -6902,5 +7426,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, 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, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, 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, FwDateInputComponent, FwDateInputModule, 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, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, 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, allIcons, genId, genMessageId };
 //# sourceMappingURL=flywheel-io-vision.mjs.map