@progressio_resources/gravity-design-system 4.1.10 → 4.1.12
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.
|
@@ -6170,6 +6170,7 @@ class GravityAvatarStackComponent {
|
|
|
6170
6170
|
this.touchStartIndex = 0;
|
|
6171
6171
|
this.isTouchActive = false;
|
|
6172
6172
|
this.emitDebounceTimer = null;
|
|
6173
|
+
this.touchedItemIndex = null;
|
|
6173
6174
|
}
|
|
6174
6175
|
ngOnDestroy() {
|
|
6175
6176
|
if (this.emitDebounceTimer) {
|
|
@@ -6266,6 +6267,9 @@ class GravityAvatarStackComponent {
|
|
|
6266
6267
|
this.selectItem(((this.selectedIndex - 1) % this.items.length + this.items.length) % this.items.length);
|
|
6267
6268
|
}
|
|
6268
6269
|
}
|
|
6270
|
+
onItemTouchStart(index) {
|
|
6271
|
+
this.touchedItemIndex = index;
|
|
6272
|
+
}
|
|
6269
6273
|
// Mobile Touch Swipe gesture handling
|
|
6270
6274
|
onTouchStart(event) {
|
|
6271
6275
|
if (event.touches?.length) {
|
|
@@ -6291,15 +6295,19 @@ class GravityAvatarStackComponent {
|
|
|
6291
6295
|
}
|
|
6292
6296
|
}
|
|
6293
6297
|
onTouchEnd() {
|
|
6298
|
+
if (!this.isDragging && this.touchedItemIndex !== null) {
|
|
6299
|
+
this.selectItem(this.touchedItemIndex, true);
|
|
6300
|
+
}
|
|
6294
6301
|
this.isTouchActive = false;
|
|
6302
|
+
this.touchedItemIndex = null;
|
|
6295
6303
|
setTimeout(() => { this.isDragging = false; }, 50);
|
|
6296
6304
|
}
|
|
6297
6305
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6298
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityAvatarStackComponent, isStandalone: true, selector: "gravity-avatar-stack", inputs: { items: "items", type: "type", maxDisplayedItems: "maxDisplayedItems", selectedIndex: "selectedIndex", carouselMaxItems: "carouselMaxItems", size: "size", config: "config", selectionMode: "selectionMode" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "@if (isCarousel) {\n <div class=\"avatar-stack-carousel\">\n <gravity-icon-button [icon]=\"'arrow-left'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectPrevious()\"/>\n <div class=\"stack-icon-container\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd()\">\n @for (visibleItem of carouselItems; track visibleItem.actualIndex) {\n <div class=\"icon-wrapper {{ visibleItem.size }}\" role=\"button\" tabindex=\"0\"\n [class.selected]=\"visibleItem.isSelected\" (click)=\"onItemClick(visibleItem.actualIndex)\">\n <gravity-icon class=\"avatar-icon {{ visibleItem.size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(visibleItem.item)\"\n [iconName]=\"getIconName(visibleItem.item)\">\n </gravity-icon>\n @if (visibleItem.isSelected && getItemLabel(visibleItem.item)) {\n <p class=\"hr-body sm-regular avatar-label\"> {{ getItemLabel(visibleItem.item) }}</p>\n }\n </div>\n }\n </div>\n <gravity-icon-button [icon]=\"'arrow-right'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectNext()\"/>\n </div>\n} @else {\n <div class=\"avatar-stack-standard\">\n <div class=\"stack-icon-container\">\n @for (item of stackDisplayedItems; track item; let i = $index) {\n <div class=\"icon-wrapper\" role=\"button\" tabindex=\"0\"\n [class.selected]=\"isItemSelected(i)\" (click)=\"onItemClick(i)\">\n <gravity-icon class=\"avatar-icon {{ size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(item)\"\n [iconName]=\"getIconName(item)\">\n </gravity-icon>\n @if (getItemLabel(item) && selectionMode !== 'none') {\n <p class=\"hr-body sm-regular avatar-label\">{{ getItemLabel(item) }}</p>\n }\n </div>\n }\n @if (maxDisplayedItems && maxDisplayedItems < items.length) {\n <span class=\"hr-label sm-bold max-displayed\">+{{ items.length - maxDisplayedItems }}</span>\n }\n </div>\n </div>\n}", styles: ["body{font-style:normal;line-height:normal;font-optical-sizing:auto;color:var(--text-primary);font-family:Roboto Flex,sans-serif}.hr-body{font-family:Roboto Flex,sans-serif}.hr-body.sm-regular{font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.sm-bold{font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.md-regular{font-weight:380;line-height:1.567rem;letter-spacing:.03rem;font-size:1rem}.hr-body.md-bold{font-weight:700;line-height:1.567rem;letter-spacing:.025rem;font-size:1rem}.hr-body.lg-regular{font-weight:400;line-height:2.05669rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-body.lg-bold{font-weight:700;line-height:1.99106rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-weight:420;letter-spacing:.02rem;font-size:1rem}.hr-title.sm-bold{font-weight:731;letter-spacing:.02rem;font-size:1rem}.hr-title.md-bold{font-weight:745;letter-spacing:.03938rem;font-size:1.3325rem}.hr-title.lg-regular{font-weight:480;letter-spacing:.02625rem;font-size:1.75rem}.hr-title.lg-bold{font-weight:700;font-size:1.75rem}.hr-label{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular{font-weight:343;letter-spacing:.01875rem;font-size:.75rem}.hr-label.sm-bold{font-weight:560;letter-spacing:.0225rem;font-size:.75rem}.hr-label.md-regular{font-weight:343;letter-spacing:.03rem;font-size:1rem}.hr-label.md-bold{font-weight:600;letter-spacing:.03rem;font-size:1rem}.hr-label.lg-regular{font-weight:343;letter-spacing:.0525rem;font-size:1.75rem}.hr-label.lg-bold{font-weight:600;letter-spacing:.0525rem;font-size:1.75rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-weight:700;letter-spacing:.02rem;font-size:2rem}.hr-headline.md-bold{font-weight:674;letter-spacing:.02375rem;font-size:2.375rem}.hr-headline.lg-bold{font-weight:700;letter-spacing:.02875rem;font-size:2.875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-weight:700;letter-spacing:.03125rem;font-size:3.125rem}.hr-display.md-bold{font-weight:700;letter-spacing:.04188rem;font-size:4.1875rem}.hr-display.lg-bold{font-weight:700;letter-spacing:.05625rem;font-size:5.625rem}.align-text-center{text-align:center}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{width:100%;display:block}.avatar-stack-carousel .stack-icon-container,.avatar-stack-standard .stack-icon-container{display:flex;align-items:center}.avatar-stack-carousel .stack-icon-container .icon-wrapper,.avatar-stack-standard .stack-icon-container .icon-wrapper{display:flex;cursor:pointer;position:relative;align-items:center;flex-direction:column;justify-content:center;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected{z-index:1}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected .avatar-icon{outline:1px solid var(--cta-primary);border:1px solid var(--on-bg-button-active-primary)}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-icon{cursor:pointer;width:var(--avatar-icon-width);height:var(--avatar-icon-height);min-width:var(--avatar-icon-width);min-height:var(--avatar-icon-height);border-radius:6.25rem;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-label{left:50%;display:none;height:1.1rem;position:absolute;border-radius:2px;padding-inline:4px;white-space:nowrap;top:calc(100% + 4px);transform:translate(-50%);color:var(--on-bg-button-active-primary);background-color:var(--bg-button-pressed-primary)}.avatar-stack-carousel .sm,.avatar-stack-standard .sm{--avatar-icon-width: 24px;--avatar-icon-height: 24px}.avatar-stack-carousel .md,.avatar-stack-standard .md{--avatar-icon-width: 32px;--avatar-icon-height: 32px}.avatar-stack-carousel .lg,.avatar-stack-standard .lg{--avatar-icon-width: 40px;--avatar-icon-height: 40px}.avatar-stack-carousel{display:flex;-webkit-user-select:none;user-select:none;align-items:center;touch-action:pan-y;justify-content:center;gap:var(--gravity-spacing-sm);-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container{gap:var(--gravity-spacing-xs);touch-action:pan-y}.avatar-stack-carousel .stack-icon-container .icon-wrapper{cursor:pointer;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .icon-wrapper{margin-left:-.25rem}.avatar-stack-standard .stack-icon-container .icon-wrapper:hover .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .max-displayed{margin-left:var(--gravity-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }] }); }
|
|
6306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityAvatarStackComponent, isStandalone: true, selector: "gravity-avatar-stack", inputs: { items: "items", type: "type", maxDisplayedItems: "maxDisplayedItems", selectedIndex: "selectedIndex", carouselMaxItems: "carouselMaxItems", size: "size", config: "config", selectionMode: "selectionMode" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "@if (isCarousel) {\n <div class=\"avatar-stack-carousel\">\n <gravity-icon-button [icon]=\"'arrow-left'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectPrevious()\"/>\n <div class=\"stack-icon-container\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd()\">\n @for (visibleItem of carouselItems; track visibleItem.actualIndex) {\n <div class=\"icon-wrapper {{ visibleItem.size }}\" role=\"button\" tabindex=\"0\"\n [class.selected]=\"visibleItem.isSelected\"\n (click)=\"onItemClick(visibleItem.actualIndex)\"\n (touchstart)=\"onItemTouchStart(visibleItem.actualIndex)\">\n <gravity-icon class=\"avatar-icon {{ visibleItem.size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(visibleItem.item)\"\n [iconName]=\"getIconName(visibleItem.item)\">\n </gravity-icon>\n @if (visibleItem.isSelected && getItemLabel(visibleItem.item)) {\n <p class=\"hr-body sm-regular avatar-label\"> {{ getItemLabel(visibleItem.item) }}</p>\n }\n </div>\n }\n </div>\n <gravity-icon-button [icon]=\"'arrow-right'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectNext()\"/>\n </div>\n} @else {\n <div class=\"avatar-stack-standard\">\n <div class=\"stack-icon-container\">\n @for (item of stackDisplayedItems; track item; let i = $index) {\n <div class=\"icon-wrapper\" role=\"button\" tabindex=\"0\"\n (click)=\"onItemClick(i)\" [class.selected]=\"isItemSelected(i)\" (touchstart)=\"onItemTouchStart(i)\">\n <gravity-icon class=\"avatar-icon {{ size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(item)\"\n [iconName]=\"getIconName(item)\">\n </gravity-icon>\n @if (getItemLabel(item) && selectionMode !== 'none') {\n <p class=\"hr-body sm-regular avatar-label\">{{ getItemLabel(item) }}</p>\n }\n </div>\n }\n @if (maxDisplayedItems && maxDisplayedItems < items.length) {\n <span class=\"hr-label sm-bold max-displayed\">+{{ items.length - maxDisplayedItems }}</span>\n }\n </div>\n </div>\n}", styles: ["body{font-style:normal;line-height:normal;font-optical-sizing:auto;color:var(--text-primary);font-family:Roboto Flex,sans-serif}.hr-body{font-family:Roboto Flex,sans-serif}.hr-body.sm-regular{font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.sm-bold{font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.md-regular{font-weight:380;line-height:1.567rem;letter-spacing:.03rem;font-size:1rem}.hr-body.md-bold{font-weight:700;line-height:1.567rem;letter-spacing:.025rem;font-size:1rem}.hr-body.lg-regular{font-weight:400;line-height:2.05669rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-body.lg-bold{font-weight:700;line-height:1.99106rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-weight:420;letter-spacing:.02rem;font-size:1rem}.hr-title.sm-bold{font-weight:731;letter-spacing:.02rem;font-size:1rem}.hr-title.md-bold{font-weight:745;letter-spacing:.03938rem;font-size:1.3325rem}.hr-title.lg-regular{font-weight:480;letter-spacing:.02625rem;font-size:1.75rem}.hr-title.lg-bold{font-weight:700;font-size:1.75rem}.hr-label{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular{font-weight:343;letter-spacing:.01875rem;font-size:.75rem}.hr-label.sm-bold{font-weight:560;letter-spacing:.0225rem;font-size:.75rem}.hr-label.md-regular{font-weight:343;letter-spacing:.03rem;font-size:1rem}.hr-label.md-bold{font-weight:600;letter-spacing:.03rem;font-size:1rem}.hr-label.lg-regular{font-weight:343;letter-spacing:.0525rem;font-size:1.75rem}.hr-label.lg-bold{font-weight:600;letter-spacing:.0525rem;font-size:1.75rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-weight:700;letter-spacing:.02rem;font-size:2rem}.hr-headline.md-bold{font-weight:674;letter-spacing:.02375rem;font-size:2.375rem}.hr-headline.lg-bold{font-weight:700;letter-spacing:.02875rem;font-size:2.875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-weight:700;letter-spacing:.03125rem;font-size:3.125rem}.hr-display.md-bold{font-weight:700;letter-spacing:.04188rem;font-size:4.1875rem}.hr-display.lg-bold{font-weight:700;letter-spacing:.05625rem;font-size:5.625rem}.align-text-center{text-align:center}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{width:100%;display:block}.avatar-stack-carousel .stack-icon-container,.avatar-stack-standard .stack-icon-container{display:flex;align-items:center}.avatar-stack-carousel .stack-icon-container .icon-wrapper,.avatar-stack-standard .stack-icon-container .icon-wrapper{display:flex;cursor:pointer;position:relative;align-items:center;flex-direction:column;justify-content:center;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected{z-index:1}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected .avatar-icon{outline:1px solid var(--cta-primary);border:1px solid var(--on-bg-button-active-primary)}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-icon{cursor:pointer;width:var(--avatar-icon-width);height:var(--avatar-icon-height);min-width:var(--avatar-icon-width);min-height:var(--avatar-icon-height);border-radius:6.25rem;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-label{left:50%;display:none;height:1.1rem;position:absolute;border-radius:2px;padding-inline:4px;white-space:nowrap;top:calc(100% + 4px);transform:translate(-50%);color:var(--on-bg-button-active-primary);background-color:var(--bg-button-pressed-primary)}.avatar-stack-carousel .sm,.avatar-stack-standard .sm{--avatar-icon-width: 24px;--avatar-icon-height: 24px}.avatar-stack-carousel .md,.avatar-stack-standard .md{--avatar-icon-width: 32px;--avatar-icon-height: 32px}.avatar-stack-carousel .lg,.avatar-stack-standard .lg{--avatar-icon-width: 40px;--avatar-icon-height: 40px}.avatar-stack-carousel{display:flex;-webkit-user-select:none;user-select:none;align-items:center;touch-action:pan-y;justify-content:center;gap:var(--gravity-spacing-sm);-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container{gap:var(--gravity-spacing-xs);touch-action:pan-y}.avatar-stack-carousel .stack-icon-container .icon-wrapper{cursor:pointer;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .icon-wrapper{margin-left:-.25rem}.avatar-stack-standard .stack-icon-container .icon-wrapper:hover .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .max-displayed{margin-left:var(--gravity-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }] }); }
|
|
6299
6307
|
}
|
|
6300
6308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityAvatarStackComponent, decorators: [{
|
|
6301
6309
|
type: Component,
|
|
6302
|
-
args: [{ selector: 'gravity-avatar-stack', standalone: true, imports: [GravityIconComponent, GravityIconButtonComponent], template: "@if (isCarousel) {\n <div class=\"avatar-stack-carousel\">\n <gravity-icon-button [icon]=\"'arrow-left'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectPrevious()\"/>\n <div class=\"stack-icon-container\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd()\">\n @for (visibleItem of carouselItems; track visibleItem.actualIndex) {\n <div class=\"icon-wrapper {{ visibleItem.size }}\" role=\"button\" tabindex=\"0\"\n [class.selected]=\"visibleItem.isSelected\" (click)=\"onItemClick(visibleItem.actualIndex)\">\n <gravity-icon class=\"avatar-icon {{ visibleItem.size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(visibleItem.item)\"\n [iconName]=\"getIconName(visibleItem.item)\">\n </gravity-icon>\n @if (visibleItem.isSelected && getItemLabel(visibleItem.item)) {\n <p class=\"hr-body sm-regular avatar-label\"> {{ getItemLabel(visibleItem.item) }}</p>\n }\n </div>\n }\n </div>\n <gravity-icon-button [icon]=\"'arrow-right'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectNext()\"/>\n </div>\n} @else {\n <div class=\"avatar-stack-standard\">\n <div class=\"stack-icon-container\">\n @for (item of stackDisplayedItems; track item; let i = $index) {\n <div class=\"icon-wrapper\" role=\"button\" tabindex=\"0\"\n [class.selected]=\"isItemSelected(i)\" (click)=\"onItemClick(i)\">\n <gravity-icon class=\"avatar-icon {{ size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(item)\"\n [iconName]=\"getIconName(item)\">\n </gravity-icon>\n @if (getItemLabel(item) && selectionMode !== 'none') {\n <p class=\"hr-body sm-regular avatar-label\">{{ getItemLabel(item) }}</p>\n }\n </div>\n }\n @if (maxDisplayedItems && maxDisplayedItems < items.length) {\n <span class=\"hr-label sm-bold max-displayed\">+{{ items.length - maxDisplayedItems }}</span>\n }\n </div>\n </div>\n}", styles: ["body{font-style:normal;line-height:normal;font-optical-sizing:auto;color:var(--text-primary);font-family:Roboto Flex,sans-serif}.hr-body{font-family:Roboto Flex,sans-serif}.hr-body.sm-regular{font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.sm-bold{font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.md-regular{font-weight:380;line-height:1.567rem;letter-spacing:.03rem;font-size:1rem}.hr-body.md-bold{font-weight:700;line-height:1.567rem;letter-spacing:.025rem;font-size:1rem}.hr-body.lg-regular{font-weight:400;line-height:2.05669rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-body.lg-bold{font-weight:700;line-height:1.99106rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-weight:420;letter-spacing:.02rem;font-size:1rem}.hr-title.sm-bold{font-weight:731;letter-spacing:.02rem;font-size:1rem}.hr-title.md-bold{font-weight:745;letter-spacing:.03938rem;font-size:1.3325rem}.hr-title.lg-regular{font-weight:480;letter-spacing:.02625rem;font-size:1.75rem}.hr-title.lg-bold{font-weight:700;font-size:1.75rem}.hr-label{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular{font-weight:343;letter-spacing:.01875rem;font-size:.75rem}.hr-label.sm-bold{font-weight:560;letter-spacing:.0225rem;font-size:.75rem}.hr-label.md-regular{font-weight:343;letter-spacing:.03rem;font-size:1rem}.hr-label.md-bold{font-weight:600;letter-spacing:.03rem;font-size:1rem}.hr-label.lg-regular{font-weight:343;letter-spacing:.0525rem;font-size:1.75rem}.hr-label.lg-bold{font-weight:600;letter-spacing:.0525rem;font-size:1.75rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-weight:700;letter-spacing:.02rem;font-size:2rem}.hr-headline.md-bold{font-weight:674;letter-spacing:.02375rem;font-size:2.375rem}.hr-headline.lg-bold{font-weight:700;letter-spacing:.02875rem;font-size:2.875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-weight:700;letter-spacing:.03125rem;font-size:3.125rem}.hr-display.md-bold{font-weight:700;letter-spacing:.04188rem;font-size:4.1875rem}.hr-display.lg-bold{font-weight:700;letter-spacing:.05625rem;font-size:5.625rem}.align-text-center{text-align:center}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{width:100%;display:block}.avatar-stack-carousel .stack-icon-container,.avatar-stack-standard .stack-icon-container{display:flex;align-items:center}.avatar-stack-carousel .stack-icon-container .icon-wrapper,.avatar-stack-standard .stack-icon-container .icon-wrapper{display:flex;cursor:pointer;position:relative;align-items:center;flex-direction:column;justify-content:center;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected{z-index:1}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected .avatar-icon{outline:1px solid var(--cta-primary);border:1px solid var(--on-bg-button-active-primary)}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-icon{cursor:pointer;width:var(--avatar-icon-width);height:var(--avatar-icon-height);min-width:var(--avatar-icon-width);min-height:var(--avatar-icon-height);border-radius:6.25rem;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-label{left:50%;display:none;height:1.1rem;position:absolute;border-radius:2px;padding-inline:4px;white-space:nowrap;top:calc(100% + 4px);transform:translate(-50%);color:var(--on-bg-button-active-primary);background-color:var(--bg-button-pressed-primary)}.avatar-stack-carousel .sm,.avatar-stack-standard .sm{--avatar-icon-width: 24px;--avatar-icon-height: 24px}.avatar-stack-carousel .md,.avatar-stack-standard .md{--avatar-icon-width: 32px;--avatar-icon-height: 32px}.avatar-stack-carousel .lg,.avatar-stack-standard .lg{--avatar-icon-width: 40px;--avatar-icon-height: 40px}.avatar-stack-carousel{display:flex;-webkit-user-select:none;user-select:none;align-items:center;touch-action:pan-y;justify-content:center;gap:var(--gravity-spacing-sm);-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container{gap:var(--gravity-spacing-xs);touch-action:pan-y}.avatar-stack-carousel .stack-icon-container .icon-wrapper{cursor:pointer;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .icon-wrapper{margin-left:-.25rem}.avatar-stack-standard .stack-icon-container .icon-wrapper:hover .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .max-displayed{margin-left:var(--gravity-spacing-xxs)}\n"] }]
|
|
6310
|
+
args: [{ selector: 'gravity-avatar-stack', standalone: true, imports: [GravityIconComponent, GravityIconButtonComponent], template: "@if (isCarousel) {\n <div class=\"avatar-stack-carousel\">\n <gravity-icon-button [icon]=\"'arrow-left'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectPrevious()\"/>\n <div class=\"stack-icon-container\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" (touchend)=\"onTouchEnd()\">\n @for (visibleItem of carouselItems; track visibleItem.actualIndex) {\n <div class=\"icon-wrapper {{ visibleItem.size }}\" role=\"button\" tabindex=\"0\"\n [class.selected]=\"visibleItem.isSelected\"\n (click)=\"onItemClick(visibleItem.actualIndex)\"\n (touchstart)=\"onItemTouchStart(visibleItem.actualIndex)\">\n <gravity-icon class=\"avatar-icon {{ visibleItem.size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(visibleItem.item)\"\n [iconName]=\"getIconName(visibleItem.item)\">\n </gravity-icon>\n @if (visibleItem.isSelected && getItemLabel(visibleItem.item)) {\n <p class=\"hr-body sm-regular avatar-label\"> {{ getItemLabel(visibleItem.item) }}</p>\n }\n </div>\n }\n </div>\n <gravity-icon-button [icon]=\"'arrow-right'\" [size]=\"'sm'\" [type]=\"'secondary'\" (clickOnIcon)=\"selectNext()\"/>\n </div>\n} @else {\n <div class=\"avatar-stack-standard\">\n <div class=\"stack-icon-container\">\n @for (item of stackDisplayedItems; track item; let i = $index) {\n <div class=\"icon-wrapper\" role=\"button\" tabindex=\"0\"\n (click)=\"onItemClick(i)\" [class.selected]=\"isItemSelected(i)\" (touchstart)=\"onItemTouchStart(i)\">\n <gravity-icon class=\"avatar-icon {{ size }}\"\n [isCoin]=\"true\" [attr.data-cy]=\"'stack-item-' + getItemLabel(item)\"\n [iconName]=\"getIconName(item)\">\n </gravity-icon>\n @if (getItemLabel(item) && selectionMode !== 'none') {\n <p class=\"hr-body sm-regular avatar-label\">{{ getItemLabel(item) }}</p>\n }\n </div>\n }\n @if (maxDisplayedItems && maxDisplayedItems < items.length) {\n <span class=\"hr-label sm-bold max-displayed\">+{{ items.length - maxDisplayedItems }}</span>\n }\n </div>\n </div>\n}", styles: ["body{font-style:normal;line-height:normal;font-optical-sizing:auto;color:var(--text-primary);font-family:Roboto Flex,sans-serif}.hr-body{font-family:Roboto Flex,sans-serif}.hr-body.sm-regular{font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.sm-bold{font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem;font-size:.75rem}.hr-body.md-regular{font-weight:380;line-height:1.567rem;letter-spacing:.03rem;font-size:1rem}.hr-body.md-bold{font-weight:700;line-height:1.567rem;letter-spacing:.025rem;font-size:1rem}.hr-body.lg-regular{font-weight:400;line-height:2.05669rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-body.lg-bold{font-weight:700;line-height:1.99106rem;letter-spacing:.02625rem;font-size:1.3325rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-weight:420;letter-spacing:.02rem;font-size:1rem}.hr-title.sm-bold{font-weight:731;letter-spacing:.02rem;font-size:1rem}.hr-title.md-bold{font-weight:745;letter-spacing:.03938rem;font-size:1.3325rem}.hr-title.lg-regular{font-weight:480;letter-spacing:.02625rem;font-size:1.75rem}.hr-title.lg-bold{font-weight:700;font-size:1.75rem}.hr-label{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular{font-weight:343;letter-spacing:.01875rem;font-size:.75rem}.hr-label.sm-bold{font-weight:560;letter-spacing:.0225rem;font-size:.75rem}.hr-label.md-regular{font-weight:343;letter-spacing:.03rem;font-size:1rem}.hr-label.md-bold{font-weight:600;letter-spacing:.03rem;font-size:1rem}.hr-label.lg-regular{font-weight:343;letter-spacing:.0525rem;font-size:1.75rem}.hr-label.lg-bold{font-weight:600;letter-spacing:.0525rem;font-size:1.75rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-weight:700;letter-spacing:.02rem;font-size:2rem}.hr-headline.md-bold{font-weight:674;letter-spacing:.02375rem;font-size:2.375rem}.hr-headline.lg-bold{font-weight:700;letter-spacing:.02875rem;font-size:2.875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-weight:700;letter-spacing:.03125rem;font-size:3.125rem}.hr-display.md-bold{font-weight:700;letter-spacing:.04188rem;font-size:4.1875rem}.hr-display.lg-bold{font-weight:700;letter-spacing:.05625rem;font-size:5.625rem}.align-text-center{text-align:center}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{width:100%;display:block}.avatar-stack-carousel .stack-icon-container,.avatar-stack-standard .stack-icon-container{display:flex;align-items:center}.avatar-stack-carousel .stack-icon-container .icon-wrapper,.avatar-stack-standard .stack-icon-container .icon-wrapper{display:flex;cursor:pointer;position:relative;align-items:center;flex-direction:column;justify-content:center;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected{z-index:1}.avatar-stack-carousel .stack-icon-container .icon-wrapper.selected .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper.selected .avatar-icon{outline:1px solid var(--cta-primary);border:1px solid var(--on-bg-button-active-primary)}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-icon,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-icon{cursor:pointer;width:var(--avatar-icon-width);height:var(--avatar-icon-height);min-width:var(--avatar-icon-width);min-height:var(--avatar-icon-height);border-radius:6.25rem;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label,.avatar-stack-standard .stack-icon-container .icon-wrapper .avatar-label{left:50%;display:none;height:1.1rem;position:absolute;border-radius:2px;padding-inline:4px;white-space:nowrap;top:calc(100% + 4px);transform:translate(-50%);color:var(--on-bg-button-active-primary);background-color:var(--bg-button-pressed-primary)}.avatar-stack-carousel .sm,.avatar-stack-standard .sm{--avatar-icon-width: 24px;--avatar-icon-height: 24px}.avatar-stack-carousel .md,.avatar-stack-standard .md{--avatar-icon-width: 32px;--avatar-icon-height: 32px}.avatar-stack-carousel .lg,.avatar-stack-standard .lg{--avatar-icon-width: 40px;--avatar-icon-height: 40px}.avatar-stack-carousel{display:flex;-webkit-user-select:none;user-select:none;align-items:center;touch-action:pan-y;justify-content:center;gap:var(--gravity-spacing-sm);-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container{gap:var(--gravity-spacing-xs);touch-action:pan-y}.avatar-stack-carousel .stack-icon-container .icon-wrapper{cursor:pointer;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.avatar-stack-carousel .stack-icon-container .icon-wrapper .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .icon-wrapper{margin-left:-.25rem}.avatar-stack-standard .stack-icon-container .icon-wrapper:hover .avatar-label{display:block}.avatar-stack-standard .stack-icon-container .max-displayed{margin-left:var(--gravity-spacing-xxs)}\n"] }]
|
|
6303
6311
|
}], propDecorators: { items: [{
|
|
6304
6312
|
type: Input
|
|
6305
6313
|
}], type: [{
|
|
@@ -8171,9 +8179,15 @@ class GravityMenuComponent {
|
|
|
8171
8179
|
this.scrollPosition = 0;
|
|
8172
8180
|
this.collapsedMode = false;
|
|
8173
8181
|
this.visibleSubMenu = false;
|
|
8182
|
+
this.isControlPanelMode = false;
|
|
8174
8183
|
this.selectedOption = null;
|
|
8175
8184
|
}
|
|
8176
8185
|
ngOnChanges(changes) {
|
|
8186
|
+
if (changes['items'] && this.items?.length) {
|
|
8187
|
+
if (this.collapsedMode) {
|
|
8188
|
+
this.toggleAllHeaders(true);
|
|
8189
|
+
}
|
|
8190
|
+
}
|
|
8177
8191
|
if (changes['currentLink'] && this.currentLink != null && this.items?.length) {
|
|
8178
8192
|
this.preselectOptionByLink(this.currentLink);
|
|
8179
8193
|
}
|
|
@@ -8211,12 +8225,25 @@ class GravityMenuComponent {
|
|
|
8211
8225
|
}
|
|
8212
8226
|
getSwitchControlPanelText(collapsedMode = false) {
|
|
8213
8227
|
const texts = {
|
|
8214
|
-
en: {
|
|
8215
|
-
|
|
8228
|
+
en: {
|
|
8229
|
+
expanded: 'Switch to control panel', collapsed: 'Control panel',
|
|
8230
|
+
controlPanelExpanded: 'Back to front view', controlPanelCollapsed: 'Front view',
|
|
8231
|
+
},
|
|
8232
|
+
es: {
|
|
8233
|
+
expanded: 'Cambiar a panel de control', collapsed: 'Panel de control',
|
|
8234
|
+
controlPanelExpanded: 'Volver a la vista frontal', controlPanelCollapsed: 'Vista frontal',
|
|
8235
|
+
},
|
|
8216
8236
|
};
|
|
8217
|
-
|
|
8237
|
+
const language = this.language === 'en' ? 'en' : 'es';
|
|
8238
|
+
if (this.isControlPanelMode) {
|
|
8239
|
+
return texts[language][collapsedMode ? 'controlPanelCollapsed' : 'controlPanelExpanded'];
|
|
8240
|
+
}
|
|
8241
|
+
return texts[language][collapsedMode ? 'collapsed' : 'expanded'];
|
|
8218
8242
|
}
|
|
8219
8243
|
onSwitchControlPanel() {
|
|
8244
|
+
setTimeout(() => {
|
|
8245
|
+
this.isControlPanelMode = !this.isControlPanelMode;
|
|
8246
|
+
}, 1000);
|
|
8220
8247
|
this.switchControlPanel.emit();
|
|
8221
8248
|
}
|
|
8222
8249
|
preselectOptionByLink(link) {
|
|
@@ -8362,11 +8389,11 @@ class GravityMenuComponent {
|
|
|
8362
8389
|
el.scrollTo({ top: 62 * index, behavior: 'auto' });
|
|
8363
8390
|
}
|
|
8364
8391
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityMenuComponent, isStandalone: true, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", isOpen: "isOpen", systemTime: "systemTime", collapsable: "collapsable", language: "language", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", showControlPanelButton: "showControlPanelButton", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed", switchControlPanel: "switchControlPanel" }, 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 @if (logoUrl?.main_logo_url) {\n <svg-icon [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div 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 }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\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 [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [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 @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo || showControlPanelButton) && (size === 'xl' || size === 'lg')) {\n <section class=\"menu-footer elevation-xs\" [class.collapsed-mode]=\"collapsedMode\">\n @if (showControlPanelButton) {\n <div class=\"control-panel-button\">\n <gravity-button [size]=\"'sm'\" [type]=\"'primary'\" [fullWidth]=\"true\" [iconName]=\"'arrow-right'\" [iconPosition]=\"'right'\" (click)=\"onSwitchControlPanel()\">\n @if (!collapsedMode) { {{ getSwitchControlPanelText(collapsedMode) }} }\n </gravity-button>\n @if (collapsedMode) {\n <span class=\"hr-label sm-regular\">{{getSwitchControlPanelText(collapsedMode)}} </span>\n }\n </div>\n }\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\" [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (systemTime) {\n <div class=\"system-time\" [tooltip]=\"tooltipSystemTimeTemplate\" [contentType]=\"'template'\" [placement]=\"'top'\">\n <gravity-icon [iconName]=\"'clock'\" [iconSize]=\"'md-16'\" />\n <span class=\"hr-label sm-regular\" >\n {{ collapsedMode ? systemTime.replace(' ', '\\n') : systemTime }}\n </span>\n </div>\n\n <ng-template #tooltipSystemTimeTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: systemTimeText}\"/>\n </ng-template>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || showControlPanelButton || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons || showControlPanelButton) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\" [class.has-overflow]=\"isMobileCardsOverflow()\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [orientation]=\"'vrt-center'\"\n [type]=\"button.type || 'secondary'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div 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 }\n </div>\n }\n </section>\n </section>\n }\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{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.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 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .control-panel-button{width:100%;display:flex;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .control-panel-button gravity-button{width:100%}.gravity-menu .menu-content .menu-footer.collapsed-mode{align-items:center}.gravity-menu .menu-content .menu-footer.collapsed-mode .control-panel-button gravity-button{width:36px;height:32px}.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-sm)}.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;align-items:center;gap:var(--gravity-spacing-sm)}.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-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time span{white-space:pre-line}.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:70px!important;justify-content:center!important}.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{width:100%;display:flex;text-align:center;position:relative;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 p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;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.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info{padding:0 var(--gravity-spacing-xs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .system-time{width:100%;display:flex;text-align:center;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;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 .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{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 .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-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 .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.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 .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 .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - 3 * var(--gravity-spacing-xs)) / 4);flex:0 0 calc((100% - 3 * var(--gravity-spacing-xs)) / 4)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - var(--gravity-spacing-xs)) / 2);flex:0 0 calc((100% - var(--gravity-spacing-xs)) / 2)}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityBadgeComponent, selector: "gravity-badge", inputs: ["size", "text", "number", "cypressTag", "type"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GravityTooltipDirective, selector: "[tooltip]", inputs: ["options", "tooltip", "placement", "autoPlacement", "content-type", "contentType", "hide-delay-mobile", "hideDelayTouchscreen", "z-index", "zIndex", "animation-duration", "animationDuration", "trigger", "tooltip-class", "tooltipClass", "display", "display-mobile", "displayTouchscreen", "shadow", "theme", "offset", "width", "persistent", "max-width", "maxWidth", "id", "show-delay", "showDelay", "hide-delay", "hideDelay", "hideDelayAfterClick", "pointerEvents", "position"], outputs: ["events"], exportAs: ["tooltip"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "component", type: GravityActionCardComponent, selector: "gravity-action-card", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
8392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityMenuComponent, isStandalone: true, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", isOpen: "isOpen", systemTime: "systemTime", collapsable: "collapsable", language: "language", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", showControlPanelButton: "showControlPanelButton", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed", switchControlPanel: "switchControlPanel" }, 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 @if (logoUrl?.main_logo_url) {\n <svg-icon [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div 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 }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\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 [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [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 @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo || showControlPanelButton) && (size === 'xl' || size === 'lg')) {\n <section class=\"menu-footer elevation-xs\" [class.collapsed-mode]=\"collapsedMode\">\n @if (showControlPanelButton) {\n <div class=\"control-panel-button\">\n <gravity-button [size]=\"'sm'\" [type]=\"'primary'\" [fullWidth]=\"true\" [iconName]=\"'arrow-right'\" [iconPosition]=\"'right'\" (click)=\"onSwitchControlPanel()\">\n @if (!collapsedMode) { {{ getSwitchControlPanelText(collapsedMode) }} }\n </gravity-button>\n @if (collapsedMode) {\n <span class=\"hr-label sm-regular\">{{getSwitchControlPanelText(collapsedMode)}} </span>\n }\n </div>\n }\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\" [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (systemTime) {\n <div class=\"system-time\" [tooltip]=\"tooltipSystemTimeTemplate\" [contentType]=\"'template'\" [placement]=\"'top'\">\n <gravity-icon [iconName]=\"'clock'\" [iconSize]=\"'md-16'\" />\n <span class=\"hr-label sm-regular\" >\n {{ collapsedMode ? systemTime.replace(' ', '\\n') : systemTime }}\n </span>\n </div>\n\n <ng-template #tooltipSystemTimeTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: systemTimeText}\"/>\n </ng-template>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || showControlPanelButton || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons || showControlPanelButton) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\" [class.has-overflow]=\"isMobileCardsOverflow()\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [orientation]=\"'vrt-center'\"\n [type]=\"button.type || 'secondary'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div 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 }\n </div>\n }\n </section>\n </section>\n }\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{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.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 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .control-panel-button{width:100%;display:flex;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .control-panel-button gravity-button{width:100%}.gravity-menu .menu-content .menu-footer.collapsed-mode{align-items:center}.gravity-menu .menu-content .menu-footer.collapsed-mode .control-panel-button gravity-button{width:36px;height:32px}.gravity-menu .menu-content .menu-footer .footer-content{width:100%;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-sm)}.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;align-items:center;gap:var(--gravity-spacing-sm)}.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-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time span{white-space:pre-line}.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:70px!important;justify-content:center!important}.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{width:100%;display:flex;text-align:center;position:relative;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 p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;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.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info{padding:0 var(--gravity-spacing-xs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .system-time{width:100%;display:flex;text-align:center;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;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 .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{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 .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-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 .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.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 .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 .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - 3 * var(--gravity-spacing-xs)) / 4);flex:0 0 calc((100% - 3 * var(--gravity-spacing-xs)) / 4)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - var(--gravity-spacing-xs)) / 2);flex:0 0 calc((100% - var(--gravity-spacing-xs)) / 2)}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityBadgeComponent, selector: "gravity-badge", inputs: ["size", "text", "number", "cypressTag", "type"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GravityTooltipDirective, selector: "[tooltip]", inputs: ["options", "tooltip", "placement", "autoPlacement", "content-type", "contentType", "hide-delay-mobile", "hideDelayTouchscreen", "z-index", "zIndex", "animation-duration", "animationDuration", "trigger", "tooltip-class", "tooltipClass", "display", "display-mobile", "displayTouchscreen", "shadow", "theme", "offset", "width", "persistent", "max-width", "maxWidth", "id", "show-delay", "showDelay", "hide-delay", "hideDelay", "hideDelayAfterClick", "pointerEvents", "position"], outputs: ["events"], exportAs: ["tooltip"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "component", type: GravityActionCardComponent, selector: "gravity-action-card", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
8366
8393
|
}
|
|
8367
8394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityMenuComponent, decorators: [{
|
|
8368
8395
|
type: Component,
|
|
8369
|
-
args: [{ selector: 'gravity-menu', standalone: true, imports: [SvgIconComponent, GravityIconComponent, RouterLink, GravityBadgeComponent, NgClass, GravityTooltipDirective, GravityTooltipContainerComponent, GravityActionCardComponent, GravityButtonComponent], 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 @if (logoUrl?.main_logo_url) {\n <svg-icon [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div 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 }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\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 [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [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 @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo || showControlPanelButton) && (size === 'xl' || size === 'lg')) {\n <section class=\"menu-footer elevation-xs\" [class.collapsed-mode]=\"collapsedMode\">\n @if (showControlPanelButton) {\n <div class=\"control-panel-button\">\n <gravity-button [size]=\"'sm'\" [type]=\"'primary'\" [fullWidth]=\"true\" [iconName]=\"'arrow-right'\" [iconPosition]=\"'right'\" (click)=\"onSwitchControlPanel()\">\n @if (!collapsedMode) { {{ getSwitchControlPanelText(collapsedMode) }} }\n </gravity-button>\n @if (collapsedMode) {\n <span class=\"hr-label sm-regular\">{{getSwitchControlPanelText(collapsedMode)}} </span>\n }\n </div>\n }\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\" [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (systemTime) {\n <div class=\"system-time\" [tooltip]=\"tooltipSystemTimeTemplate\" [contentType]=\"'template'\" [placement]=\"'top'\">\n <gravity-icon [iconName]=\"'clock'\" [iconSize]=\"'md-16'\" />\n <span class=\"hr-label sm-regular\" >\n {{ collapsedMode ? systemTime.replace(' ', '\\n') : systemTime }}\n </span>\n </div>\n\n <ng-template #tooltipSystemTimeTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: systemTimeText}\"/>\n </ng-template>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || showControlPanelButton || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons || showControlPanelButton) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\" [class.has-overflow]=\"isMobileCardsOverflow()\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [orientation]=\"'vrt-center'\"\n [type]=\"button.type || 'secondary'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div 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 }\n </div>\n }\n </section>\n </section>\n }\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{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.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 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .control-panel-button{width:100%;display:flex;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .control-panel-button gravity-button{width:100%}.gravity-menu .menu-content .menu-footer.collapsed-mode{align-items:center}.gravity-menu .menu-content .menu-footer.collapsed-mode .control-panel-button gravity-button{width:36px;height:32px}.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-sm)}.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;align-items:center;gap:var(--gravity-spacing-sm)}.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-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time span{white-space:pre-line}.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:70px!important;justify-content:center!important}.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{width:100%;display:flex;text-align:center;position:relative;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 p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;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.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info{padding:0 var(--gravity-spacing-xs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .system-time{width:100%;display:flex;text-align:center;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;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 .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{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 .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-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 .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.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 .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 .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - 3 * var(--gravity-spacing-xs)) / 4);flex:0 0 calc((100% - 3 * var(--gravity-spacing-xs)) / 4)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - var(--gravity-spacing-xs)) / 2);flex:0 0 calc((100% - var(--gravity-spacing-xs)) / 2)}\n"] }]
|
|
8396
|
+
args: [{ selector: 'gravity-menu', standalone: true, imports: [SvgIconComponent, GravityIconComponent, RouterLink, GravityBadgeComponent, NgClass, GravityTooltipDirective, GravityTooltipContainerComponent, GravityActionCardComponent, GravityButtonComponent], 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 @if (logoUrl?.main_logo_url) {\n <svg-icon [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div 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 }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\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 [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [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 @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo || showControlPanelButton) && (size === 'xl' || size === 'lg')) {\n <section class=\"menu-footer elevation-xs\" [class.collapsed-mode]=\"collapsedMode\">\n @if (showControlPanelButton) {\n <div class=\"control-panel-button\">\n <gravity-button [size]=\"'sm'\" [type]=\"'primary'\" [fullWidth]=\"true\" [iconName]=\"'arrow-right'\" [iconPosition]=\"'right'\" (click)=\"onSwitchControlPanel()\">\n @if (!collapsedMode) { {{ getSwitchControlPanelText(collapsedMode) }} }\n </gravity-button>\n @if (collapsedMode) {\n <span class=\"hr-label sm-regular\">{{getSwitchControlPanelText(collapsedMode)}} </span>\n }\n </div>\n }\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\" [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (systemTime) {\n <div class=\"system-time\" [tooltip]=\"tooltipSystemTimeTemplate\" [contentType]=\"'template'\" [placement]=\"'top'\">\n <gravity-icon [iconName]=\"'clock'\" [iconSize]=\"'md-16'\" />\n <span class=\"hr-label sm-regular\" >\n {{ collapsedMode ? systemTime.replace(' ', '\\n') : systemTime }}\n </span>\n </div>\n\n <ng-template #tooltipSystemTimeTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: systemTimeText}\"/>\n </ng-template>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || showControlPanelButton || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons || showControlPanelButton) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\" [class.has-overflow]=\"isMobileCardsOverflow()\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [orientation]=\"'vrt-center'\"\n [type]=\"button.type || 'secondary'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div 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 }\n </div>\n }\n </section>\n </section>\n }\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{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.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 rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .control-panel-button{width:100%;display:flex;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .control-panel-button gravity-button{width:100%}.gravity-menu .menu-content .menu-footer.collapsed-mode{align-items:center}.gravity-menu .menu-content .menu-footer.collapsed-mode .control-panel-button gravity-button{width:36px;height:32px}.gravity-menu .menu-content .menu-footer .footer-content{width:100%;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-sm)}.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;align-items:center;gap:var(--gravity-spacing-sm)}.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-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time span{white-space:pre-line}.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:70px!important;justify-content:center!important}.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{width:100%;display:flex;text-align:center;position:relative;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 p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;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.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info{padding:0 var(--gravity-spacing-xs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .system-time{width:100%;display:flex;text-align:center;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;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 .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{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 .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-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 .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.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 .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 .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - 3 * var(--gravity-spacing-xs)) / 4);flex:0 0 calc((100% - 3 * var(--gravity-spacing-xs)) / 4)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions .action-cards.has-overflow .action-cards-row ::ng-deep gravity-action-card{width:calc((100% - var(--gravity-spacing-xs)) / 2);flex:0 0 calc((100% - var(--gravity-spacing-xs)) / 2)}\n"] }]
|
|
8370
8397
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
|
|
8371
8398
|
type: Input
|
|
8372
8399
|
}], userInfo: [{
|