@flywheel-io/vision 2.3.3 → 2.4.1

package/fesm2022/flywheel-io-vision.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, effect, output, contentChildren, signal, Host, viewChild, ViewChildren, Self } from '@angular/core';
+import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, signal, effect, output, contentChildren, Host, viewChild, ViewChildren, Self } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
@@ -2058,30 +2058,64 @@ var DialogWidth;
     DialogWidth["ExtraLarge"] = "extra-large";
 })(DialogWidth || (DialogWidth = {}));
 class FwDialogComponent {
-    constructor(dialogRef) {
+    constructor(dialogRef, elementRef) {
         this.dialogRef = dialogRef;
+        this.elementRef = elementRef;
         this.width = DialogWidth.ExtraSmall;
         this.iconColor = 'primary';
         this.showClose = true;
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = new EventEmitter();
+        this.isClosing = false;
     }
     get classes() {
-        return 'dialog-width-' + this.width;
+        const classes = {
+            [`dialog-width-${this.width}`]: true,
+            'dialog-closing': this.isClosing,
+        };
+        if (this.externalClasses) {
+            if (typeof this.externalClasses === 'string') {
+                this.externalClasses.split(' ').forEach((cls) => {
+                    if (cls.trim()) {
+                        classes[cls.trim()] = true;
+                    }
+                });
+            }
+            else if (Array.isArray(this.externalClasses)) {
+                this.externalClasses.forEach((cls) => {
+                    if (cls.trim()) {
+                        classes[cls.trim()] = true;
+                    }
+                });
+            }
+            else {
+                Object.assign(classes, this.externalClasses);
+            }
+        }
+        return classes;
     }
     handleCloseButton() {
-        this.dialogRef.close();
-        this.close.emit();
+        this.closeWithAnimation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose" }, outputs: { close: "close" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3 class=\"vision-h3\">{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .dialog{position:relative}:host .dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .dialog .dialog-header{background-color:var(--card-header)}:host .dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .dialog .dialog-header h3{margin:0}:host .dialog .dialog-header:empty{display:none}:host .dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .dialog .dialog-body:empty{display:none}:host .dialog .dialog-actions{padding:16px}:host .dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
+    closeWithAnimation() {
+        if (this.isClosing) {
+            return;
+        }
+        this.isClosing = true;
+        setTimeout(() => {
+            this.dialogRef.close();
+            this.close.emit();
+        }, 300);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$2.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3 class=\"vision-h3\">{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-dialog', template: "<div class=\"dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3 class=\"vision-h3\">{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .dialog{position:relative}:host .dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .dialog .dialog-header{background-color:var(--card-header)}:host .dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .dialog .dialog-header h3{margin:0}:host .dialog .dialog-header:empty{display:none}:host .dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .dialog .dialog-body:empty{display:none}:host .dialog .dialog-actions{padding:16px}:host .dialog .dialog-actions:empty{display:none}\n"] }]
+            args: [{ selector: 'fw-dialog', template: "<div class=\"fw-dialog\">\n  <fw-icon-button\n    *ngIf=\"showClose\"\n    tabindex=\"-1\" icon=\"close\" color=\"slate\"\n    (click)=\"handleCloseButton()\">\n  </fw-icon-button>\n  <div class=\"dialog-header\">\n    <ng-content select=\"fw-dialog-header\"></ng-content>\n    <div class=\"dialog-title\" *ngIf=\"title\">\n      <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n      <h3 class=\"vision-h3\">{{ title }}</h3>\n    </div>\n  </div>\n  <div class=\"dialog-body\">\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n  </div>\n  <div class=\"dialog-actions\">\n    <ng-content select=\"fw-dialog-actions\"></ng-content>\n  </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DialogRef, decorators: [{
                     type: Optional
-                }] }], propDecorators: { width: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { width: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -2091,11 +2125,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], showClose: [{
                 type: Input
+            }], externalClasses: [{
+                type: Input,
+                args: ['class']
             }], close: [{
                 type: Output
             }], classes: [{
                 type: HostBinding,
-                args: ['attr.class']
+                args: ['class']
             }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2114,9 +2151,42 @@ class FwDialogService extends Dialog {
         const defaultSettings = {
             backdropClass: 'vision-overlay',
             positionStrategy: this.overlay.position().global().top(topOffset ? topOffset : '10vh').centerHorizontally(),
+            disableClose: true, // Disable default backdrop close to handle it manually
         };
         config = { ...config, ...defaultSettings };
-        return super.open(component, config);
+        const dialogRef = super.open(component, config);
+        // Handle backdrop clicks with animation
+        if (dialogRef.overlayRef.backdropElement) {
+            dialogRef.overlayRef.backdropElement.addEventListener('click', evt => {
+                evt.stopPropagation();
+                this.closeWithAnimation(dialogRef);
+            });
+        }
+        // Handle ESC key with animation
+        dialogRef.overlayRef.keydownEvents().subscribe(event => {
+            if (event.key === 'Escape') {
+                this.closeWithAnimation(dialogRef);
+            }
+        });
+        return dialogRef;
+    }
+    closeWithAnimation(dialogRef) {
+        const dialogElement = dialogRef.overlayRef.overlayElement?.querySelector('fw-dialog, fw-dialog-confirm, fw-dialog-simple');
+        if (dialogElement && !dialogElement.classList.contains('dialog-closing')) {
+            if (dialogElement.tagName.toLowerCase() !== 'fw-dialog') {
+                // For fw-dialog-confirm and fw-dialog-simple, apply the class to the inner fw-dialog element
+                const innerDialog = dialogElement.querySelector('fw-dialog');
+                if (innerDialog) {
+                    innerDialog.classList.add('dialog-closing');
+                }
+            }
+            else {
+                dialogElement.classList.add('dialog-closing');
+            }
+            setTimeout(() => {
+                dialogRef.close();
+            }, 300);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogService, deps: [{ token: i1$3.Overlay }, { token: i0.Injector }, { token: i0.Injector }, { token: DEFAULT_DIALOG_CONFIG, optional: true }, { token: i1$3.OverlayContainer }, { token: DIALOG_SCROLL_STRATEGY }, { token: i1$2.Dialog, optional: true, skipSelf: true }, { token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogService, providedIn: 'root' }); }
@@ -2207,8 +2277,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class FwDialogConfirmComponent {
-    constructor(dialogRef) {
+    constructor(dialogRef, elementRef) {
         this.dialogRef = dialogRef;
+        this.elementRef = elementRef;
         this.title = 'Confirm';
         this.iconColor = 'primary';
         this.confirmColor = 'primary';
@@ -2220,20 +2291,56 @@ class FwDialogConfirmComponent {
         this.close = new EventEmitter();
         this.confirm = new EventEmitter();
         this.DialogWidth = DialogWidth;
+        this.isClosing = false;
+    }
+    get classes() {
+        const classes = {};
+        if (this.externalClasses) {
+            if (typeof this.externalClasses === 'string') {
+                this.externalClasses.split(' ').forEach((cls) => {
+                    if (cls.trim()) {
+                        classes[cls.trim()] = true;
+                    }
+                });
+            }
+            else if (Array.isArray(this.externalClasses)) {
+                this.externalClasses.forEach((cls) => {
+                    if (cls.trim()) {
+                        classes[cls.trim()] = true;
+                    }
+                });
+            }
+            else {
+                Object.assign(classes, this.externalClasses);
+            }
+        }
+        return classes;
+    }
+    get dialogClasses() {
+        return this.isClosing ? 'dialog-closing' : '';
     }
     handleCloseButton() {
-        this.dialogRef.close();
-        this.close.emit();
+        this.closeWithAnimation();
+    }
+    closeWithAnimation() {
+        if (this.isClosing) {
+            return;
+        }
+        this.isClosing = true;
+        setTimeout(() => {
+            this.dialogRef.close();
+            this.close.emit();
+        }, 300);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText" }, outputs: { close: "close", confirm: "confirm" }, ngImport: i0, template: "<fw-dialog\n  [width]=\"DialogWidth.ExtraSmall\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"false\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"confirmButtonIcon\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: [":host{box-sizing:border-box}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\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: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1$2.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n  [width]=\"DialogWidth.ExtraSmall\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"false\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"confirmButtonIcon\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\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: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n  [width]=\"DialogWidth.ExtraSmall\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"false\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"confirmButtonIcon\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: [":host{box-sizing:border-box}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
+            args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n  [width]=\"DialogWidth.ExtraSmall\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"false\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"confirmButtonIcon\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DialogRef, decorators: [{
                     type: Optional
-                }] }], propDecorators: { title: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { title: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -2253,10 +2360,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], contentText: [{
                 type: Input
+            }], externalClasses: [{
+                type: Input,
+                args: ['class']
             }], close: [{
                 type: Output
             }], confirm: [{
                 type: Output
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class FwDialogHeaderComponent {
@@ -2292,8 +2405,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class FwDialogSimpleComponent {
-    constructor(dialogRef) {
+    constructor(dialogRef, elementRef) {
         this.dialogRef = dialogRef;
+        this.elementRef = elementRef;
         this.width = DialogWidth.ExtraSmall;
         this.iconColor = 'primary';
         this.showClose = true;
@@ -2301,20 +2415,56 @@ class FwDialogSimpleComponent {
         this.close = new EventEmitter();
         this.action = new EventEmitter();
         this.alternateAction = new EventEmitter();
+        this.isClosing = false;
+    }
+    get classes() {
+        const classes = {};
+        if (this.externalClasses) {
+            if (typeof this.externalClasses === 'string') {
+                this.externalClasses.split(' ').forEach((cls) => {
+                    if (cls.trim()) {
+                        classes[cls.trim()] = true;
+                    }
+                });
+            }
+            else if (Array.isArray(this.externalClasses)) {
+                this.externalClasses.forEach((cls) => {
+                    if (cls.trim()) {
+                        classes[cls.trim()] = true;
+                    }
+                });
+            }
+            else {
+                Object.assign(classes, this.externalClasses);
+            }
+        }
+        return classes;
+    }
+    get dialogClasses() {
+        return this.isClosing ? 'dialog-closing' : '';
     }
     handleCloseButton() {
-        this.dialogRef.close();
-        this.close.emit();
+        this.closeWithAnimation();
+    }
+    closeWithAnimation() {
+        if (this.isClosing) {
+            return;
+        }
+        this.isClosing = true;
+        setTimeout(() => {
+            this.dialogRef.close();
+            this.close.emit();
+        }, 300);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogSimpleComponent, deps: [{ token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogSimpleComponent, selector: "fw-dialog-simple", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", actionButtonText: "actionButtonText", actionButtonIcon: "actionButtonIcon", cancelButtonText: "cancelButtonText", alternateButtonText: "alternateButtonText", alternateButtonIcon: "alternateButtonIcon", contentText: "contentText" }, outputs: { close: "close", action: "action", alternateAction: "alternateAction" }, ngImport: i0, template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\">\n  <fw-dialog-content>\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n    <p class=\"vision-p2 dialog-content-default\" *ngIf=\"contentText\">{{ contentText }}</p>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"alternateButtonText\"\n      [leftIcon]=\"alternateButtonIcon\"\n      (click)=\"alternateAction.emit()\">\n      {{ alternateButtonText }}\n    </fw-button>\n    <div class=\"flex\"></div>\n    <fw-button variant=\"outline\" *ngIf=\"cancelButtonText\" (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button variant=\"solid\" *ngIf=\"actionButtonText\" (click)=\"action.emit()\">\n      {{ actionButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: [":host{box-sizing:border-box}.dialog-content-default{padding:15px;margin:0;color:var(--typography-muted)}.flex{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogSimpleComponent, deps: [{ token: i1$2.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogSimpleComponent, selector: "fw-dialog-simple", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", actionButtonText: "actionButtonText", actionButtonIcon: "actionButtonIcon", cancelButtonText: "cancelButtonText", alternateButtonText: "alternateButtonText", alternateButtonIcon: "alternateButtonIcon", contentText: "contentText", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", action: "action", alternateAction: "alternateAction" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n    <p class=\"vision-p2 dialog-content-default\" *ngIf=\"contentText\">{{ contentText }}</p>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"alternateButtonText\"\n      [leftIcon]=\"alternateButtonIcon\"\n      (click)=\"alternateAction.emit()\">\n      {{ alternateButtonText }}\n    </fw-button>\n    <div class=\"flex\"></div>\n    <fw-button variant=\"outline\" *ngIf=\"cancelButtonText\" (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button variant=\"solid\" *ngIf=\"actionButtonText\" (click)=\"action.emit()\">\n      {{ actionButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}.dialog-content-default{padding:15px;margin:0;color:var(--typography-muted)}.flex{flex:1}\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: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogSimpleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-dialog-simple', template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\">\n  <fw-dialog-content>\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n    <p class=\"vision-p2 dialog-content-default\" *ngIf=\"contentText\">{{ contentText }}</p>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"alternateButtonText\"\n      [leftIcon]=\"alternateButtonIcon\"\n      (click)=\"alternateAction.emit()\">\n      {{ alternateButtonText }}\n    </fw-button>\n    <div class=\"flex\"></div>\n    <fw-button variant=\"outline\" *ngIf=\"cancelButtonText\" (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button variant=\"solid\" *ngIf=\"actionButtonText\" (click)=\"action.emit()\">\n      {{ actionButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: [":host{box-sizing:border-box}.dialog-content-default{padding:15px;margin:0;color:var(--typography-muted)}.flex{flex:1}\n"] }]
+            args: [{ selector: 'fw-dialog-simple', template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <ng-content select=\"fw-dialog-content\"></ng-content>\n    <p class=\"vision-p2 dialog-content-default\" *ngIf=\"contentText\">{{ contentText }}</p>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"alternateButtonText\"\n      [leftIcon]=\"alternateButtonIcon\"\n      (click)=\"alternateAction.emit()\">\n      {{ alternateButtonText }}\n    </fw-button>\n    <div class=\"flex\"></div>\n    <fw-button variant=\"outline\" *ngIf=\"cancelButtonText\" (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button variant=\"solid\" *ngIf=\"actionButtonText\" (click)=\"action.emit()\">\n      {{ actionButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}.dialog-content-default{padding:15px;margin:0;color:var(--typography-muted)}.flex{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DialogRef, decorators: [{
                     type: Optional
-                }] }], propDecorators: { width: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { width: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -2336,12 +2486,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], contentText: [{
                 type: Input
+            }], externalClasses: [{
+                type: Input,
+                args: ['class']
             }], close: [{
                 type: Output
             }], action: [{
                 type: Output
             }], alternateAction: [{
                 type: Output
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class TranslationService {
@@ -2650,6 +2806,7 @@ const allIcons = [
     'ai',
     'apple',
     'apply-copy-duplicate',
+    'archive-documents-box-big',
     'arrange-filter-sort',
     'arrow-annotate',
     'arrow-back-collapse',
@@ -2714,11 +2871,14 @@ const allIcons = [
     'color-ven-design-profile-central',
     'column-edit',
     'computer-chip',
+    'contract-vertical',
     'contrast-photo-edit',
+    'conversion-exchange',
     'copy-item',
     'creative-commons',
     'crosshair',
     'crown-style-circle',
+    'cursor-click',
     'cursor-select',
     'curve-object-secet-cursor',
     'data-tree',
@@ -2727,6 +2887,7 @@ const allIcons = [
     'document-file-add-plus-bottom-left',
     'document-file-blank',
     'document-file-checkmark-bottom-left',
+    'document-file-deleted-cross-remove-center-cancel',
     'document-file-download',
     'document-file-list-protocol',
     'document-file-tar',
@@ -2734,6 +2895,7 @@ const allIcons = [
     'document-file-zip',
     'document-status-done-checkmark',
     'document-visible',
+    'documents-file-checkmark',
     'documents-file',
     'documents-files',
     'done-check-tracked',
@@ -2753,6 +2915,7 @@ const allIcons = [
     'expand-pathfinder-dot-square-segmentation',
     'facebook',
     'file-blank-image-load-mask',
+    'file-blank-search',
     'file-download',
     'file-text',
     'files-library-content',
@@ -2780,10 +2943,16 @@ const allIcons = [
     'free-rights',
     'freehand-vector-poly',
     'full-screen-zoom',
+    'git-add-branch',
+    'git-branch',
+    'git-merge-draft',
+    'git-merge',
+    'git-pull-request-2',
     'github-color-login',
     'gitlab',
     'graduate-hat',
     'grid-dot-square',
+    'grid-layout-9-square',
     'grid-layout',
     'hammer-legal-square',
     'hammer-screwdriver',
@@ -2920,6 +3089,7 @@ const allIcons = [
     'stars-light-sparkle',
     'stomach',
     'stop-minus',
+    'stretch-vertical',
     'substract-group',
     'switch',
     'target-space-object-select',
@@ -3965,6 +4135,23 @@ class FwPopoverComponent {
             return delayMap$1[this.delay()];
         });
         this.showCaret = input(true);
+        this.activePositionPair = signal(null);
+        // for mapping from the connectionPairs to a named position
+        this.panelPosition = computed(() => {
+            const currentPosition = this.activePositionPair()?.connectionPair;
+            if (!currentPosition) {
+                return this.position;
+            }
+            const positionNames = Object.keys(this.positionMap);
+            const activePositionName = positionNames.find(positionName => {
+                const pos = this.positionMap[positionName];
+                return pos.originX === currentPosition.originX &&
+                    pos.originY === currentPosition.originY &&
+                    pos.overlayX === currentPosition.overlayX &&
+                    pos.overlayY === currentPosition.overlayY;
+            });
+            return (activePositionName || this.position);
+        });
         this.positionMap = {
             'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
             'above-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 40 },
@@ -3979,6 +4166,36 @@ class FwPopoverComponent {
             'right-above': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 37 },
             'right-below': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -40 },
         };
+        /**
+         * Gets a list of fallback positions for the selected one
+         * Preserves the primary axis i.e. which side of the origin the panel is on
+         */
+        this.getFallbackPositions = () => {
+            const positionSplitRegex = /(?<primary>[a-z]\w+)-*(?<secondary>[a-z]\w+)*/;
+            const { primary, secondary } = positionSplitRegex.exec(this.position).groups;
+            // '' represents a primary axis with no secondary i.e. 'above'
+            // fallbacks if no secondary position
+            const primaryAxisToFallbacks = {
+                'left': ['', 'below', 'above'],
+                'right': ['', 'below', 'above'],
+                'above': ['', 'left', 'right'],
+                'below': ['', 'left', 'right'],
+            };
+            // preference order for fallbacks
+            const secondaryPositionFallbacks = {
+                'left': ['left', '', 'right'],
+                'right': ['right', '', 'left'],
+                'above': ['above', '', 'below'],
+                'below': ['below', '', 'above'],
+            };
+            const secondaryOptions = secondaryPositionFallbacks[secondary] || primaryAxisToFallbacks[primary];
+            const positionArray = secondaryOptions.map(secondaryOption => {
+                const addDash = secondaryOption ? '-' : '';
+                const parsedOptionName = primary + addDash + secondaryOption;
+                return this.positionMap[parsedOptionName];
+            });
+            return positionArray;
+        };
         this.registerEventListeners = effect(() => {
             const trigger = this.trigger();
             if (!this.trigger) {
@@ -4023,7 +4240,7 @@ class FwPopoverComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwPopoverComponent, selector: "fw-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, flyoutPanel: { classPropertyName: "flyoutPanel", publicName: "flyoutPanel", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel\n    @fadeInFadeOut\n    [position]=\"position\"\n    (mouseLeave)=\"handlePanelLeave()\"\n    [showCaret]=\"showCaret()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: ["position", "showCaret"], outputs: ["mouseLeave"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwPopoverComponent, selector: "fw-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, flyoutPanel: { classPropertyName: "flyoutPanel", publicName: "flyoutPanel", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositionStrategy]=\"\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"getFallbackPositions()\"\n  [cdkConnectedOverlayViewportMargin]=\"10\"\n  (positionChange)=\"activePositionPair.set($event)\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel\n    @fadeInFadeOut\n    [position]=\"panelPosition()\"\n    (mouseLeave)=\"handlePanelLeave()\"\n    [showCaret]=\"showCaret()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: ["position", "showCaret"], outputs: ["mouseLeave"] }], animations: [
             trigger('fadeInFadeOut', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -4047,7 +4264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 animate('200ms', style({ opacity: 0 })),
                             ]),
                         ]),
-                    ], template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel\n    @fadeInFadeOut\n    [position]=\"position\"\n    (mouseLeave)=\"handlePanelLeave()\"\n    [showCaret]=\"showCaret()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n" }]
+                    ], template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositionStrategy]=\"\"\n  [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayPositions]=\"getFallbackPositions()\"\n  [cdkConnectedOverlayViewportMargin]=\"10\"\n  (positionChange)=\"activePositionPair.set($event)\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"backdropClick()\">\n  <fw-popover-panel\n    @fadeInFadeOut\n    [position]=\"panelPosition()\"\n    (mouseLeave)=\"handlePanelLeave()\"\n    [showCaret]=\"showCaret()\">\n    <ng-content></ng-content>\n  </fw-popover-panel>\n</ng-template>\n" }]
         }], propDecorators: { position: [{
                 type: Input
             }], action: [{
@@ -4174,7 +4391,7 @@ class FwTooltipComponent {
         this.isOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel\n    @fadeInFadeOut\n    *ngIf=\"title\"\n    [position]=\"position\"\n    [color]=\"color\"\n    [maxWidth]=\"maxWidth\">\n    <h5 class=\"vision-h5\">{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n<div\n  [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"handleMouseEnter($event)\" (mouseleave)=\"handleMouseLeave()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\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: "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", "cdkConnectedOverlayDisposeOnNavigation"], 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"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes", "attr.title": "this['']" } }, ngImport: i0, template: "<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n  <fw-tooltip-panel\n    @fadeInFadeOut\n    *ngIf=\"title\"\n    [position]=\"position\"\n    [color]=\"color\"\n    [maxWidth]=\"maxWidth\">\n    <h5 class=\"vision-h5\">{{ title }}</h5>\n  </fw-tooltip-panel>\n</ng-template>\n<div\n  [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n  cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"handleMouseEnter($event)\" (mouseleave)=\"handleMouseLeave()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\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: "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", "cdkConnectedOverlayDisposeOnNavigation"], 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"] }], animations: [
             trigger('fadeInFadeOut', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -4216,6 +4433,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], classes: [{
                 type: HostBinding,
                 args: ['attr.class']
+            }], '': [{
+                type: HostBinding,
+                args: ['attr.title']
             }] } });
 
 class FwTooltipModule {
@@ -5191,6 +5411,7 @@ class FwMultiSelectMenuComponent {
         this.width = '200px';
         this.minHeight = '';
         this.maxHeight = '200px';
+        this.maxOptionsHeight = '400px';
         this.size = 'medium';
         this.menuFilter = viewChild(FwMenuContainerComponent);
         // need this for the template
@@ -5552,9 +5773,9 @@ class FwSelectMenuComponent {
         const currentOptions = changes.options?.currentValue;
         // if the options change check if the title we should be displaying has changed
         if (currentOptions && currentOptions !== changes.options?.previousValue) {
-            const selectedOption = currentOptions.find(item => item['value']?.toString() === this.selectValue);
+            const selectedOption = currentOptions.find(item => item[this.valueProperty]?.toString() === this.selectValue);
             if (selectedOption) {
-                this.selectTitle = selectedOption['title'];
+                this.selectTitle = selectedOption[this.titleProperty];
             }
         }
     }