@progressio_resources/gravity-design-system 3.7.1 → 3.7.2

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

@@ -7707,8 +7707,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class GravityMenuComponent {
-    constructor() {
+    constructor(elRef, renderer) {
+        this.elRef = elRef;
+        this.renderer = renderer;
         this.isOpen = false;
+        this.collapsable = false;
         this.showCloseButton = true;
         this.maxCardButtonsPerRow = 3;
         this.currentLink = null;
@@ -7716,18 +7719,38 @@ class GravityMenuComponent {
         this.mainFooterAction = null;
         this.close = new EventEmitter();
         this.selected = new EventEmitter();
+        this.collapsed = new EventEmitter();
         this.closing = false;
+        this.scrollPosition = 0;
+        this.collapsedMode = false;
+        this.visibleSubMenu = false;
+        this.selectedOption = null;
     }
     ngOnChanges(changes) {
         if (changes['currentLink'] && this.currentLink != null && this.items?.length) {
             this.preselectOptionByLink(this.currentLink);
         }
+        if (changes['size']) {
+            this.handleSizeChange(changes['size'].currentValue);
+        }
     }
     ngAfterViewInit() {
         const el = this.menuBody.nativeElement;
         this.resizeObserver = new ResizeObserver(() => {
             this.updateOverflow();
         });
+        if (this.menuBody) {
+            this.menuBody.nativeElement.addEventListener('scroll', () => {
+                this.scrollPosition = this.menuBody.nativeElement.scrollTop;
+            });
+        }
+        this.clickOutsideListener = this.renderer.listen('document', 'click', (event) => {
+            const menuElement = this.elRef.nativeElement;
+            if (!menuElement.contains(event.target) && this.collapsedMode) {
+                this.visibleSubMenu = false;
+                this.toggleAllHeaders(true);
+            }
+        });
         this.resizeObserver.observe(el);
         this.updateOverflow();
     }
@@ -7735,6 +7758,9 @@ class GravityMenuComponent {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
+        if (this.clickOutsideListener) {
+            this.clickOutsideListener();
+        }
     }
     preselectOptionByLink(link) {
         for (const header of this.items ?? []) {
@@ -7750,30 +7776,66 @@ class GravityMenuComponent {
                 return;
             }
         }
+        if (this.collapsedMode) {
+            this.toggleAllHeaders(true);
+        }
+    }
+    handleSizeChange(size) {
+        if (size === 'sm' || size === 'md') {
+            if (this.collapsedMode) {
+                this.collapsedMode = false;
+                this.visibleSubMenu = false;
+                this.toggleAllHeaders(true);
+            }
+        }
+        else {
+            if (!this.collapsedMode) {
+                this.toggleAllHeaders(false);
+            }
+        }
     }
-    selectOption(option) {
+    selectOption(option, header) {
         this.selectedOption = option;
         this.selected.emit(option.link);
+        if (this.collapsedMode && header) {
+            this.visibleSubMenu = false;
+            setTimeout(() => { header.collapsed = true; }, 0);
+        }
     }
     closeMenu() {
         this.close.emit();
         this.closing = true;
         setTimeout(() => { this.closing = false; }, 100);
     }
-    toggleMenuHeader(header) {
-        if (header.headerOptions?.length > 0) {
-            header.collapsed = !header.collapsed;
-            setTimeout(() => this.updateOverflow(), 0);
+    toggleMenuHeader(header, index) {
+        if (!header.headerOptions || header.headerOptions.length === 0) {
+            this.selectedOption = null;
+            if (this.collapsedMode) {
+                this.toggleAllHeaders(true);
+            }
+        }
+        if (!header.headerOptions?.length)
+            return;
+        if (this.collapsedMode) {
+            if (!header.collapsed) {
+                header.collapsed = true;
+                this.visibleSubMenu = false;
+            }
+            else {
+                this.toggleAllHeaders(true);
+                header.collapsed = false;
+                this.visibleSubMenu = true;
+            }
+            this.adjustScrollOnGrow(index);
         }
         else {
-            this.selectedOption = null;
-            this.selected.emit('');
+            header.collapsed = !header.collapsed;
         }
     }
-    updateOverflow() {
-        const el = this.menuBody.nativeElement;
-        const hasScroll = el.scrollHeight > el.clientHeight;
-        el.classList.toggle('has-scroll', hasScroll);
+    isHeaderSelected(header) {
+        if (!header.headerOptions?.length)
+            return false;
+        return header.headerOptions.some(option => option === this.selectedOption);
     }
     getCardButtonsRows() {
         if (!this.cardButtons || !this.maxCardButtonsPerRow)
@@ -7784,20 +7846,53 @@ class GravityMenuComponent {
         }
         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", items: "items", userInfo: "userInfo", isOpen: "isOpen", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\">\n  <div class=\"menu-logo\">\n    <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n    <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n                  [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\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)=\"toggleMenuHeader(header)\">\n              <p class=\"hr-label sm-regular\">\n                <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"'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 [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n                        [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n                        [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">\n                    {{option.text}}\n                  </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\" (click)=\"action.callback()\">\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                                   (clicked)=\"button.callback(); selected.emit()\" [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%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:60px;height:24px;display:flex}.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 12px 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-xs)}.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: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);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px 0 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;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{width:100%;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:100%;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{width:246px}.gravity-menu.lg .menu-content .menu-footer .footer-content{width:214px}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{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%;min-width:auto}.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}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }] }); }
+    collapseMenu() {
+        this.collapsedMode = !this.collapsedMode;
+        this.toggleAllHeaders(this.collapsedMode);
+        if (this.collapsedMode) {
+            this.visibleSubMenu = false;
+        }
+        this.collapsed.emit(this.collapsedMode);
+    }
+    hasOptionBadge(header) {
+        return !!header.headerOptions?.some(option => typeof option.badge_text === 'string' && option.badge_text.trim().length > 0);
+    }
+    updateOverflow() {
+        const el = this.menuBody.nativeElement;
+        const hasScroll = el.scrollHeight > el.clientHeight;
+        el.classList.toggle('has-scroll', hasScroll);
+    }
+    toggleAllHeaders(collapsed) {
+        if (!this.items?.length)
+            return;
+        for (const header of this.items) {
+            if (header.headerOptions?.length) {
+                header.collapsed = collapsed;
+            }
+        }
+    }
+    adjustScrollOnGrow(index) {
+        const el = this.menuBody?.nativeElement;
+        if (!el)
+            return;
+        el.scrollTo({ top: 62 * index, behavior: 'auto' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMenuComponent, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", isOpen: "isOpen", collapsable: "collapsable", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\"  [class.closing]=\"closing\"\n     [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n  <div class=\"menu-header\">\n    <svg-icon *ngIf=\"logoUrl?.main_logo_url\"\n              [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\" />\n\n    <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n                  [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n\n    <div *ngIf=\"collapsable && (size === 'xl' || size === 'lg')\" class=\"collapse-button\" (click)=\"collapseMenu()\">\n      <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n                    [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n    </div>\n  </div>\n\n  <div class=\"menu-content\">\n    <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n      <div class=\"menu-section\">\n        <div class=\"levels\" *ngFor=\"let header of items; let i = index\">\n          <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n            [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n            [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n            [class.blocked]=\"visibleSubMenu && (header.collapsed || header.headerOptions?.length < 1)\"\n            [style.--expanded-margin]=\"i === (items.length - 1) ? (40 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n\n            <p class=\"hr-label sm-regular\">\n              <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\"\n                *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n              {{header.text}}\n            </p>\n\n            <div class=\"toggle\" [class.disabled]=\"visibleSubMenu\">\n              <span *ngIf=\"hasOptionBadge(header) && (size === 'xl' || size === 'lg')\" class=\"badge-indicator\"></span>\n              <gravity-icon *ngIf=\"header.headerOptions?.length > 0 && !collapsedMode\" [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\"\n                   [@fadeSlide] [style.--submenu-offset]=\"((146 - scrollPosition) + (68 * i)) + 'px'\"\n                   [ngClass]=\"collapsedMode ? 'elevation-xs'  : ''\">\n\n            <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\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                  <div class=\"option-text\" [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n                        [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n                        [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n                    {{option.text}}\n                    <div *ngIf=\"option.badge_text && (size === 'xl' || size === 'lg')\" class=\"badge\">\n                      <span class=\"hr-body sm-regular\">{{ option.badge_text }}</span>\n                    </div>\n                  </div>\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\" (click)=\"action.callback()\">\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 *ngIf=\"!collapsedMode\" 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                                   (clicked)=\"button.callback(); selected.emit()\" [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%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.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 12px 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.sub-menu:hover{margin-right:8px!important}.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-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.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.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.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-indicator{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: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 .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text: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 .option-text.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 .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.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);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px 0 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;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{width:100%;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:100%;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.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:60px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level.blocked{pointer-events:none;--option-icon-color: var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level.blocked p{color:var(--option-icon-color)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{display:flex;text-align:center;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level .toggle{top:8px;right:8px;position:absolute}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level .toggle.disabled .badge-indicator{background-color:var(--option-icon-color)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{z-index:1;min-width:220px;position:absolute;width:max-content;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{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;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 .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.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%;min-width:auto}.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}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: ["cypressTag", "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}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\">\n  <div class=\"menu-logo\">\n    <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n    <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n                  [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\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)=\"toggleMenuHeader(header)\">\n              <p class=\"hr-label sm-regular\">\n                <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"'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 [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n                        [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n                        [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">\n                    {{option.text}}\n                  </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\" (click)=\"action.callback()\">\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                                   (clicked)=\"button.callback(); selected.emit()\" [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%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:60px;height:24px;display:flex}.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 12px 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-xs)}.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: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);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px 0 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;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{width:100%;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:100%;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{width:246px}.gravity-menu.lg .menu-content .menu-footer .footer-content{width:214px}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{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%;min-width:auto}.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}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
-        }], propDecorators: { logoUrl: [{
-                type: Input
-            }], items: [{
+            args: [{ selector: 'gravity-menu', template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\"  [class.closing]=\"closing\"\n     [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n  <div class=\"menu-header\">\n    <svg-icon *ngIf=\"logoUrl?.main_logo_url\"\n              [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\" />\n\n    <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n                  [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n\n    <div *ngIf=\"collapsable && (size === 'xl' || size === 'lg')\" class=\"collapse-button\" (click)=\"collapseMenu()\">\n      <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n                    [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n    </div>\n  </div>\n\n  <div class=\"menu-content\">\n    <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n      <div class=\"menu-section\">\n        <div class=\"levels\" *ngFor=\"let header of items; let i = index\">\n          <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n            [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n            [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n            [class.blocked]=\"visibleSubMenu && (header.collapsed || header.headerOptions?.length < 1)\"\n            [style.--expanded-margin]=\"i === (items.length - 1) ? (40 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n\n            <p class=\"hr-label sm-regular\">\n              <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\"\n                *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n              {{header.text}}\n            </p>\n\n            <div class=\"toggle\" [class.disabled]=\"visibleSubMenu\">\n              <span *ngIf=\"hasOptionBadge(header) && (size === 'xl' || size === 'lg')\" class=\"badge-indicator\"></span>\n              <gravity-icon *ngIf=\"header.headerOptions?.length > 0 && !collapsedMode\" [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\"\n                   [@fadeSlide] [style.--submenu-offset]=\"((146 - scrollPosition) + (68 * i)) + 'px'\"\n                   [ngClass]=\"collapsedMode ? 'elevation-xs'  : ''\">\n\n            <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\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                  <div class=\"option-text\" [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n                        [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n                        [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n                    {{option.text}}\n                    <div *ngIf=\"option.badge_text && (size === 'xl' || size === 'lg')\" class=\"badge\">\n                      <span class=\"hr-body sm-regular\">{{ option.badge_text }}</span>\n                    </div>\n                  </div>\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\" (click)=\"action.callback()\">\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 *ngIf=\"!collapsedMode\" 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                                   (clicked)=\"button.callback(); selected.emit()\" [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%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.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 12px 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.sub-menu:hover{margin-right:8px!important}.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-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.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.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.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-indicator{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: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 .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text: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 .option-text.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 .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.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);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px 0 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;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{width:100%;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:100%;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.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:60px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level.blocked{pointer-events:none;--option-icon-color: var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level.blocked p{color:var(--option-icon-color)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{display:flex;text-align:center;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level .toggle{top:8px;right:8px;position:absolute}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level .toggle.disabled .badge-indicator{background-color:var(--option-icon-color)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{z-index:1;min-width:220px;position:absolute;width:max-content;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{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;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 .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.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%;min-width:auto}.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}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
                 type: Input
             }], userInfo: [{
                 type: Input
+            }], logoUrl: [{
+                type: Input
             }], isOpen: [{
                 type: Input
+            }], collapsable: [{
+                type: Input
             }], showCloseButton: [{
                 type: Input
             }], cardButtons: [{
@@ -7816,6 +7911,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], selected: [{
                 type: Output
+            }], collapsed: [{
+                type: Output
             }], menuBody: [{
                 type: ViewChild,
                 args: ['menuBody', { static: false }]