@progressio_resources/gravity-design-system 3.6.18 → 3.6.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/layout/gravity-header/gravity-header.component.mjs +3 -3
- package/esm2022/lib/layout/gravity-menu/gravity-menu.component.mjs +6 -3
- package/fesm2022/progressio_resources-gravity-design-system.mjs +7 -4
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/layout/gravity-menu/gravity-menu.component.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/assets/json/icons.json +24 -0
|
@@ -7643,11 +7643,11 @@ class GravityHeaderComponent {
|
|
|
7643
7643
|
return this.resolution === 'xs' || this.resolution === 'sm' || this.resolution === 'md';
|
|
7644
7644
|
}
|
|
7645
7645
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityHeaderComponent, selector: "gravity-header", inputs: { title: "title", logoUrl: "logoUrl", longTitle: "longTitle", backButton: "backButton", breadCrumb: "breadCrumb", language: "language", notifications: "notifications", resolution: "resolution", userNotifications: "userNotifications", isMenuOpen: "isMenuOpen" }, outputs: { backButtonResponse: "backButtonResponse", toggleMenuResponse: "toggleMenuResponse", viewedNotificationsResponse: "viewedNotificationsResponse" }, ngImport: i0, template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl' )\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && !isMobile() && breadCrumb?.list?.length < 1\"
|
|
7646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityHeaderComponent, selector: "gravity-header", inputs: { title: "title", logoUrl: "logoUrl", longTitle: "longTitle", backButton: "backButton", breadCrumb: "breadCrumb", language: "language", notifications: "notifications", resolution: "resolution", userNotifications: "userNotifications", isMenuOpen: "isMenuOpen" }, outputs: { backButtonResponse: "backButtonResponse", toggleMenuResponse: "toggleMenuResponse", viewedNotificationsResponse: "viewedNotificationsResponse" }, ngImport: i0, template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl' )\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1\"\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n\n <h1 *ngIf=\"isMobile() && backButton\" [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n <gravity-push-notifications *ngIf=\"(notifications && !isMobile()) || (notifications && isMobile() && !backButton)\"\n [userNotifications]=\"userNotifications\" (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n\n <gravity-icon *ngIf=\"isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n </div>\n </section>\n\n <section *ngIf=\"!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title\" class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n\n <section *ngIf=\"isMobile() && logoUrl && !backButton && title\" class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n </section>\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\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: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: ["userNotifications"], outputs: ["viewedNotificationsResponse"] }] }); }
|
|
7647
7647
|
}
|
|
7648
7648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityHeaderComponent, decorators: [{
|
|
7649
7649
|
type: Component,
|
|
7650
|
-
args: [{ selector: 'gravity-header', template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl' )\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && !isMobile() && breadCrumb?.list?.length < 1\"
|
|
7650
|
+
args: [{ selector: 'gravity-header', template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl' )\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1\"\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n\n <h1 *ngIf=\"isMobile() && backButton\" [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n <gravity-push-notifications *ngIf=\"(notifications && !isMobile()) || (notifications && isMobile() && !backButton)\"\n [userNotifications]=\"userNotifications\" (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n\n <gravity-icon *ngIf=\"isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n </div>\n </section>\n\n <section *ngIf=\"!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title\" class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n\n <section *ngIf=\"isMobile() && logoUrl && !backButton && title\" class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n </section>\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\n"] }]
|
|
7651
7651
|
}], propDecorators: { title: [{
|
|
7652
7652
|
type: Input
|
|
7653
7653
|
}], logoUrl: [{
|
|
@@ -7685,6 +7685,7 @@ class GravityMenuComponent {
|
|
|
7685
7685
|
this.mainFooterAction = null;
|
|
7686
7686
|
this.close = new EventEmitter();
|
|
7687
7687
|
this.selected = new EventEmitter();
|
|
7688
|
+
this.closing = false;
|
|
7688
7689
|
}
|
|
7689
7690
|
ngAfterViewInit() {
|
|
7690
7691
|
const el = this.menuBody.nativeElement;
|
|
@@ -7705,6 +7706,8 @@ class GravityMenuComponent {
|
|
|
7705
7706
|
}
|
|
7706
7707
|
closeMenu() {
|
|
7707
7708
|
this.close.emit();
|
|
7709
|
+
this.closing = true;
|
|
7710
|
+
setTimeout(() => { this.closing = false; }, 100);
|
|
7708
7711
|
}
|
|
7709
7712
|
toggleMenuHeader(header) {
|
|
7710
7713
|
if (header.headerOptions?.length > 0) {
|
|
@@ -7731,11 +7734,11 @@ class GravityMenuComponent {
|
|
|
7731
7734
|
return rows;
|
|
7732
7735
|
}
|
|
7733
7736
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7734
|
-
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", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n [iconSize]=\"'md-16'\" [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]=\"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\" (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%;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 26px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:70px;height:28px}.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{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transform:translate(101%);transition:transform .165s ease-in-out;background-color:var(--bg-menu-mobile-primary)}.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.md.open,.gravity-menu.sm.open{transform:translate(0)}.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.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"] }] }); }
|
|
7737
|
+
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", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: 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{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{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"] }] }); }
|
|
7735
7738
|
}
|
|
7736
7739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, decorators: [{
|
|
7737
7740
|
type: Component,
|
|
7738
|
-
args: [{ selector: 'gravity-menu', template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n [iconSize]=\"'md-16'\" [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]=\"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\" (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%;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 26px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:70px;height:28px}.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{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transform:translate(101%);transition:transform .165s ease-in-out;background-color:var(--bg-menu-mobile-primary)}.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.md.open,.gravity-menu.sm.open{transform:translate(0)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
7741
|
+
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{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{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"] }]
|
|
7739
7742
|
}], propDecorators: { logoUrl: [{
|
|
7740
7743
|
type: Input
|
|
7741
7744
|
}], items: [{
|