@progressio_resources/gravity-design-system 3.6.16 → 3.6.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/gravity-detail-container/gravity-detail-container.component.mjs +2 -2
- package/esm2022/lib/components/gravity-pagination/gravity-pagination.component.mjs +113 -0
- package/esm2022/lib/components/gravity-push-notifications/gravity-push-notifications.component.mjs +2 -2
- package/esm2022/lib/gravity-design-system.module.mjs +6 -1
- package/esm2022/lib/layout/gravity-header/gravity-header.component.mjs +3 -22
- package/esm2022/lib/layout/gravity-menu/gravity-menu.component.mjs +17 -6
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/progressio_resources-gravity-design-system.mjs +136 -30
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-pagination/gravity-pagination.component.d.ts +24 -0
- package/lib/gravity-design-system.module.d.ts +12 -11
- package/lib/layout/gravity-menu/gravity-menu.component.d.ts +6 -3
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -7461,11 +7461,11 @@ class GravityDetailContainerComponent {
|
|
|
7461
7461
|
}
|
|
7462
7462
|
}
|
|
7463
7463
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, deps: [{ token: GravityResponsiveService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDetailContainerComponent, selector: "gravity-detail-container", inputs: { cypressTag: "cypressTag", title: "title", description: "description", mode: "mode", type: "type", optionalHeight: "optionalHeight", language: "language" }, outputs: { closed: "closed", menuEvent: "menuEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], ngImport: i0, template: "<div class=\"detail-container-backdrop\"\n *ngIf=\"type === 'flyout' && mode === 'modal' && !gravityResponsiveService.isMobile()\"\n [class.open]=\"isOpen\" (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{mode}} {{gravityResponsiveService.isMobile() ? 'mobile' : type}}\"\n [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\"\n [attr.data-cy]=\"'detailContainer_' + cypressTag\">\n <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [attr.data-cy]=\"'detailContainer_backButton'\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--back-button-color)'\"></gravity-icon>\n <span class=\"hr-label md-regular\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n <p [ngClass]=\"gravityResponsiveService.isMobile() ? 'hr-body md-bold': type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\"\n [attr.data-cy]=\"'detailContainer_title'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\" [attr.data-cy]=\"'detailContainer_closeButton'\"/>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\" [attr.data-cy]=\"'detailContainer_menuButton'\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\" [attr.data-cy]=\"'detailContainer_body'\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.mobile{position:absolute;width:100%;gap:8px;padding-bottom:var(--gravity-spacing-lg)}.detail-container-content.mobile .detail-header{padding:var(--gravity-spacing-sm)}.detail-container-content.mobile .overflow-container{display:flex;flex-direction:column;padding:0 var(--gravity-spacing-md);gap:8px}.detail-container-content.mobile .overflow-container.has-scroll{padding:0 var(--gravity-spacing-xs) 0 var(--gravity-spacing-md)!important}.detail-container-content.mobile .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:16px!important}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .detail-header .back-button{display:flex;align-items:center;gap:4px;padding:var(--gravity-spacing-xs) 6px;color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.detail-container-content .detail-header .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.detail-container-content .detail-header .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.detail-container-content .detail-header .menu-button{--back-button-color: var(--bg-button-active-primary)}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:8px!important}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
7464
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDetailContainerComponent, selector: "gravity-detail-container", inputs: { cypressTag: "cypressTag", title: "title", description: "description", mode: "mode", type: "type", optionalHeight: "optionalHeight", language: "language" }, outputs: { closed: "closed", menuEvent: "menuEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], ngImport: i0, template: "<div class=\"detail-container-backdrop\"\n *ngIf=\"type === 'flyout' && mode === 'modal' && !gravityResponsiveService.isMobile()\"\n [class.open]=\"isOpen\" (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{mode}} {{gravityResponsiveService.isMobile() ? 'mobile' : type}}\"\n [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\"\n [attr.data-cy]=\"'detailContainer_' + cypressTag\">\n <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [attr.data-cy]=\"'detailContainer_backButton'\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--back-button-color)'\"></gravity-icon>\n <span class=\"hr-label md-regular\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n <p [ngClass]=\"gravityResponsiveService.isMobile() ? 'hr-body md-bold': type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\"\n [attr.data-cy]=\"'detailContainer_title'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\" [attr.data-cy]=\"'detailContainer_closeButton'\"/>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\" [attr.data-cy]=\"'detailContainer_menuButton'\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\" [attr.data-cy]=\"'detailContainer_body'\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.mobile{z-index:1;position:absolute;width:100%;gap:8px;padding-bottom:var(--gravity-spacing-lg)}.detail-container-content.mobile .detail-header{padding:var(--gravity-spacing-sm)}.detail-container-content.mobile .overflow-container{display:flex;flex-direction:column;padding:0 var(--gravity-spacing-md);gap:8px}.detail-container-content.mobile .overflow-container.has-scroll{padding:0 var(--gravity-spacing-xs) 0 var(--gravity-spacing-md)!important}.detail-container-content.mobile .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:16px!important}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .detail-header .back-button{display:flex;align-items:center;gap:4px;padding:var(--gravity-spacing-xs) 6px;color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.detail-container-content .detail-header .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.detail-container-content .detail-header .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.detail-container-content .detail-header .menu-button{--back-button-color: var(--bg-button-active-primary)}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:8px!important}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
7465
7465
|
}
|
|
7466
7466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, decorators: [{
|
|
7467
7467
|
type: Component,
|
|
7468
|
-
args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\"\n *ngIf=\"type === 'flyout' && mode === 'modal' && !gravityResponsiveService.isMobile()\"\n [class.open]=\"isOpen\" (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{mode}} {{gravityResponsiveService.isMobile() ? 'mobile' : type}}\"\n [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\"\n [attr.data-cy]=\"'detailContainer_' + cypressTag\">\n <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [attr.data-cy]=\"'detailContainer_backButton'\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--back-button-color)'\"></gravity-icon>\n <span class=\"hr-label md-regular\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n <p [ngClass]=\"gravityResponsiveService.isMobile() ? 'hr-body md-bold': type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\"\n [attr.data-cy]=\"'detailContainer_title'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\" [attr.data-cy]=\"'detailContainer_closeButton'\"/>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\" [attr.data-cy]=\"'detailContainer_menuButton'\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\" [attr.data-cy]=\"'detailContainer_body'\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.mobile{position:absolute;width:100%;gap:8px;padding-bottom:var(--gravity-spacing-lg)}.detail-container-content.mobile .detail-header{padding:var(--gravity-spacing-sm)}.detail-container-content.mobile .overflow-container{display:flex;flex-direction:column;padding:0 var(--gravity-spacing-md);gap:8px}.detail-container-content.mobile .overflow-container.has-scroll{padding:0 var(--gravity-spacing-xs) 0 var(--gravity-spacing-md)!important}.detail-container-content.mobile .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:16px!important}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .detail-header .back-button{display:flex;align-items:center;gap:4px;padding:var(--gravity-spacing-xs) 6px;color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.detail-container-content .detail-header .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.detail-container-content .detail-header .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.detail-container-content .detail-header .menu-button{--back-button-color: var(--bg-button-active-primary)}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:8px!important}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"] }]
|
|
7468
|
+
args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\"\n *ngIf=\"type === 'flyout' && mode === 'modal' && !gravityResponsiveService.isMobile()\"\n [class.open]=\"isOpen\" (click)=\"dismiss()\"></div>\n\n<div class=\"detail-container-content {{mode}} {{gravityResponsiveService.isMobile() ? 'mobile' : type}}\"\n [ngClass]=\"isOpen ? 'show' : 'dismiss'\" [style.height]=\"optionalHeight\"\n [attr.data-cy]=\"'detailContainer_' + cypressTag\">\n <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [attr.data-cy]=\"'detailContainer_backButton'\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--back-button-color)'\"></gravity-icon>\n <span class=\"hr-label md-regular\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n <p [ngClass]=\"gravityResponsiveService.isMobile() ? 'hr-body md-bold': type === 'flyout' ? 'hr-title md-bold' : 'hr-body lg-bold'\"\n [attr.data-cy]=\"'detailContainer_title'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\" [attr.data-cy]=\"'detailContainer_closeButton'\"/>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\"\n [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\" [attr.data-cy]=\"'detailContainer_menuButton'\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\" [attr.data-cy]=\"'detailContainer_body'\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.detail-container-content .overflow-container.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.detail-container-content .overflow-container.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.detail-container-backdrop{width:100%;height:100%;right:0;top:0;display:none;position:fixed;z-index:999;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.detail-container-backdrop.open{display:block}.detail-container-content{display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);background-color:var(--surface-secondary);transition:transform .3s ease-in-out,opacity .3s ease-in-out;inset:0 0 0 auto}.detail-container-content.flyout{width:480px;height:100%;padding:var(--gravity-spacing-lg) 0 var(--gravity-spacing-xl);gap:8px;border-left:2px solid var(--surface-primary)}.detail-container-content.flyout.standard{position:relative}.detail-container-content.flyout .overflow-container.has-scroll .detail-description,.detail-container-content.flyout .overflow-container.has-scroll .detail-body{padding:var(--gravity-spacing-xs) 8px var(--gravity-spacing-xs) var(--gravity-spacing-md)!important}.detail-container-content.flyout .detail-header{padding:0 var(--gravity-spacing-md)}.detail-container-content.flyout .detail-description,.detail-container-content.flyout .detail-body{width:100%;padding:var(--gravity-spacing-xs) var(--gravity-spacing-sm) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.detail-container-content.detail-view{width:300px;height:637px;max-height:637px;padding:var(--gravity-spacing-sm) 0;gap:16px;border:2px solid var(--surface-primary);margin-left:8px;border-radius:4.797px}.detail-container-content.detail-view.show{position:relative}.detail-container-content.detail-view .overflow-container.has-scroll .detail-body{padding:0 0 0 var(--gravity-spacing-sm)!important}.detail-container-content.detail-view .detail-header{padding:0 var(--gravity-spacing-sm)}.detail-container-content.detail-view .detail-body{padding:0 8px 0 var(--gravity-spacing-sm)}.detail-container-content.mobile{z-index:1;position:absolute;width:100%;gap:8px;padding-bottom:var(--gravity-spacing-lg)}.detail-container-content.mobile .detail-header{padding:var(--gravity-spacing-sm)}.detail-container-content.mobile .overflow-container{display:flex;flex-direction:column;padding:0 var(--gravity-spacing-md);gap:8px}.detail-container-content.mobile .overflow-container.has-scroll{padding:0 var(--gravity-spacing-xs) 0 var(--gravity-spacing-md)!important}.detail-container-content.mobile .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:16px!important}.detail-container-content.show{transform:translate(0);opacity:1}.detail-container-content.dismiss{transform:translate(100%);opacity:0;animation:setFixed 1s forwards}@keyframes setFixed{to{position:fixed}}.detail-container-content .detail-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.detail-container-content .detail-header .back-button{display:flex;align-items:center;gap:4px;padding:var(--gravity-spacing-xs) 6px;color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.detail-container-content .detail-header .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.detail-container-content .detail-header .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.detail-container-content .detail-header .menu-button{--back-button-color: var(--bg-button-active-primary)}.detail-container-content .overflow-container{flex:1;overflow-y:auto;margin-right:8px;width:calc(100% - 8px)}.detail-container-content .overflow-container.has-scroll:not(:hover){scrollbar-width:none;padding-right:8px!important}.detail-container-content .detail-actions{width:100%}.detail-container-content .detail-actions::ng-deep div{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-end;padding:var(--gravity-spacing-md) var(--gravity-spacing-md) 0;gap:var(--gravity-spacing-sm);border-top:2px solid var(--surface-primary)}\n"] }]
|
|
7469
7469
|
}], ctorParameters: function () { return [{ type: GravityResponsiveService }]; }, propDecorators: { cypressTag: [{
|
|
7470
7470
|
type: Input
|
|
7471
7471
|
}], title: [{
|
|
@@ -7596,11 +7596,11 @@ class GravityPushNotificationsComponent {
|
|
|
7596
7596
|
}
|
|
7597
7597
|
}
|
|
7598
7598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPushNotificationsComponent, deps: [{ token: PushNotificationsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7599
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: { userNotifications: "userNotifications" }, outputs: { viewedNotificationsResponse: "viewedNotificationsResponse" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{z-index:
|
|
7599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: { userNotifications: "userNotifications" }, outputs: { viewedNotificationsResponse: "viewedNotificationsResponse" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{z-index:102;display:block;position:absolute;top:42px!important;right:-16px!important;border-radius:.9375rem;border:1px solid rgba(0,0,0,.175);background-color:var(--bg-dialog-primary)}@media (min-width: 993px){.notifications-box{width:25rem}}@media (max-width: 992px){.notifications-box{width:19rem}}.notifications-box:before{top:-6px;z-index:1;content:\"\";right:23px;width:12px;height:12px;position:absolute;transform:rotate(45deg);border-left:1px solid rgba(0,0,0,.175);border-top:1px solid rgba(0,0,0,.175);background-color:var(--on-bg-highlight-neutro-primary)}.panel-header{display:flex;padding:1rem 2rem;justify-content:space-between;border-radius:.9375rem .9375rem 0 0;background-color:var(--on-bg-highlight-neutro-primary)}.panel-header p{font-weight:600;letter-spacing:1.023px;color:var(--on-bg-notification-list-primary)}.notifications{padding:.75rem 2rem;color:var(--text-primary)}.notifications .notification:last-of-type{padding-bottom:0}.notification{display:flex;padding-block:1rem;align-items:flex-start}.notification .notification-content{margin-left:1.5rem}.notification .notification-content .title{margin-bottom:.25rem}.notification .notification-content .title span.pending-notification-circle{width:.625rem;height:.625rem;min-width:.625rem;min-height:.625rem;margin-right:.25rem;display:inline-block;border-radius:1.5625rem;background-color:var(--notification-success-highlight-primary)}.notification .notification-content .body{overflow:hidden;text-overflow:ellipsis}@media (min-width: 993px){.notification .notification-content .body{width:18rem}}@media (max-width: 992px){.notification .notification-content .body{width:10rem}}.notification .notification-content .body.white-space-nowrap{white-space:nowrap}hr{margin:0;border-top-color:var(--divider-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
7600
7600
|
}
|
|
7601
7601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPushNotificationsComponent, decorators: [{
|
|
7602
7602
|
type: Component,
|
|
7603
|
-
args: [{ selector: 'gravity-push-notifications', template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{z-index:
|
|
7603
|
+
args: [{ selector: 'gravity-push-notifications', template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{z-index:102;display:block;position:absolute;top:42px!important;right:-16px!important;border-radius:.9375rem;border:1px solid rgba(0,0,0,.175);background-color:var(--bg-dialog-primary)}@media (min-width: 993px){.notifications-box{width:25rem}}@media (max-width: 992px){.notifications-box{width:19rem}}.notifications-box:before{top:-6px;z-index:1;content:\"\";right:23px;width:12px;height:12px;position:absolute;transform:rotate(45deg);border-left:1px solid rgba(0,0,0,.175);border-top:1px solid rgba(0,0,0,.175);background-color:var(--on-bg-highlight-neutro-primary)}.panel-header{display:flex;padding:1rem 2rem;justify-content:space-between;border-radius:.9375rem .9375rem 0 0;background-color:var(--on-bg-highlight-neutro-primary)}.panel-header p{font-weight:600;letter-spacing:1.023px;color:var(--on-bg-notification-list-primary)}.notifications{padding:.75rem 2rem;color:var(--text-primary)}.notifications .notification:last-of-type{padding-bottom:0}.notification{display:flex;padding-block:1rem;align-items:flex-start}.notification .notification-content{margin-left:1.5rem}.notification .notification-content .title{margin-bottom:.25rem}.notification .notification-content .title span.pending-notification-circle{width:.625rem;height:.625rem;min-width:.625rem;min-height:.625rem;margin-right:.25rem;display:inline-block;border-radius:1.5625rem;background-color:var(--notification-success-highlight-primary)}.notification .notification-content .body{overflow:hidden;text-overflow:ellipsis}@media (min-width: 993px){.notification .notification-content .body{width:18rem}}@media (max-width: 992px){.notification .notification-content .body{width:10rem}}.notification .notification-content .body.white-space-nowrap{white-space:nowrap}hr{margin:0;border-top-color:var(--divider-primary)}\n"] }]
|
|
7604
7604
|
}], ctorParameters: function () { return [{ type: PushNotificationsService }, { type: i0.ElementRef }]; }, propDecorators: { userNotifications: [{
|
|
7605
7605
|
type: Input
|
|
7606
7606
|
}], viewedNotificationsResponse: [{
|
|
@@ -7643,29 +7643,11 @@ class GravityHeaderComponent {
|
|
|
7643
7643
|
return this.resolution === 'xs' || this.resolution === 'sm' || this.resolution === 'md';
|
|
7644
7644
|
}
|
|
7645
7645
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityHeaderComponent, selector: "gravity-header", inputs: { title: "title", logoUrl: "logoUrl", longTitle: "longTitle", backButton: "backButton", breadCrumb: "breadCrumb", language: "language", notifications: "notifications", resolution: "resolution", userNotifications: "userNotifications", isMenuOpen: "isMenuOpen" }, outputs: { backButtonResponse: "backButtonResponse", toggleMenuResponse: "toggleMenuResponse", viewedNotificationsResponse: "viewedNotificationsResponse" }, ngImport: i0, template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && !isMobile() && breadCrumb?.list?.length < 1\" class=\"hr-headline md-bold xl-lg\">{{ title }}</h1>\n\n <span *ngIf=\"isMobile() && backButton\" class=\"'hr-body md-bold'\"> {{ longTitle }} </span>\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n <gravity-push-notifications *ngIf=\"notifications\" [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n\n <gravity-icon *ngIf=\"isMobile()\"
|
|
7647
|
-
trigger('iconToggle', [
|
|
7648
|
-
state('open', style({ opacity: 1, transform: 'rotate(90deg)' })),
|
|
7649
|
-
state('closed', style({ opacity: 1, transform: 'rotate(0deg)' })),
|
|
7650
|
-
transition('* <=> *', [
|
|
7651
|
-
animate('65ms ease-out', style({ opacity: .25, transform: 'rotate(45deg)' })),
|
|
7652
|
-
animate('65ms ease-in')
|
|
7653
|
-
])
|
|
7654
|
-
])
|
|
7655
|
-
] }); }
|
|
7646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityHeaderComponent, selector: "gravity-header", inputs: { title: "title", logoUrl: "logoUrl", longTitle: "longTitle", backButton: "backButton", breadCrumb: "breadCrumb", language: "language", notifications: "notifications", resolution: "resolution", userNotifications: "userNotifications", isMenuOpen: "isMenuOpen" }, outputs: { backButtonResponse: "backButtonResponse", toggleMenuResponse: "toggleMenuResponse", viewedNotificationsResponse: "viewedNotificationsResponse" }, ngImport: i0, template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl' )\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && !isMobile() && breadCrumb?.list?.length < 1\" class=\"hr-headline md-bold xl-lg\">{{ title }}</h1>\n\n <span *ngIf=\"isMobile() && backButton\" class=\"'hr-body md-bold'\"> {{ longTitle }} </span>\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n <gravity-push-notifications *ngIf=\"notifications\" [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n\n <gravity-icon *ngIf=\"isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n </div>\n </section>\n\n <section *ngIf=\"!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title\" class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n\n <section *ngIf=\"isMobile() && !backButton && title\" class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'lg-bold' : 'md-bold')\">{{ title }}</h1>\n </section>\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: ["userNotifications"], outputs: ["viewedNotificationsResponse"] }] }); }
|
|
7656
7647
|
}
|
|
7657
7648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityHeaderComponent, decorators: [{
|
|
7658
7649
|
type: Component,
|
|
7659
|
-
args: [{ selector: 'gravity-header',
|
|
7660
|
-
trigger('iconToggle', [
|
|
7661
|
-
state('open', style({ opacity: 1, transform: 'rotate(90deg)' })),
|
|
7662
|
-
state('closed', style({ opacity: 1, transform: 'rotate(0deg)' })),
|
|
7663
|
-
transition('* <=> *', [
|
|
7664
|
-
animate('65ms ease-out', style({ opacity: .25, transform: 'rotate(45deg)' })),
|
|
7665
|
-
animate('65ms ease-in')
|
|
7666
|
-
])
|
|
7667
|
-
])
|
|
7668
|
-
], template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && !isMobile() && breadCrumb?.list?.length < 1\" class=\"hr-headline md-bold xl-lg\">{{ title }}</h1>\n\n <span *ngIf=\"isMobile() && backButton\" class=\"'hr-body md-bold'\"> {{ longTitle }} </span>\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n <gravity-push-notifications *ngIf=\"notifications\" [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n\n <gravity-icon *ngIf=\"isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'lg-24'\"\n [iconName]=\"isMenuOpen ? 'unsuccess' : 'menu'\" (click)=\"toggleMenu()\"\n [@iconToggle]=\"iconToggle ? 'open' : 'closed'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title\" class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n\n <section *ngIf=\"isMobile() && !backButton && title\" class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'lg-bold' : 'md-bold')\">{{ title }}</h1>\n </section>\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{max-width:55px;max-height:29px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\n"] }]
|
|
7650
|
+
args: [{ selector: 'gravity-header', template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n <svg-icon *ngIf=\"isMobile() && logoUrl && !backButton\" class=\"logo-header\" [src]=\"logoUrl\"/>\n\n <div *ngIf=\"backButton && breadCrumb?.list?.length < 1\"\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\n\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n\n <div *ngIf=\"breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl' )\" class=\"breadcrumb\">\n <gravity-icon *ngIf=\"breadCrumb.icon\" class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n\n <ng-container *ngFor=\"let item of breadCrumb.list; let last = last; let i = index\">\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n </ng-container>\n </div>\n\n <h1 *ngIf=\"!backButton && !isMobile() && breadCrumb?.list?.length < 1\" class=\"hr-headline md-bold xl-lg\">{{ title }}</h1>\n\n <span *ngIf=\"isMobile() && backButton\" class=\"'hr-body md-bold'\"> {{ longTitle }} </span>\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n <gravity-push-notifications *ngIf=\"notifications\" [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n\n <gravity-icon *ngIf=\"isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n </div>\n </section>\n\n <section *ngIf=\"!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title\" class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n\n <section *ngIf=\"isMobile() && !backButton && title\" class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'lg-bold' : 'md-bold')\">{{ title }}</h1>\n </section>\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\n"] }]
|
|
7669
7651
|
}], propDecorators: { title: [{
|
|
7670
7652
|
type: Input
|
|
7671
7653
|
}], logoUrl: [{
|
|
@@ -7697,10 +7679,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7697
7679
|
class GravityMenuComponent {
|
|
7698
7680
|
constructor() {
|
|
7699
7681
|
this.isOpen = false;
|
|
7682
|
+
this.showCloseButton = true;
|
|
7700
7683
|
this.maxCardButtonsPerRow = 3;
|
|
7701
7684
|
this.size = 'xl';
|
|
7702
7685
|
this.mainFooterAction = null;
|
|
7703
|
-
this.
|
|
7686
|
+
this.close = new EventEmitter();
|
|
7687
|
+
this.selected = new EventEmitter();
|
|
7704
7688
|
}
|
|
7705
7689
|
ngAfterViewInit() {
|
|
7706
7690
|
const el = this.menuBody.nativeElement;
|
|
@@ -7717,14 +7701,19 @@ class GravityMenuComponent {
|
|
|
7717
7701
|
}
|
|
7718
7702
|
selectOption(option) {
|
|
7719
7703
|
this.selectedOption = option;
|
|
7704
|
+
this.selected.emit();
|
|
7705
|
+
}
|
|
7706
|
+
closeMenu() {
|
|
7707
|
+
this.close.emit();
|
|
7720
7708
|
}
|
|
7721
|
-
|
|
7709
|
+
toggleMenuHeader(header) {
|
|
7722
7710
|
if (header.headerOptions?.length > 0) {
|
|
7723
7711
|
header.collapsed = !header.collapsed;
|
|
7724
7712
|
setTimeout(() => this.updateOverflow(), 0);
|
|
7725
7713
|
}
|
|
7726
7714
|
else {
|
|
7727
7715
|
this.selectedOption = null;
|
|
7716
|
+
this.selected.emit();
|
|
7728
7717
|
}
|
|
7729
7718
|
}
|
|
7730
7719
|
updateOverflow() {
|
|
@@ -7742,11 +7731,11 @@ class GravityMenuComponent {
|
|
|
7742
7731
|
return rows;
|
|
7743
7732
|
}
|
|
7744
7733
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7745
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMenuComponent, selector: "gravity-menu", inputs: { logoUrl: "logoUrl", items: "items", userInfo: "userInfo", isOpen: "isOpen", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { closeMenu: "closeMenu" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\">\n <div *ngIf=\"size === 'xl' || size === 'lg'\" class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\" (click)=\"action.callback()\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n (clicked)=\"button.callback()\" [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{z-index:3;width:100%;max-width:100%;position:fixed;margin-top:96px;min-width:577px;height:calc(100% - 96px);transform:translate(101%);transition:transform .25s ease-in-out;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }] }); }
|
|
7734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMenuComponent, selector: "gravity-menu", inputs: { logoUrl: "logoUrl", items: "items", userInfo: "userInfo", isOpen: "isOpen", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\" (click)=\"action.callback()\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n (clicked)=\"button.callback(); selected.emit()\" [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:70px;height:28px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transform:translate(101%);transition:transform .165s ease-in-out;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }] }); }
|
|
7746
7735
|
}
|
|
7747
7736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMenuComponent, decorators: [{
|
|
7748
7737
|
type: Component,
|
|
7749
|
-
args: [{ selector: 'gravity-menu', template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\">\n <div *ngIf=\"size === 'xl' || size === 'lg'\" class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu.emit()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\" (click)=\"action.callback()\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n (clicked)=\"button.callback()\" [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 22px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:auto;height:24px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{z-index:3;width:100%;max-width:100%;position:fixed;margin-top:96px;min-width:577px;height:calc(100% - 96px);transform:translate(101%);transition:transform .25s ease-in-out;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{margin-bottom:20px;padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0)}.gravity-menu.sm{min-width:320px;max-width:576px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
7738
|
+
args: [{ selector: 'gravity-menu', template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\">\n <div class=\"menu-logo\">\n <svg-icon *ngIf=\"logoUrl\" [src]=\"logoUrl\" />\n <gravity-icon *ngIf=\"(size === 'md' || size === 'sm') && showCloseButton\"\n [iconSize]=\"'md-16'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\">\n <div class=\"menu-section\">\n <div class=\"levels\" *ngFor=\"let header of items\">\n <section class=\"first-level\" [class.is-open]=\"!header.collapsed\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header)\">\n <p class=\"hr-label sm-regular\">\n <gravity-icon *ngIf=\"header.icon !== ''\" [iconName]=\"header.icon\" [iconSize]=\"size === 'lg' ? 'sm-12' : 'md-16'\"/>\n {{header.text}}\n </p>\n\n <div class=\"toggle\">\n <span *ngIf=\"header.badged\" class=\"badge\"></span>\n <gravity-icon *ngIf=\"header.headerOptions?.length > 0\" [iconSize]=\"'sm-12'\"\n [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n </div>\n </section>\n\n <section *ngIf=\"!header.collapsed && header.headerOptions?.length > 0\" class=\"second-level\" [@fadeSlide]>\n <div class=\"options-list\">\n <ng-container *ngFor=\"let option of header.headerOptions\">\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\" [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <span class=\"hr-label sm-regular\" [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option)\">{{option.text}}</span>\n </div>\n </ng-container>\n </div>\n </section>\n </div>\n </div>\n </section>\n\n <section *ngIf=\"(secondaryActions || userInfo) && (size === 'xl' || size === 'lg')\" class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n <div *ngIf=\"secondaryActions\" class=\"secondary-actions\">\n <div class=\"action\" *ngFor=\"let action of secondaryActions\" (click)=\"action.callback()\">\n <gravity-icon *ngIf=\"action.icon !== ''\" [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n <span class=\"hr-label sm-regular\">{{action.text}}</span>\n </div>\n </div>\n\n <hr *ngIf=\"secondaryActions && userInfo\" class=\"separator-line\">\n\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon *ngIf=\"userInfo.icon !== ''\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n <section *ngIf=\"(cardButtons || userInfo) && (size === 'md' || size === 'sm')\" class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n <div *ngIf=\"cardButtons\" class=\"secondary-actions\">\n <div class=\"card-buttons\">\n <div class=\"card-buttons-row\" *ngFor=\"let row of getCardButtonsRows()\">\n <gravity-card-button *ngFor=\"let button of row\" [type]=\"'secondary'\"\n (clicked)=\"button.callback(); selected.emit()\" [orientation]=\"'vrt-center'\" [iconName]=\"button.icon\" [label]=\"button.text\"/>\n </div>\n </div>\n <gravity-button *ngIf=\"mainFooterAction\" [size]=\"'md'\" [type]=\"'tertiary'\" [iconName]=\"mainFooterAction.icon\"\n [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\"> {{mainFooterAction.text}} </gravity-button>\n </div>\n <div *ngIf=\"userInfo\" class=\"user-info-list\">\n <div *ngFor=\"let userInfo of userInfo\" class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{userInfo.info}}</span>\n </div>\n </div>\n </section>\n </section>\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-menu{height:100%;max-width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);margin-right:var(--gravity-spacing-xs)}.gravity-menu .menu-logo{width:100%;display:flex;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-logo gravity-icon{cursor:pointer}.gravity-menu .menu-logo svg{width:70px;height:28px}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 20px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p,.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level .toggle .badge{width:var(--gravity-spacing-xs);height:var(--gravity-spacing-xs);border-radius:6.25rem;background-color:var(--bg-menu-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:not(.is-open):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);background-color:var(--bg-menu-primary)}.gravity-menu .menu-content .menu-footer .footer-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:220px;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.lg{max-width:246px}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;z-index:101;max-width:100%;position:fixed;min-width:577px;transform:translate(101%);transition:transform .165s ease-in-out;background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;border-radius:.3125rem;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option span.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .card-buttons .card-buttons-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions ::ng-deep gravity-card-button .card-button-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
7750
7739
|
}], propDecorators: { logoUrl: [{
|
|
7751
7740
|
type: Input
|
|
7752
7741
|
}], items: [{
|
|
@@ -7755,6 +7744,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7755
7744
|
type: Input
|
|
7756
7745
|
}], isOpen: [{
|
|
7757
7746
|
type: Input
|
|
7747
|
+
}], showCloseButton: [{
|
|
7748
|
+
type: Input
|
|
7758
7749
|
}], cardButtons: [{
|
|
7759
7750
|
type: Input
|
|
7760
7751
|
}], maxCardButtonsPerRow: [{
|
|
@@ -7765,13 +7756,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7765
7756
|
type: Input
|
|
7766
7757
|
}], mainFooterAction: [{
|
|
7767
7758
|
type: Input
|
|
7768
|
-
}],
|
|
7759
|
+
}], close: [{
|
|
7760
|
+
type: Output
|
|
7761
|
+
}], selected: [{
|
|
7769
7762
|
type: Output
|
|
7770
7763
|
}], menuBody: [{
|
|
7771
7764
|
type: ViewChild,
|
|
7772
7765
|
args: ['menuBody', { static: false }]
|
|
7773
7766
|
}] } });
|
|
7774
7767
|
|
|
7768
|
+
class GravityPaginationComponent {
|
|
7769
|
+
constructor() {
|
|
7770
|
+
this.currentLang = 'en';
|
|
7771
|
+
this.currentPage = 1;
|
|
7772
|
+
this.type = 'full';
|
|
7773
|
+
this.showPageCount = true;
|
|
7774
|
+
this.showArrowDots = true;
|
|
7775
|
+
this.pageChanged = new EventEmitter();
|
|
7776
|
+
this.totalPages = 0;
|
|
7777
|
+
this.pages = [];
|
|
7778
|
+
}
|
|
7779
|
+
ngOnChanges(changes) {
|
|
7780
|
+
this.updatePages();
|
|
7781
|
+
}
|
|
7782
|
+
updatePages() {
|
|
7783
|
+
this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
|
|
7784
|
+
const pages = [];
|
|
7785
|
+
const first = 1;
|
|
7786
|
+
const last = this.totalPages;
|
|
7787
|
+
// UNDER 5 PAGES
|
|
7788
|
+
if (this.totalPages <= 5) {
|
|
7789
|
+
this.pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
|
|
7790
|
+
return;
|
|
7791
|
+
}
|
|
7792
|
+
// DOTS CASE
|
|
7793
|
+
if (this.type === 'dots') {
|
|
7794
|
+
this.pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
|
|
7795
|
+
return;
|
|
7796
|
+
}
|
|
7797
|
+
// INITIAL SECTION (pages 1–3)
|
|
7798
|
+
if (this.currentPage <= 3) {
|
|
7799
|
+
pages.push(1);
|
|
7800
|
+
if (this.totalPages >= 2)
|
|
7801
|
+
pages.push(2);
|
|
7802
|
+
if (this.totalPages >= 3)
|
|
7803
|
+
pages.push(3);
|
|
7804
|
+
if (this.totalPages >= 4)
|
|
7805
|
+
pages.push(4);
|
|
7806
|
+
if (this.totalPages > 5) {
|
|
7807
|
+
pages.push('...');
|
|
7808
|
+
pages.push(last);
|
|
7809
|
+
}
|
|
7810
|
+
else {
|
|
7811
|
+
for (let i = 5; i <= last; i++)
|
|
7812
|
+
pages.push(i);
|
|
7813
|
+
}
|
|
7814
|
+
this.pages = pages;
|
|
7815
|
+
return;
|
|
7816
|
+
}
|
|
7817
|
+
// FINAL SECTION (last 3 pages)
|
|
7818
|
+
if (this.currentPage >= last - 2) {
|
|
7819
|
+
pages.push(first);
|
|
7820
|
+
pages.push('...');
|
|
7821
|
+
const start = last - 3; // example: 10 → 7
|
|
7822
|
+
for (let p = start; p <= last; p++) {
|
|
7823
|
+
if (p > 1)
|
|
7824
|
+
pages.push(p);
|
|
7825
|
+
}
|
|
7826
|
+
this.pages = pages;
|
|
7827
|
+
return;
|
|
7828
|
+
}
|
|
7829
|
+
// MIDDLE PART (neither at the beginning nor at the end)
|
|
7830
|
+
pages.push(first);
|
|
7831
|
+
pages.push('...');
|
|
7832
|
+
const prev = this.currentPage - 1;
|
|
7833
|
+
const next = this.currentPage + 1;
|
|
7834
|
+
pages.push(prev);
|
|
7835
|
+
pages.push(this.currentPage);
|
|
7836
|
+
pages.push(next);
|
|
7837
|
+
pages.push('...');
|
|
7838
|
+
pages.push(last);
|
|
7839
|
+
this.pages = pages;
|
|
7840
|
+
}
|
|
7841
|
+
changePage(page) {
|
|
7842
|
+
if (page < 1 || page > this.totalPages || page === this.currentPage || String(page) == '...')
|
|
7843
|
+
return;
|
|
7844
|
+
this.currentPage = page;
|
|
7845
|
+
this.updatePages();
|
|
7846
|
+
this.pageChanged.emit({
|
|
7847
|
+
page: this.currentPage,
|
|
7848
|
+
itemsPerPage: this.itemsPerPage
|
|
7849
|
+
});
|
|
7850
|
+
}
|
|
7851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityPaginationComponent, selector: "gravity-pagination", inputs: { currentLang: "currentLang", cypressTag: "cypressTag", totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", type: "type", showPageCount: "showPageCount", showArrowDots: "showArrowDots" }, outputs: { pageChanged: "pageChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-pagination-container\" [attr.data-cy]=\"cypressTag ? 'pagination_' + cypressTag : null\">\n <!-- First -->\n <div class=\"paginator-button-container\" (click)=\"changePage(1)\" [attr.data-cy]=\"'pagination_firstButton'\"\n *ngIf=\"type != 'dots' && currentPage != 1 && totalPages > 5 || type == 'page-count'\">\n <gravity-icon [iconName]=\"'chevron-double-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'First' : 'Primero' }}</p>\n </div>\n\n <!-- Back -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === 1\" [attr.data-cy]=\"'pagination_backButton'\"\n (click)=\"changePage(currentPage - 1)\" *ngIf=\"showArrowDots\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Back' : 'Atr\u00E1s' }}</p>\n </div>\n\n <!-- Numbers and Ellipsis -->\n <ng-container *ngIf=\"type == 'full' || type == 'compact'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"paginator-button-container\"\n [class.no-click]=\"p.toString() == '...'\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'Button'\">\n <p class=\"hr-body sm-regular\">{{ p }}</p>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Page count -->\n <div class=\"paginator-button-container no-click\" *ngIf=\"type === 'page-count' && showPageCount\">\n <p class=\"hr-body sm-regular\">{{ currentPage + (currentLang == 'en' ? ' of ' : ' de ') + totalPages }}</p>\n </div>\n\n <!-- Dots -->\n <div class=\"dots-container\" *ngIf=\"type === 'dots'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"dot\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'DotsButton'\"></div>\n </ng-container>\n </div>\n\n <!-- Next -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === totalPages\"\n [attr.data-cy]=\"'pagination_nextButton'\"\n (click)=\"changePage(currentPage + 1)\" *ngIf=\"showArrowDots\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Next' : 'Siguiente' }}</p>\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n\n <!-- Last -->\n <div class=\"paginator-button-container\" (click)=\"changePage(totalPages)\" [attr.data-cy]=\"'pagination_lastButton'\"\n *ngIf=\"type != 'dots' && currentPage !== totalPages && totalPages > 5 || type == 'page-count'\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Last' : '\u00DAltimo' }}</p>\n <gravity-icon [iconName]=\"'chevron-double-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n</div>\n", styles: [":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}.gravity-pagination-container{display:flex;align-items:center}.gravity-pagination-container .paginator-button-container{--paginator-button-text-color: var(--on-bg-button-pressed-tertiary);display:flex;height:32px;padding:10px 12px;justify-content:center;align-items:center;gap:var(--gravity-spacing-xxs);cursor:pointer;border-radius:.3125rem;background-color:var(--paginator-button-background-color)}.gravity-pagination-container .paginator-button-container p{color:var(--paginator-button-text-color)}.gravity-pagination-container .paginator-button-container:not(.disabled):not(.pressed):not(.no-click):hover,.gravity-pagination-container .paginator-button-container.hover{--paginator-button-background-color: var(--bg-button-active-tertiary);--paginator-button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-pagination-container .paginator-button-container:not(.disabled).pressed{--paginator-button-background-color: var(--bg-button-pressed-primary);--paginator-button-text-color: var(--on-bg-button-pressed-primary)}.gravity-pagination-container .paginator-button-container.disabled{--paginator-button-text-color: var(--on-bg-disabled);cursor:default!important}.gravity-pagination-container .paginator-button-container.no-click{cursor:default!important}.dots-container{display:flex;padding:8px;align-items:center;gap:8px}.dots-container .dot{width:8px;height:8px;border-radius:99px;background-color:var(--on-bg-button-pressed-secondary);opacity:.3;cursor:pointer;transition:opacity .5s,background-color .5s,width .5s;transition-delay:.5s,.5s,0s}.dots-container .dot.pressed{opacity:1;background-color:var(--cta-primary);width:24px;transition-delay:0s}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
7853
|
+
}
|
|
7854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPaginationComponent, decorators: [{
|
|
7855
|
+
type: Component,
|
|
7856
|
+
args: [{ selector: 'gravity-pagination', template: "<div class=\"gravity-pagination-container\" [attr.data-cy]=\"cypressTag ? 'pagination_' + cypressTag : null\">\n <!-- First -->\n <div class=\"paginator-button-container\" (click)=\"changePage(1)\" [attr.data-cy]=\"'pagination_firstButton'\"\n *ngIf=\"type != 'dots' && currentPage != 1 && totalPages > 5 || type == 'page-count'\">\n <gravity-icon [iconName]=\"'chevron-double-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'First' : 'Primero' }}</p>\n </div>\n\n <!-- Back -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === 1\" [attr.data-cy]=\"'pagination_backButton'\"\n (click)=\"changePage(currentPage - 1)\" *ngIf=\"showArrowDots\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Back' : 'Atr\u00E1s' }}</p>\n </div>\n\n <!-- Numbers and Ellipsis -->\n <ng-container *ngIf=\"type == 'full' || type == 'compact'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"paginator-button-container\"\n [class.no-click]=\"p.toString() == '...'\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'Button'\">\n <p class=\"hr-body sm-regular\">{{ p }}</p>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Page count -->\n <div class=\"paginator-button-container no-click\" *ngIf=\"type === 'page-count' && showPageCount\">\n <p class=\"hr-body sm-regular\">{{ currentPage + (currentLang == 'en' ? ' of ' : ' de ') + totalPages }}</p>\n </div>\n\n <!-- Dots -->\n <div class=\"dots-container\" *ngIf=\"type === 'dots'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"dot\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'DotsButton'\"></div>\n </ng-container>\n </div>\n\n <!-- Next -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === totalPages\"\n [attr.data-cy]=\"'pagination_nextButton'\"\n (click)=\"changePage(currentPage + 1)\" *ngIf=\"showArrowDots\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Next' : 'Siguiente' }}</p>\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n\n <!-- Last -->\n <div class=\"paginator-button-container\" (click)=\"changePage(totalPages)\" [attr.data-cy]=\"'pagination_lastButton'\"\n *ngIf=\"type != 'dots' && currentPage !== totalPages && totalPages > 5 || type == 'page-count'\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Last' : '\u00DAltimo' }}</p>\n <gravity-icon [iconName]=\"'chevron-double-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n</div>\n", styles: [":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}.gravity-pagination-container{display:flex;align-items:center}.gravity-pagination-container .paginator-button-container{--paginator-button-text-color: var(--on-bg-button-pressed-tertiary);display:flex;height:32px;padding:10px 12px;justify-content:center;align-items:center;gap:var(--gravity-spacing-xxs);cursor:pointer;border-radius:.3125rem;background-color:var(--paginator-button-background-color)}.gravity-pagination-container .paginator-button-container p{color:var(--paginator-button-text-color)}.gravity-pagination-container .paginator-button-container:not(.disabled):not(.pressed):not(.no-click):hover,.gravity-pagination-container .paginator-button-container.hover{--paginator-button-background-color: var(--bg-button-active-tertiary);--paginator-button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-pagination-container .paginator-button-container:not(.disabled).pressed{--paginator-button-background-color: var(--bg-button-pressed-primary);--paginator-button-text-color: var(--on-bg-button-pressed-primary)}.gravity-pagination-container .paginator-button-container.disabled{--paginator-button-text-color: var(--on-bg-disabled);cursor:default!important}.gravity-pagination-container .paginator-button-container.no-click{cursor:default!important}.dots-container{display:flex;padding:8px;align-items:center;gap:8px}.dots-container .dot{width:8px;height:8px;border-radius:99px;background-color:var(--on-bg-button-pressed-secondary);opacity:.3;cursor:pointer;transition:opacity .5s,background-color .5s,width .5s;transition-delay:.5s,.5s,0s}.dots-container .dot.pressed{opacity:1;background-color:var(--cta-primary);width:24px;transition-delay:0s}\n"] }]
|
|
7857
|
+
}], propDecorators: { currentLang: [{
|
|
7858
|
+
type: Input
|
|
7859
|
+
}], cypressTag: [{
|
|
7860
|
+
type: Input
|
|
7861
|
+
}], totalItems: [{
|
|
7862
|
+
type: Input
|
|
7863
|
+
}], itemsPerPage: [{
|
|
7864
|
+
type: Input
|
|
7865
|
+
}], currentPage: [{
|
|
7866
|
+
type: Input
|
|
7867
|
+
}], type: [{
|
|
7868
|
+
type: Input
|
|
7869
|
+
}], showPageCount: [{
|
|
7870
|
+
type: Input
|
|
7871
|
+
}], showArrowDots: [{
|
|
7872
|
+
type: Input
|
|
7873
|
+
}], pageChanged: [{
|
|
7874
|
+
type: Output
|
|
7875
|
+
}] } });
|
|
7876
|
+
|
|
7775
7877
|
class GravityDesignSystemModule {
|
|
7776
7878
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7777
7879
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
|
|
@@ -7838,6 +7940,7 @@ class GravityDesignSystemModule {
|
|
|
7838
7940
|
GravitySegmentedButtonComponent,
|
|
7839
7941
|
GravityCurrencyDisplayV2Component,
|
|
7840
7942
|
GravityHeaderComponent,
|
|
7943
|
+
GravityPaginationComponent,
|
|
7841
7944
|
GravityPushNotificationsComponent,
|
|
7842
7945
|
GravityMenuComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, BsDatepickerModule,
|
|
7843
7946
|
CommonModule,
|
|
@@ -7887,6 +7990,7 @@ class GravityDesignSystemModule {
|
|
|
7887
7990
|
GravityDatePickerComponent,
|
|
7888
7991
|
GravitySegmentedButtonComponent,
|
|
7889
7992
|
GravityHeaderComponent,
|
|
7993
|
+
GravityPaginationComponent,
|
|
7890
7994
|
GravityPushNotificationsComponent,
|
|
7891
7995
|
GravityMenuComponent] }); }
|
|
7892
7996
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
|
|
@@ -7971,6 +8075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7971
8075
|
GravitySegmentedButtonComponent,
|
|
7972
8076
|
GravityCurrencyDisplayV2Component,
|
|
7973
8077
|
GravityHeaderComponent,
|
|
8078
|
+
GravityPaginationComponent,
|
|
7974
8079
|
GravityPushNotificationsComponent,
|
|
7975
8080
|
GravityMenuComponent,
|
|
7976
8081
|
],
|
|
@@ -8032,6 +8137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8032
8137
|
GravityDatePickerComponent,
|
|
8033
8138
|
GravitySegmentedButtonComponent,
|
|
8034
8139
|
GravityHeaderComponent,
|
|
8140
|
+
GravityPaginationComponent,
|
|
8035
8141
|
GravityPushNotificationsComponent,
|
|
8036
8142
|
GravityMenuComponent,
|
|
8037
8143
|
]
|
|
@@ -8088,5 +8194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8088
8194
|
* Generated bundle index. Do not edit.
|
|
8089
8195
|
*/
|
|
8090
8196
|
|
|
8091
|
-
export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityBackdropComponent, GravityButtonComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCheckboxComponent, GravityChipGroupComponent, GravityCurrencyComponent, GravityCurrencyDisplayV2Component, GravityDataViewsV2Component, GravityDatePickerComponent, GravityDesignSystemModule, GravityDetailContainerComponent, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityGenericAvatarSecondaryComponent, GravityHeaderComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityMenuComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityPushNotificationsComponent, GravityRadioButtonComponent, GravitySegmentedButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTablesV2Component, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
|
|
8197
|
+
export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityBackdropComponent, GravityButtonComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCheckboxComponent, GravityChipGroupComponent, GravityCurrencyComponent, GravityCurrencyDisplayV2Component, GravityDataViewsV2Component, GravityDatePickerComponent, GravityDesignSystemModule, GravityDetailContainerComponent, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityGenericAvatarSecondaryComponent, GravityHeaderComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityMenuComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityPaginationComponent, GravityPushNotificationsComponent, GravityRadioButtonComponent, GravitySegmentedButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTablesV2Component, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
|
|
8092
8198
|
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|