@progressio_resources/gravity-design-system 3.5.6 → 3.6.0

package/fesm2022/progressio_resources-gravity-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Pipe, Injectable, EventEmitter, Output, ViewChild, HostListener, HostBinding, InjectionToken, Directive, Optional, Inject, NgModule, ChangeDetectionStrategy, inject, ContentChildren, ViewChildren } from '@angular/core';
+import { Component, Input, Pipe, Injectable, EventEmitter, Output, ViewChild, HostListener, HostBinding, InjectionToken, Directive, Optional, Inject, NgModule, ChangeDetectionStrategy, ContentChildren, ViewChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
@@ -7,7 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from 'angular-svg-icon';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
 import { Subject, BehaviorSubject, Subscription, combineLatest, timer } from 'rxjs';
 import * as i2 from '@angular/router';
 import { RouterLink } from '@angular/router';
@@ -5560,62 +5560,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['currentStep']
             }] } });
 
-class GravityFlyoutComponent {
-    constructor() {
-        this.title = '';
-        this.description = '';
-        this.mode = 'modal';
-        this.headerSelector = '';
-        this.offcanvasService = inject(NgbOffcanvas);
-    }
-    getHeaderHeight() {
-        const header = document.querySelector(this.headerSelector);
-        return header ? header.getBoundingClientRect().top : 0;
-    }
-    open(options) {
-        const isStandard = this.mode === 'standard';
-        if (isStandard) {
-            const h = this.getHeaderHeight();
-            document.documentElement.style.setProperty('--gravity-flyout-top', `${h}px`);
-        }
-        else {
-            document.documentElement.style.removeProperty('--gravity-flyout-top');
-        }
-        const merged = {
-            panelClass: isStandard ? 'flyout-standard' : 'flyout-full',
-            backdrop: !isStandard,
-            backdropClass: isStandard ? '' : 'fade',
-            ...options
-        };
-        const ref = this.offcanvasService.open(this.offcanvasContent, merged);
-        ref.result.finally(() => {
-            if (!isStandard) {
-                document.documentElement.style.removeProperty('--gravity-flyout-top');
-            }
-        });
-    }
-    dismiss() {
-        this.offcanvasService.dismiss();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityFlyoutComponent, selector: "gravity-flyout", inputs: { title: "title", description: "description", mode: "mode", headerSelector: "headerSelector" }, viewQueries: [{ propertyName: "offcanvasContent", first: true, predicate: ["offcanvasContent"], descendants: true }], ngImport: i0, template: "<ng-template #offcanvasContent>\n  <div class=\"gravity-flyout-container\">\n    <div class=\"flyout-header\">\n      <p class=\"hr-title md-bold\">{{ title }}</p>\n      <gravity-icon [iconName]=\"'unsuccess'\" [size]=\"'sm'\" (click)=\"dismiss()\"></gravity-icon>\n    </div>\n    <p *ngIf=\"description != ''\" class=\"hr-body sm-regular flyout-description\"> {{ description }}</p>\n\n    <div class=\"flyout-body\">\n      <ng-content select=\"[flyout-body]\"></ng-content>\n    </div>\n\n    <div class=\"flyout-actions\">\n      <ng-content select=\"[flyout-actions]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".gravity-flyout-container{height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.gravity-flyout-container .flyout-header{padding:0 var(--gravity-spacing-md);display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.gravity-flyout-container .flyout-description{padding:var(--gravity-spacing-xs) var(--gravity-spacing-md);width:100%}.gravity-flyout-container .flyout-body{width:100%;flex:1;overflow-y:auto;padding:var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-flyout-container .flyout-actions{width:100%}.gravity-flyout-container .flyout-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityFlyoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gravity-flyout', template: "<ng-template #offcanvasContent>\n  <div class=\"gravity-flyout-container\">\n    <div class=\"flyout-header\">\n      <p class=\"hr-title md-bold\">{{ title }}</p>\n      <gravity-icon [iconName]=\"'unsuccess'\" [size]=\"'sm'\" (click)=\"dismiss()\"></gravity-icon>\n    </div>\n    <p *ngIf=\"description != ''\" class=\"hr-body sm-regular flyout-description\"> {{ description }}</p>\n\n    <div class=\"flyout-body\">\n      <ng-content select=\"[flyout-body]\"></ng-content>\n    </div>\n\n    <div class=\"flyout-actions\">\n      <ng-content select=\"[flyout-actions]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".gravity-flyout-container{height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.gravity-flyout-container .flyout-header{padding:0 var(--gravity-spacing-md);display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.gravity-flyout-container .flyout-description{padding:var(--gravity-spacing-xs) var(--gravity-spacing-md);width:100%}.gravity-flyout-container .flyout-body{width:100%;flex:1;overflow-y:auto;padding:var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-flyout-container .flyout-actions{width:100%}.gravity-flyout-container .flyout-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"] }]
-        }], propDecorators: { offcanvasContent: [{
-                type: ViewChild,
-                args: ['offcanvasContent', { static: false }]
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], headerSelector: [{
-                type: Input
-            }] } });
-
 class GravityTextFieldNumberOnlyComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -6196,11 +6140,11 @@ class GravityCardButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: { label: "label", iconName: "iconName", fullWidth: "fullWidth", type: "type", state: "state", orientation: "orientation" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n    <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n         [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n        <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n                      [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ?  'lg-24' : 'xl-32'\">\n        </gravity-icon>\n        <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n    </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{height:69px;display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: { label: "label", iconName: "iconName", fullWidth: "fullWidth", type: "type", state: "state", orientation: "orientation" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n    <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n         [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n        <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n                      [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ?  'lg-24' : 'xl-32'\">\n        </gravity-icon>\n        <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n    </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{height:69px;display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;text-align:center;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCardButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-card-button', template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n    <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n         [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n        <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n                      [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ?  'lg-24' : 'xl-32'\">\n        </gravity-icon>\n        <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n    </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{height:69px;display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\n"] }]
+            args: [{ selector: 'gravity-card-button', template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n    <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n         [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n        <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n                      [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ?  'lg-24' : 'xl-32'\">\n        </gravity-icon>\n        <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n    </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{height:69px;display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;text-align:center;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], iconName: [{
@@ -7244,11 +7188,11 @@ class GravityDetailContainerComponent {
         observer.observe(el);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDetailContainerComponent, selector: "gravity-detail-container", inputs: { title: "title", description: "description", mode: "mode", type: "type", optionalHeight: "optionalHeight" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], ngImport: i0, template: "<div class=\"detail-container-backdrop\" *ngIf=\"type === 'flyout' && mode === 'modal'\" [class.open]=\"isOpen\"\n     (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{type}} {{mode}}\" [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\">\n  <div class=\"detail-header\">\n    <p [ngClass]=\"type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\">{{ title }}</p>\n    <gravity-icon-button [icon]=\"'unsuccess'\" [size]=\"'sm'\" (click)=\"dismiss()\" [supportText]=\"'Close'\"></gravity-icon-button>\n  </div>\n\n  <div class=\"overflow-container\" #containerRef>\n    <p *ngIf=\"description != '' && type === 'flyout'\"\n       class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n    <div class=\"detail-body\">\n      <ng-content select=\"[detail-body]\"></ng-content>\n    </div>\n  </div>\n\n  <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n    <ng-content select=\"[detail-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\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: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDetailContainerComponent, selector: "gravity-detail-container", inputs: { title: "title", description: "description", mode: "mode", type: "type", optionalHeight: "optionalHeight" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], ngImport: i0, template: "<div class=\"detail-container-backdrop\" *ngIf=\"type === 'flyout' && mode === 'modal'\" [class.open]=\"isOpen\"\n     (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{type}} {{mode}}\" [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\">\n  <div class=\"detail-header\">\n    <p [ngClass]=\"type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\">{{ title }}</p>\n    <gravity-icon-button [icon]=\"'unsuccess'\" [size]=\"'sm'\" (click)=\"dismiss()\" [supportText]=\"'Close'\"></gravity-icon-button>\n  </div>\n\n  <div class=\"overflow-container\" #containerRef>\n    <p *ngIf=\"description != '' && type === 'flyout'\"\n       class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n    <div class=\"detail-body\">\n      <ng-content select=\"[detail-body]\"></ng-content>\n    </div>\n  </div>\n\n  <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n    <ng-content select=\"[detail-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .overflow-container:not(:hover){scrollbar-width:none}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\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: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\" *ngIf=\"type === 'flyout' && mode === 'modal'\" [class.open]=\"isOpen\"\n     (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{type}} {{mode}}\" [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\">\n  <div class=\"detail-header\">\n    <p [ngClass]=\"type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\">{{ title }}</p>\n    <gravity-icon-button [icon]=\"'unsuccess'\" [size]=\"'sm'\" (click)=\"dismiss()\" [supportText]=\"'Close'\"></gravity-icon-button>\n  </div>\n\n  <div class=\"overflow-container\" #containerRef>\n    <p *ngIf=\"description != '' && type === 'flyout'\"\n       class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n    <div class=\"detail-body\">\n      <ng-content select=\"[detail-body]\"></ng-content>\n    </div>\n  </div>\n\n  <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n    <ng-content select=\"[detail-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"] }]
+            args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\" *ngIf=\"type === 'flyout' && mode === 'modal'\" [class.open]=\"isOpen\"\n     (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{type}} {{mode}}\" [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\">\n  <div class=\"detail-header\">\n    <p [ngClass]=\"type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\">{{ title }}</p>\n    <gravity-icon-button [icon]=\"'unsuccess'\" [size]=\"'sm'\" (click)=\"dismiss()\" [supportText]=\"'Close'\"></gravity-icon-button>\n  </div>\n\n  <div class=\"overflow-container\" #containerRef>\n    <p *ngIf=\"description != '' && type === 'flyout'\"\n       class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n    <div class=\"detail-body\">\n      <ng-content select=\"[detail-body]\"></ng-content>\n    </div>\n  </div>\n\n  <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n    <ng-content select=\"[detail-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .overflow-container:not(:hover){scrollbar-width:none}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -7464,7 +7408,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-//import {GravityMenuComponent} from './layout/gravity-menu/gravity-menu.component';
+class GravityMenuComponent {
+    constructor() {
+        this.items = [];
+        this.maxCardButtonsPerRow = 3;
+        this.size = 'xl';
+        this.closeMenu = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        const el = this.menuBody.nativeElement;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateOverflow();
+        });
+        this.resizeObserver.observe(el);
+        this.updateOverflow();
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    selectOption(option) {
+        this.selectedOption = option;
+    }
+    toggleHeader(header) {
+        if (header.headerOptions?.length > 0) {
+            header.collapsed = !header.collapsed;
+            setTimeout(() => this.updateOverflow(), 0);
+        }
+    }
+    updateOverflow() {
+        const el = this.menuBody.nativeElement;
+        const hasScroll = el.scrollHeight > el.clientHeight;
+        el.classList.toggle('has-scroll', hasScroll);
+    }
+    getCardButtonsRows() {
+        if (!this.cardButtons || !this.maxCardButtonsPerRow)
+            return [];
+        const rows = [];
+        for (let i = 0; i < this.cardButtons.length; i += this.maxCardButtonsPerRow) {
+            rows.push(this.cardButtons.slice(i, i + this.maxCardButtonsPerRow));
+        }
+        return rows;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMenuComponent, selector: "gravity-menu", inputs: { logoUrl: "logoUrl", userInfo: "userInfo", items: "items", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { closeMenu: "closeMenu" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-menu {{size}}\">\n  <div class=\"menu-logo\">\n    <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n    <gravity-icon *ngIf=\"size === 'md' || size === 'sm'\" [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n  </div>\n\n  <div class=\"menu-content\">\n    <section #menuBody class=\"menu-body\">\n      <div class=\"menu-section\">\n        <div class=\"levels\" *ngFor=\"let header of items\">\n          <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n                   [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n              <p class=\"hr-label sm-regular\">\n                <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n                {{header.text}}\n              </p>\n\n            <div class=\"toggle\">\n              <span *ngIf=\"header.badged\" class=\"badge\"></span>\n              <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n                            [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n            </div>\n          </section>\n\n          <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n            <div class=\"options-list\">\n              <ng-container *ngFor=\"let option of header.headerOptions\">\n                <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n                  <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') &&  option === selectedOption\"></div>\n                  <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n                        [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n                </div>\n              </ng-container>\n            </div>\n          </section>\n        </div>\n      </div>\n    </section>\n\n    <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n      <section class=\"footer-content\">\n        <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n          <div class=\"action\" *ngFor=\"let action of secondaryActions\">\n            <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n            <span class=\"hr-label sm-regular\">{{action.text}}</span>\n          </div>\n        </div>\n\n        <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n        <div *ngIf=\"userInfo\" class=\"user-info-list\">\n          <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n            <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n            <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n          </div>\n        </div>\n      </section>\n    </section>\n\n      <!-- - - - - - - - - - -  Mobile Resolutions - - - - - - - - - - -->\n\n    <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n      <section class=\"footer-content\">\n        <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n          <div class=\"card-buttons\">\n            <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n              <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n                                   [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n            </div>\n          </div>\n          <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n                          [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n        </div>\n        <div *ngIf=\"userInfo\" class=\"user-info-list\">\n          <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n            <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n            <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n          </div>\n        </div>\n      </section>\n    </section>\n  </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{min-width:577px;max-width:1099px;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: ["label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-menu', template: "<div class=\"gravity-menu {{size}}\">\n  <div class=\"menu-logo\">\n    <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n    <gravity-icon *ngIf=\"size === 'md' || size === 'sm'\" [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n  </div>\n\n  <div class=\"menu-content\">\n    <section #menuBody class=\"menu-body\">\n      <div class=\"menu-section\">\n        <div class=\"levels\" *ngFor=\"let header of items\">\n          <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n                   [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n              <p class=\"hr-label sm-regular\">\n                <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n                {{header.text}}\n              </p>\n\n            <div class=\"toggle\">\n              <span *ngIf=\"header.badged\" class=\"badge\"></span>\n              <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n                            [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n            </div>\n          </section>\n\n          <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n            <div class=\"options-list\">\n              <ng-container *ngFor=\"let option of header.headerOptions\">\n                <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n                  <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') &&  option === selectedOption\"></div>\n                  <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n                        [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n                </div>\n              </ng-container>\n            </div>\n          </section>\n        </div>\n      </div>\n    </section>\n\n    <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n      <section class=\"footer-content\">\n        <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n          <div class=\"action\" *ngFor=\"let action of secondaryActions\">\n            <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n            <span class=\"hr-label sm-regular\">{{action.text}}</span>\n          </div>\n        </div>\n\n        <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n        <div *ngIf=\"userInfo\" class=\"user-info-list\">\n          <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n            <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n            <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n          </div>\n        </div>\n      </section>\n    </section>\n\n      <!-- - - - - - - - - - -  Mobile Resolutions - - - - - - - - - - -->\n\n    <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n      <section class=\"footer-content\">\n        <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n          <div class=\"card-buttons\">\n            <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n              <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n                                   [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n            </div>\n          </div>\n          <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n                          [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n        </div>\n        <div *ngIf=\"userInfo\" class=\"user-info-list\">\n          <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n            <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n            <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n          </div>\n        </div>\n      </section>\n    </section>\n  </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{min-width:577px;max-width:1099px;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
+        }], propDecorators: { logoUrl: [{
+                type: Input
+            }], userInfo: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], cardButtons: [{
+                type: Input
+            }], maxCardButtonsPerRow: [{
+                type: Input
+            }], secondaryActions: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], mainFooterAction: [{
+                type: Input
+            }], closeMenu: [{
+                type: Output
+            }], menuBody: [{
+                type: ViewChild,
+                args: ['menuBody']
+            }] } });
+
 class GravityDesignSystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
