@progressio_resources/gravity-design-system 3.6.5 → 3.6.6
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 +54 -12
- package/esm2022/lib/services/gravity-responsive.service.mjs +47 -0
- package/fesm2022/progressio_resources-gravity-design-system.mjs +93 -8
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-detail-container/gravity-detail-container.component.d.ts +13 -3
- package/lib/services/gravity-responsive.service.d.ts +11 -0
- package/package.json +1 -1
package/esm2022/lib/components/gravity-detail-container/gravity-detail-container.component.mjs
CHANGED
|
@@ -1,36 +1,71 @@
|
|
|
1
|
-
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
1
|
+
import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "
|
|
4
|
-
import * as i2 from "
|
|
3
|
+
import * as i1 from "../../services/gravity-responsive.service";
|
|
4
|
+
import * as i2 from "@angular/common";
|
|
5
|
+
import * as i3 from "../gravity-icon-button/gravity-icon-button.component";
|
|
6
|
+
import * as i4 from "../gravity-icon/gravity-icon.component";
|
|
5
7
|
export class GravityDetailContainerComponent {
|
|
6
|
-
constructor() {
|
|
8
|
+
constructor(gravityResponsiveService) {
|
|
9
|
+
this.gravityResponsiveService = gravityResponsiveService;
|
|
7
10
|
this.title = '';
|
|
8
11
|
this.description = '';
|
|
9
12
|
this.type = 'flyout';
|
|
13
|
+
this.language = 'en';
|
|
10
14
|
this.closed = new EventEmitter();
|
|
15
|
+
this.menuEvent = new EventEmitter();
|
|
11
16
|
this.isOpen = false;
|
|
17
|
+
this.resizeObserver = null;
|
|
18
|
+
this.onResize();
|
|
19
|
+
}
|
|
20
|
+
onResize() {
|
|
21
|
+
this.gravityResponsiveService.currentResolutionWidth = window.innerWidth;
|
|
22
|
+
this.checkHasScroll();
|
|
12
23
|
}
|
|
13
24
|
open() {
|
|
14
25
|
this.isOpen = true;
|
|
26
|
+
this.checkHasScroll();
|
|
15
27
|
}
|
|
16
28
|
dismiss() {
|
|
17
29
|
this.isOpen = false;
|
|
18
30
|
this.closed.emit();
|
|
19
31
|
}
|
|
32
|
+
menu() {
|
|
33
|
+
this.menuEvent.emit();
|
|
34
|
+
}
|
|
20
35
|
ngAfterViewInit() {
|
|
21
|
-
const el = this.containerRef
|
|
22
|
-
|
|
36
|
+
const el = this.containerRef?.nativeElement;
|
|
37
|
+
if (!el)
|
|
38
|
+
return;
|
|
39
|
+
const update = () => {
|
|
40
|
+
requestAnimationFrame(() => {
|
|
41
|
+
el.classList.toggle('has-scroll', el.scrollHeight > el.clientHeight);
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
this.resizeObserver = new ResizeObserver(update);
|
|
45
|
+
this.resizeObserver.observe(el);
|
|
46
|
+
update();
|
|
47
|
+
}
|
|
48
|
+
checkHasScroll() {
|
|
49
|
+
const el = this.containerRef?.nativeElement;
|
|
50
|
+
if (!el)
|
|
51
|
+
return;
|
|
52
|
+
requestAnimationFrame(() => {
|
|
23
53
|
el.classList.toggle('has-scroll', el.scrollHeight > el.clientHeight);
|
|
24
54
|
});
|
|
25
|
-
observer.observe(el);
|
|
26
55
|
}
|
|
27
|
-
|
|
28
|
-
|
|
56
|
+
ngOnDestroy() {
|
|
57
|
+
if (this.resizeObserver) {
|
|
58
|
+
this.resizeObserver.disconnect();
|
|
59
|
+
this.resizeObserver = null;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, deps: [{ token: i1.GravityResponsiveService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
63
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDetailContainerComponent, selector: "gravity-detail-container", inputs: { title: "title", description: "description", mode: "mode", type: "type", optionalHeight: "optionalHeight", 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\" *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 <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\">\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'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\"></gravity-icon-button>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "component", type: i4.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
29
64
|
}
|
|
30
65
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, decorators: [{
|
|
31
66
|
type: Component,
|
|
32
|
-
args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\" *ngIf=\"type === 'flyout' && mode === 'modal'\"
|
|
33
|
-
}], propDecorators: { title: [{
|
|
67
|
+
args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\" *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 <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\">\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'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\"></gravity-icon-button>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.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"] }]
|
|
68
|
+
}], ctorParameters: function () { return [{ type: i1.GravityResponsiveService }]; }, propDecorators: { title: [{
|
|
34
69
|
type: Input
|
|
35
70
|
}], description: [{
|
|
36
71
|
type: Input
|
|
@@ -40,10 +75,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
40
75
|
type: Input
|
|
41
76
|
}], optionalHeight: [{
|
|
42
77
|
type: Input
|
|
78
|
+
}], language: [{
|
|
79
|
+
type: Input
|
|
43
80
|
}], closed: [{
|
|
44
81
|
type: Output
|
|
82
|
+
}], menuEvent: [{
|
|
83
|
+
type: Output
|
|
45
84
|
}], containerRef: [{
|
|
46
85
|
type: ViewChild,
|
|
47
86
|
args: ['containerRef']
|
|
87
|
+
}], onResize: [{
|
|
88
|
+
type: HostListener,
|
|
89
|
+
args: ['window:resize', ['$event']]
|
|
48
90
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1kZXRhaWwtY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2dyYXZpdHktZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvZ3Jhdml0eS1kZXRhaWwtY29udGFpbmVyL2dyYXZpdHktZGV0YWlsLWNvbnRhaW5lci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktZGV0YWlsLWNvbnRhaW5lci9ncmF2aXR5LWRldGFpbC1jb250YWluZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFFVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNWLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFRdkIsTUFBTSxPQUFPLCtCQUErQjtJQWdCMUMsWUFBNEIsd0JBQWtEO1FBQWxELDZCQUF3QixHQUF4Qix3QkFBd0IsQ0FBMEI7UUFmckUsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUV6QixTQUFJLEdBQTZCLFFBQVEsQ0FBQztRQUVuQyxhQUFRLEdBQWdCLElBQUksQ0FBQztRQUVuQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNsQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUl4QyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2QsbUJBQWMsR0FBMEIsSUFBSSxDQUFDO1FBR25ELElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBR08sUUFBUTtRQUNkLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxzQkFBc0IsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDO1FBQ3pFLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRU0sSUFBSTtRQUNULElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ25CLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRU0sT0FBTztRQUNaLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVNLElBQUk7UUFDVCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRCxlQUFlO1FBQ2IsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxhQUFhLENBQUM7UUFDNUMsSUFBSSxDQUFDLEVBQUU7WUFBRSxPQUFPO1FBRWhCLE1BQU0sTUFBTSxHQUFHLEdBQUcsRUFBRTtZQUNsQixxQkFBcUIsQ0FBQyxHQUFHLEVBQUU7Z0JBQ3pCLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUMsWUFBWSxHQUFHLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQztZQUN2RSxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQztRQUVGLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxjQUFjLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDakQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUM7UUFFaEMsTUFBTSxFQUFFLENBQUM7SUFDWCxDQUFDO0lBRU8sY0FBYztRQUNwQixNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLGFBQWEsQ0FBQztRQUM1QyxJQUFJLENBQUMsRUFBRTtZQUFFLE9BQU87UUFDaEIscUJBQXFCLENBQUMsR0FBRyxFQUFFO1lBQ3pCLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUMsWUFBWSxHQUFHLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUN2RSxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7U0FDNUI7SUFDSCxDQUFDOytHQXJFVSwrQkFBK0I7bUdBQS9CLCtCQUErQiwrYUNqQjVDLGswREFnQ0E7OzRGRGZhLCtCQUErQjtrQkFMM0MsU0FBUzsrQkFDRSwwQkFBMEI7K0dBSzNCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLO2dCQUVJLE1BQU07c0JBQWYsTUFBTTtnQkFDRyxTQUFTO3NCQUFsQixNQUFNO2dCQUVvQixZQUFZO3NCQUF0QyxTQUFTO3VCQUFDLGNBQWM7Z0JBVWpCLFFBQVE7c0JBRGYsWUFBWTt1QkFBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCwgT25EZXN0cm95LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7R3Jhdml0eVJlc3BvbnNpdmVTZXJ2aWNlfSBmcm9tIFwiLi4vLi4vc2VydmljZXMvZ3Jhdml0eS1yZXNwb25zaXZlLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhdml0eS1kZXRhaWwtY29udGFpbmVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyYXZpdHktZGV0YWlsLWNvbnRhaW5lci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2dyYXZpdHktZGV0YWlsLWNvbnRhaW5lci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEdyYXZpdHlEZXRhaWxDb250YWluZXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3l7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBtb2RlOiAnbW9kYWwnIHwgJ3N0YW5kYXJkJztcbiAgQElucHV0KCkgdHlwZTogJ2ZseW91dCcgfCAnZGV0YWlsLXZpZXcnID0gJ2ZseW91dCc7XG4gIEBJbnB1dCgpIG9wdGlvbmFsSGVpZ2h0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyBsYW5ndWFnZTogJ2VuJyB8ICdlcycgPSAnZW4nO1xuXG4gIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBtZW51RXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgQFZpZXdDaGlsZCgnY29udGFpbmVyUmVmJykgY29udGFpbmVyUmVmOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcblxuICBwdWJsaWMgaXNPcGVuID0gZmFsc2U7XG4gIHByaXZhdGUgcmVzaXplT2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyIHwgbnVsbCA9IG51bGw7XG5cbiAgY29uc3RydWN0b3IocHVibGljIHJlYWRvbmx5IGdyYXZpdHlSZXNwb25zaXZlU2VydmljZTogR3Jhdml0eVJlc3BvbnNpdmVTZXJ2aWNlKSB7XG4gICAgdGhpcy5vblJlc2l6ZSgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScsIFsnJGV2ZW50J10pXG4gIHByaXZhdGUgb25SZXNpemUoKTogdm9pZCB7XG4gICAgdGhpcy5ncmF2aXR5UmVzcG9uc2l2ZVNlcnZpY2UuY3VycmVudFJlc29sdXRpb25XaWR0aCA9IHdpbmRvdy5pbm5lcldpZHRoO1xuICAgIHRoaXMuY2hlY2tIYXNTY3JvbGwoKTtcbiAgfVxuXG4gIHB1YmxpYyBvcGVuKCk6IHZvaWQge1xuICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcbiAgICB0aGlzLmNoZWNrSGFzU2Nyb2xsKCk7XG4gIH1cblxuICBwdWJsaWMgZGlzbWlzcygpOiB2b2lkIHtcbiAgICB0aGlzLmlzT3BlbiA9IGZhbHNlO1xuICAgIHRoaXMuY2xvc2VkLmVtaXQoKTtcbiAgfVxuXG4gIHB1YmxpYyBtZW51KCk6IHZvaWQge1xuICAgIHRoaXMubWVudUV2ZW50LmVtaXQoKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBjb25zdCBlbCA9IHRoaXMuY29udGFpbmVyUmVmPy5uYXRpdmVFbGVtZW50O1xuICAgIGlmICghZWwpIHJldHVybjtcblxuICAgIGNvbnN0IHVwZGF0ZSA9ICgpID0+IHtcbiAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICAgIGVsLmNsYXNzTGlzdC50b2dnbGUoJ2hhcy1zY3JvbGwnLCBlbC5zY3JvbGxIZWlnaHQgPiBlbC5jbGllbnRIZWlnaHQpO1xuICAgICAgfSk7XG4gICAgfTtcblxuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIodXBkYXRlKTtcbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyLm9ic2VydmUoZWwpO1xuXG4gICAgdXBkYXRlKCk7XG4gIH1cblxuICBwcml2YXRlIGNoZWNrSGFzU2Nyb2xsKCk6IHZvaWQge1xuICAgIGNvbnN0IGVsID0gdGhpcy5jb250YWluZXJSZWY/Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgaWYgKCFlbCkgcmV0dXJuO1xuICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICBlbC5jbGFzc0xpc3QudG9nZ2xlKCdoYXMtc2Nyb2xsJywgZWwuc2Nyb2xsSGVpZ2h0ID4gZWwuY2xpZW50SGVpZ2h0KTtcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnJlc2l6ZU9ic2VydmVyKSB7XG4gICAgICB0aGlzLnJlc2l6ZU9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIgPSBudWxsO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImRldGFpbC1jb250YWluZXItYmFja2Ryb3BcIiAqbmdJZj1cInR5cGUgPT09ICdmbHlvdXQnICYmIG1vZGUgPT09ICdtb2RhbCcgJiYgIWdyYXZpdHlSZXNwb25zaXZlU2VydmljZS5pc01vYmlsZSgpXCJcbiAgICAgW2NsYXNzLm9wZW5dPVwiaXNPcGVuXCIgKGNsaWNrKT1cImRpc21pc3MoKVwiPjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwiZGV0YWlsLWNvbnRhaW5lci1jb250ZW50IHt7bW9kZX19IHt7Z3Jhdml0eVJlc3BvbnNpdmVTZXJ2aWNlLmlzTW9iaWxlKCkgPyAnbW9iaWxlJyA6IHR5cGV9fVwiXG4gICAgIFtuZ0NsYXNzXT1cImlzT3BlbiA/ICdzaG93JyA6ICdkaXNtaXNzJ1wiIFtzdHlsZS5oZWlnaHRdPVwib3B0aW9uYWxIZWlnaHRcIj5cbiAgPGRpdiBjbGFzcz1cImRldGFpbC1oZWFkZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiYmFjay1idXR0b25cIiAoY2xpY2spPVwiZGlzbWlzcygpXCIgKm5nSWY9XCJncmF2aXR5UmVzcG9uc2l2ZVNlcnZpY2UuaXNNb2JpbGUoKVwiPlxuICAgICAgPGdyYXZpdHktaWNvbiBbaWNvbk5hbWVdPVwiJ2Fycm93LWxlZnQnXCIgW2ljb25TaXplXT1cIidzbS0xMidcIlxuICAgICAgICAgICAgICAgICAgICBbc3R5bGUuLS1pY29uLWNvbG9yXT1cIid2YXIoLS1iYWNrLWJ1dHRvbi1jb2xvciknXCI+PC9ncmF2aXR5LWljb24+XG4gICAgICA8c3BhbiBjbGFzcz1cImhyLWxhYmVsIG1kLXJlZ3VsYXJcIj57eyBsYW5ndWFnZSA9PT0gJ2VuJyA/ICdCYWNrJyA6ICdBdHLDoXMnIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxwIFtuZ0NsYXNzXT1cImdyYXZpdHlSZXNwb25zaXZlU2VydmljZS5pc01vYmlsZSgpID8gJ2hyLWJvZHkgbWQtYm9sZCc6IHR5cGUgPT09ICdmbHlvdXQnID8gJ2hyLXRpdGxlIG1kLWJvbGQnIDogJ2hyLWJvZHkgbGctYm9sZCdcIj57eyB0aXRsZSB9fTwvcD5cbiAgICA8Z3Jhdml0eS1pY29uLWJ1dHRvbiAqbmdJZj1cIiFncmF2aXR5UmVzcG9uc2l2ZVNlcnZpY2UuaXNNb2JpbGUoKVwiIFtpY29uXT1cIid1bnN1Y2Nlc3MnXCIgW3NpemVdPVwiJ3NtJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cImRpc21pc3MoKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgW3N1cHBvcnRUZXh0XT1cIidDbG9zZSdcIj48L2dyYXZpdHktaWNvbi1idXR0b24+XG4gICAgPGdyYXZpdHktaWNvbiBjbGFzcz1cIm1lbnUtYnV0dG9uXCIgKm5nSWY9XCJncmF2aXR5UmVzcG9uc2l2ZVNlcnZpY2UuaXNNb2JpbGUoKVwiIFtzdHlsZS4tLWljb24tY29sb3JdPVwiJ3ZhcigtLWJhY2stYnV0dG9uLWNvbG9yKSdcIlxuICAgICAgICAgICAgICAgICAgW2ljb25TaXplXT1cIidsZy0yNCdcIiBbaWNvbk5hbWVdPVwiJ21lbnUnXCIgKGNsaWNrKT1cIm1lbnUoKVwiLz5cbiAgPC9kaXY+XG5cbiAgPGRpdiBjbGFzcz1cIm92ZXJmbG93LWNvbnRhaW5lclwiICNjb250YWluZXJSZWY+XG4gICAgPHAgKm5nSWY9XCJkZXNjcmlwdGlvbiAhPSAnJyAmJiB0eXBlID09PSAnZmx5b3V0J1wiXG4gICAgICAgY2xhc3M9XCJoci1ib2R5IHNtLXJlZ3VsYXIgZGV0YWlsLWRlc2NyaXB0aW9uXCI+IHt7IGRlc2NyaXB0aW9uIH19PC9wPlxuXG4gICAgPGRpdiBjbGFzcz1cImRldGFpbC1ib2R5XCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZGV0YWlsLWJvZHldXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwiZGV0YWlsLWFjdGlvbnNcIiAqbmdJZj1cInR5cGUgPT09ICdmbHlvdXQnXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2RldGFpbC1hY3Rpb25zXVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { HostListener, Injectable } from "@angular/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class GravityResponsiveService {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.breakpoints = {
|
|
6
|
+
xs: 0,
|
|
7
|
+
sm: 576,
|
|
8
|
+
md: 992,
|
|
9
|
+
lg: 1440,
|
|
10
|
+
xl: 1920
|
|
11
|
+
};
|
|
12
|
+
this.onResize();
|
|
13
|
+
}
|
|
14
|
+
getResolution() {
|
|
15
|
+
if (this.currentResolutionWidth <= this.breakpoints.xs) {
|
|
16
|
+
return 'xs';
|
|
17
|
+
}
|
|
18
|
+
else if (this.currentResolutionWidth > this.breakpoints.xs && this.currentResolutionWidth <= this.breakpoints.sm) {
|
|
19
|
+
return 'sm';
|
|
20
|
+
}
|
|
21
|
+
else if (this.currentResolutionWidth > this.breakpoints.sm && this.currentResolutionWidth <= this.breakpoints.md) {
|
|
22
|
+
return 'md';
|
|
23
|
+
}
|
|
24
|
+
else if (this.currentResolutionWidth > this.breakpoints.md && this.currentResolutionWidth <= this.breakpoints.lg) {
|
|
25
|
+
return 'lg';
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
return 'xl';
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
onResize() {
|
|
32
|
+
this.currentResolutionWidth = window.innerWidth;
|
|
33
|
+
}
|
|
34
|
+
isMobile() {
|
|
35
|
+
return this.getResolution() == 'md' || this.getResolution() == 'sm';
|
|
36
|
+
}
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
38
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityResponsiveService, providedIn: 'root' }); }
|
|
39
|
+
}
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityResponsiveService, decorators: [{
|
|
41
|
+
type: Injectable,
|
|
42
|
+
args: [{ providedIn: 'root' }]
|
|
43
|
+
}], ctorParameters: function () { return []; }, propDecorators: { onResize: [{
|
|
44
|
+
type: HostListener,
|
|
45
|
+
args: ['window:resize', ['$event']]
|
|
46
|
+
}] } });
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1yZXNwb25zaXZlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9zZXJ2aWNlcy9ncmF2aXR5LXJlc3BvbnNpdmUuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsWUFBWSxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFHdkQsTUFBTSxPQUFPLHdCQUF3QjtJQVVuQztRQVJRLGdCQUFXLEdBQUc7WUFDcEIsRUFBRSxFQUFFLENBQUM7WUFDTCxFQUFFLEVBQUUsR0FBRztZQUNQLEVBQUUsRUFBRSxHQUFHO1lBQ1AsRUFBRSxFQUFFLElBQUk7WUFDUixFQUFFLEVBQUUsSUFBSTtTQUNULENBQUE7UUFHQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVNLGFBQWE7UUFDbEIsSUFBSSxJQUFJLENBQUMsc0JBQXNCLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLEVBQUU7WUFDdEQsT0FBTyxJQUFJLENBQUM7U0FDYjthQUFNLElBQUksSUFBSSxDQUFDLHNCQUFzQixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxzQkFBc0IsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsRUFBRTtZQUNsSCxPQUFPLElBQUksQ0FBQztTQUNiO2FBQU0sSUFBSSxJQUFJLENBQUMsc0JBQXNCLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLHNCQUFzQixJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxFQUFFO1lBQ2xILE9BQU8sSUFBSSxDQUFDO1NBQ2I7YUFBTSxJQUFJLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsSUFBSSxJQUFJLENBQUMsc0JBQXNCLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLEVBQUU7WUFDbEgsT0FBTyxJQUFJLENBQUM7U0FDYjthQUFNO1lBQ0wsT0FBTyxJQUFJLENBQUM7U0FDYjtJQUNILENBQUM7SUFHTyxRQUFRO1FBQ2QsSUFBSSxDQUFDLHNCQUFzQixHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUM7SUFDbEQsQ0FBQztJQUVNLFFBQVE7UUFDYixPQUFPLElBQUksQ0FBQyxhQUFhLEVBQUUsSUFBSSxJQUFJLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRSxJQUFJLElBQUksQ0FBQztJQUN0RSxDQUFDOytHQW5DVSx3QkFBd0I7bUhBQXhCLHdCQUF3QixjQURaLE1BQU07OzRGQUNsQix3QkFBd0I7a0JBRHBDLFVBQVU7bUJBQUMsRUFBQyxVQUFVLEVBQUUsTUFBTSxFQUFDOzBFQThCdEIsUUFBUTtzQkFEZixZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7SG9zdExpc3RlbmVyLCBJbmplY3RhYmxlfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5ASW5qZWN0YWJsZSh7cHJvdmlkZWRJbjogJ3Jvb3QnfSlcbmV4cG9ydCBjbGFzcyBHcmF2aXR5UmVzcG9uc2l2ZVNlcnZpY2Uge1xuICBwdWJsaWMgY3VycmVudFJlc29sdXRpb25XaWR0aDogbnVtYmVyO1xuICBwcml2YXRlIGJyZWFrcG9pbnRzID0ge1xuICAgIHhzOiAwLFxuICAgIHNtOiA1NzYsXG4gICAgbWQ6IDk5MixcbiAgICBsZzogMTQ0MCxcbiAgICB4bDogMTkyMFxuICB9XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5vblJlc2l6ZSgpO1xuICB9XG5cbiAgcHVibGljIGdldFJlc29sdXRpb24oKTogJ3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICd4bCcge1xuICAgIGlmICh0aGlzLmN1cnJlbnRSZXNvbHV0aW9uV2lkdGggPD0gdGhpcy5icmVha3BvaW50cy54cykge1xuICAgICAgcmV0dXJuICd4cyc7XG4gICAgfSBlbHNlIGlmICh0aGlzLmN1cnJlbnRSZXNvbHV0aW9uV2lkdGggPiB0aGlzLmJyZWFrcG9pbnRzLnhzICYmIHRoaXMuY3VycmVudFJlc29sdXRpb25XaWR0aCA8PSB0aGlzLmJyZWFrcG9pbnRzLnNtKSB7XG4gICAgICByZXR1cm4gJ3NtJztcbiAgICB9IGVsc2UgaWYgKHRoaXMuY3VycmVudFJlc29sdXRpb25XaWR0aCA+IHRoaXMuYnJlYWtwb2ludHMuc20gJiYgdGhpcy5jdXJyZW50UmVzb2x1dGlvbldpZHRoIDw9IHRoaXMuYnJlYWtwb2ludHMubWQpIHtcbiAgICAgIHJldHVybiAnbWQnO1xuICAgIH0gZWxzZSBpZiAodGhpcy5jdXJyZW50UmVzb2x1dGlvbldpZHRoID4gdGhpcy5icmVha3BvaW50cy5tZCAmJiB0aGlzLmN1cnJlbnRSZXNvbHV0aW9uV2lkdGggPD0gdGhpcy5icmVha3BvaW50cy5sZykge1xuICAgICAgcmV0dXJuICdsZyc7XG4gICAgfSBlbHNlIHtcbiAgICAgIHJldHVybiAneGwnO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ3dpbmRvdzpyZXNpemUnLCBbJyRldmVudCddKVxuICBwcml2YXRlIG9uUmVzaXplKCk6IHZvaWQge1xuICAgIHRoaXMuY3VycmVudFJlc29sdXRpb25XaWR0aCA9IHdpbmRvdy5pbm5lcldpZHRoO1xuICB9XG5cbiAgcHVibGljIGlzTW9iaWxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmdldFJlc29sdXRpb24oKSA9PSAnbWQnIHx8IHRoaXMuZ2V0UmVzb2x1dGlvbigpID09ICdzbSc7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -7304,35 +7304,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7304
7304
|
args: ['window:resize', ['$event']]
|
|
7305
7305
|
}] } });
|
|
7306
7306
|
|
|
7307
|
-
class
|
|
7307
|
+
class GravityResponsiveService {
|
|
7308
7308
|
constructor() {
|
|
7309
|
+
this.breakpoints = {
|
|
7310
|
+
xs: 0,
|
|
7311
|
+
sm: 576,
|
|
7312
|
+
md: 992,
|
|
7313
|
+
lg: 1440,
|
|
7314
|
+
xl: 1920
|
|
7315
|
+
};
|
|
7316
|
+
this.onResize();
|
|
7317
|
+
}
|
|
7318
|
+
getResolution() {
|
|
7319
|
+
if (this.currentResolutionWidth <= this.breakpoints.xs) {
|
|
7320
|
+
return 'xs';
|
|
7321
|
+
}
|
|
7322
|
+
else if (this.currentResolutionWidth > this.breakpoints.xs && this.currentResolutionWidth <= this.breakpoints.sm) {
|
|
7323
|
+
return 'sm';
|
|
7324
|
+
}
|
|
7325
|
+
else if (this.currentResolutionWidth > this.breakpoints.sm && this.currentResolutionWidth <= this.breakpoints.md) {
|
|
7326
|
+
return 'md';
|
|
7327
|
+
}
|
|
7328
|
+
else if (this.currentResolutionWidth > this.breakpoints.md && this.currentResolutionWidth <= this.breakpoints.lg) {
|
|
7329
|
+
return 'lg';
|
|
7330
|
+
}
|
|
7331
|
+
else {
|
|
7332
|
+
return 'xl';
|
|
7333
|
+
}
|
|
7334
|
+
}
|
|
7335
|
+
onResize() {
|
|
7336
|
+
this.currentResolutionWidth = window.innerWidth;
|
|
7337
|
+
}
|
|
7338
|
+
isMobile() {
|
|
7339
|
+
return this.getResolution() == 'md' || this.getResolution() == 'sm';
|
|
7340
|
+
}
|
|
7341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7342
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityResponsiveService, providedIn: 'root' }); }
|
|
7343
|
+
}
|
|
7344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityResponsiveService, decorators: [{
|
|
7345
|
+
type: Injectable,
|
|
7346
|
+
args: [{ providedIn: 'root' }]
|
|
7347
|
+
}], ctorParameters: function () { return []; }, propDecorators: { onResize: [{
|
|
7348
|
+
type: HostListener,
|
|
7349
|
+
args: ['window:resize', ['$event']]
|
|
7350
|
+
}] } });
|
|
7351
|
+
|
|
7352
|
+
class GravityDetailContainerComponent {
|
|
7353
|
+
constructor(gravityResponsiveService) {
|
|
7354
|
+
this.gravityResponsiveService = gravityResponsiveService;
|
|
7309
7355
|
this.title = '';
|
|
7310
7356
|
this.description = '';
|
|
7311
7357
|
this.type = 'flyout';
|
|
7358
|
+
this.language = 'en';
|
|
7312
7359
|
this.closed = new EventEmitter();
|
|
7360
|
+
this.menuEvent = new EventEmitter();
|
|
7313
7361
|
this.isOpen = false;
|
|
7362
|
+
this.resizeObserver = null;
|
|
7363
|
+
this.onResize();
|
|
7364
|
+
}
|
|
7365
|
+
onResize() {
|
|
7366
|
+
this.gravityResponsiveService.currentResolutionWidth = window.innerWidth;
|
|
7367
|
+
this.checkHasScroll();
|
|
7314
7368
|
}
|
|
7315
7369
|
open() {
|
|
7316
7370
|
this.isOpen = true;
|
|
7371
|
+
this.checkHasScroll();
|
|
7317
7372
|
}
|
|
7318
7373
|
dismiss() {
|
|
7319
7374
|
this.isOpen = false;
|
|
7320
7375
|
this.closed.emit();
|
|
7321
7376
|
}
|
|
7377
|
+
menu() {
|
|
7378
|
+
this.menuEvent.emit();
|
|
7379
|
+
}
|
|
7322
7380
|
ngAfterViewInit() {
|
|
7323
|
-
const el = this.containerRef
|
|
7324
|
-
|
|
7381
|
+
const el = this.containerRef?.nativeElement;
|
|
7382
|
+
if (!el)
|
|
7383
|
+
return;
|
|
7384
|
+
const update = () => {
|
|
7385
|
+
requestAnimationFrame(() => {
|
|
7386
|
+
el.classList.toggle('has-scroll', el.scrollHeight > el.clientHeight);
|
|
7387
|
+
});
|
|
7388
|
+
};
|
|
7389
|
+
this.resizeObserver = new ResizeObserver(update);
|
|
7390
|
+
this.resizeObserver.observe(el);
|
|
7391
|
+
update();
|
|
7392
|
+
}
|
|
7393
|
+
checkHasScroll() {
|
|
7394
|
+
const el = this.containerRef?.nativeElement;
|
|
7395
|
+
if (!el)
|
|
7396
|
+
return;
|
|
7397
|
+
requestAnimationFrame(() => {
|
|
7325
7398
|
el.classList.toggle('has-scroll', el.scrollHeight > el.clientHeight);
|
|
7326
7399
|
});
|
|
7327
|
-
observer.observe(el);
|
|
7328
7400
|
}
|
|
7329
|
-
|
|
7330
|
-
|
|
7401
|
+
ngOnDestroy() {
|
|
7402
|
+
if (this.resizeObserver) {
|
|
7403
|
+
this.resizeObserver.disconnect();
|
|
7404
|
+
this.resizeObserver = null;
|
|
7405
|
+
}
|
|
7406
|
+
}
|
|
7407
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, deps: [{ token: GravityResponsiveService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDetailContainerComponent, selector: "gravity-detail-container", inputs: { title: "title", description: "description", mode: "mode", type: "type", optionalHeight: "optionalHeight", 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\" *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 <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\">\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'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\"></gravity-icon-button>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.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"] }] }); }
|
|
7331
7409
|
}
|
|
7332
7410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDetailContainerComponent, decorators: [{
|
|
7333
7411
|
type: Component,
|
|
7334
|
-
args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\" *ngIf=\"type === 'flyout' && mode === 'modal'\"
|
|
7335
|
-
}], propDecorators: { title: [{
|
|
7412
|
+
args: [{ selector: 'gravity-detail-container', template: "<div class=\"detail-container-backdrop\" *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 <div class=\"detail-header\">\n <div class=\"back-button\" (click)=\"dismiss()\" *ngIf=\"gravityResponsiveService.isMobile()\">\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'\">{{ title }}</p>\n <gravity-icon-button *ngIf=\"!gravityResponsiveService.isMobile()\" [icon]=\"'unsuccess'\" [size]=\"'sm'\"\n (click)=\"dismiss()\"\n [supportText]=\"'Close'\"></gravity-icon-button>\n <gravity-icon class=\"menu-button\" *ngIf=\"gravityResponsiveService.isMobile()\" [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"menu()\"/>\n </div>\n\n <div class=\"overflow-container\" #containerRef>\n <p *ngIf=\"description != '' && type === 'flyout'\"\n class=\"hr-body sm-regular detail-description\"> {{ description }}</p>\n\n <div class=\"detail-body\">\n <ng-content select=\"[detail-body]\"></ng-content>\n </div>\n </div>\n\n <div class=\"detail-actions\" *ngIf=\"type === 'flyout'\">\n <ng-content select=\"[detail-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.detail-container-content .overflow-container.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"] }]
|
|
7413
|
+
}], ctorParameters: function () { return [{ type: GravityResponsiveService }]; }, propDecorators: { title: [{
|
|
7336
7414
|
type: Input
|
|
7337
7415
|
}], description: [{
|
|
7338
7416
|
type: Input
|
|
@@ -7342,11 +7420,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7342
7420
|
type: Input
|
|
7343
7421
|
}], optionalHeight: [{
|
|
7344
7422
|
type: Input
|
|
7423
|
+
}], language: [{
|
|
7424
|
+
type: Input
|
|
7345
7425
|
}], closed: [{
|
|
7346
7426
|
type: Output
|
|
7427
|
+
}], menuEvent: [{
|
|
7428
|
+
type: Output
|
|
7347
7429
|
}], containerRef: [{
|
|
7348
7430
|
type: ViewChild,
|
|
7349
7431
|
args: ['containerRef']
|
|
7432
|
+
}], onResize: [{
|
|
7433
|
+
type: HostListener,
|
|
7434
|
+
args: ['window:resize', ['$event']]
|
|
7350
7435
|
}] } });
|
|
7351
7436
|
|
|
7352
7437
|
class PushNotificationsService {
|