@@ -7489,7 +7504,6 @@ class GravityDesignSystemModule {
             GravityNetworkPillComponent,
             GravityNotificationComponent,
             GravityNotificationInstantContainerComponent,
-            GravityFlyoutComponent,
             GravityRadioButtonComponent,
             GravityStatusIndicatorComponent,
             GravityStepperComponent,
@@ -7538,7 +7552,8 @@ class GravityDesignSystemModule {
             GravitySegmentedButtonComponent,
             GravityCurrencyDisplayV2Component,
             GravityHeaderComponent,
-            GravityPushNotificationsComponent], imports: [i1.AngularSvgIconModule, i2$3.AngularSvgIconPreloaderModule, BsDatepickerModule,
+            GravityPushNotificationsComponent,
+            GravityMenuComponent], imports: [i1.AngularSvgIconModule, i2$3.AngularSvgIconPreloaderModule, BsDatepickerModule,
             CommonModule,
             FormsModule, GravityTooltipModule, NgbDatepickerModule,
             NgbOffcanvasModule,
@@ -7567,7 +7582,6 @@ class GravityDesignSystemModule {
             GravityMultiLanguageComponent,
             GravityNetworkPillComponent,
             GravityNotificationInstantContainerComponent,
-            GravityFlyoutComponent,
             GravityRadioButtonComponent,
             GravityStatusIndicatorComponent,
             GravityStepperComponent,
@@ -7592,7 +7606,8 @@ class GravityDesignSystemModule {
             GravityCalendarNextComponent,
             GravitySegmentedButtonComponent,
             GravityHeaderComponent,
-            GravityPushNotificationsComponent] }); }
+            GravityPushNotificationsComponent,
+            GravityMenuComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
             AngularSvgIconPreloaderModule.forRoot({
                 configUrl: './assets/gravity/json/icons.json',
@@ -7633,7 +7648,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityNetworkPillComponent,
                         GravityNotificationComponent,
                         GravityNotificationInstantContainerComponent,
-                        GravityFlyoutComponent,
                         GravityRadioButtonComponent,
                         GravityStatusIndicatorComponent,
                         GravityStepperComponent,
@@ -7683,7 +7697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityCurrencyDisplayV2Component,
                         GravityHeaderComponent,
                         GravityPushNotificationsComponent,
-                        //GravityMenuComponent,
+                        GravityMenuComponent,
                     ],
                     imports: [
                         AngularSvgIconModule.forRoot(),
@@ -7724,7 +7738,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityMultiLanguageComponent,
                         GravityNetworkPillComponent,
                         GravityNotificationInstantContainerComponent,
-                        GravityFlyoutComponent,
                         GravityRadioButtonComponent,
                         GravityStatusIndicatorComponent,
                         GravityStepperComponent,
@@ -7750,7 +7763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravitySegmentedButtonComponent,
                         GravityHeaderComponent,
                         GravityPushNotificationsComponent,
-                        //GravityMenuComponent,
+                        GravityMenuComponent,
                     ]
                 }]
         }] });
@@ -7805,5 +7818,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityBackdropComponent, GravityButtonComponent, GravityCalendarComponent, GravityCalendarNextComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCardListComponent, GravityCheckboxComponent, GravityChipComponent, GravityChipGroupComponent, GravityCurrencyComponent, GravityCurrencyDisplayComponent, GravityCurrencyDisplayV2Component, GravityDataViewComponent, GravityDataViewsV2Component, GravityDesignSystemModule, GravityDetailContainerComponent, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityFlyoutComponent, GravityGenericAvatarComponent, GravityGenericAvatarSecondaryComponent, GravityHeaderComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityPushNotificationsComponent, GravityRadioButtonComponent, GravitySegmentedButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTablesV2Component, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
+export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityBackdropComponent, GravityButtonComponent, GravityCalendarComponent, GravityCalendarNextComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCardListComponent, GravityCheckboxComponent, GravityChipComponent, GravityChipGroupComponent, GravityCurrencyComponent, GravityCurrencyDisplayComponent, GravityCurrencyDisplayV2Component, GravityDataViewComponent, GravityDataViewsV2Component, GravityDesignSystemModule, GravityDetailContainerComponent, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityGenericAvatarSecondaryComponent, GravityHeaderComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityMenuComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityPushNotificationsComponent, GravityRadioButtonComponent, GravitySegmentedButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTablesV2Component, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map