@progressio_resources/gravity-design-system 4.0.5 → 4.0.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.
|
@@ -7875,11 +7875,11 @@ class GravityHeaderComponent {
|
|
|
7875
7875
|
return this.resolution === 'xs' || this.resolution === 'sm' || this.resolution === 'md';
|
|
7876
7876
|
}
|
|
7877
7877
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityHeaderComponent, isStandalone: true, 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 @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n
|
|
7878
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityHeaderComponent, isStandalone: true, 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 @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\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\n @if (breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl')) {\n <div class=\"breadcrumb\">\n @if (breadCrumb.icon) {\n <gravity-icon class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n }\n @for (item of breadCrumb.list; track item; 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 }\n </div>\n }\n\n @if (!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1) {\n <h1\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n }\n\n @if (isMobile() && backButton) {\n <h1 [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n }\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n @if ((notifications && !isMobile()) || (notifications && isMobile() && !backButton)) {\n <gravity-push-notifications\n [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n }\n\n @if (isMobile()) {\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n }\n </div>\n </section>\n\n @if (!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title) {\n <section class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n }\n\n @if (isMobile() && logoUrl && !backButton && title) {\n <section class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n </section>\n }\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: ["userNotifications"], outputs: ["viewedNotificationsResponse"] }] }); }
|
|
7879
7879
|
}
|
|
7880
7880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityHeaderComponent, decorators: [{
|
|
7881
7881
|
type: Component,
|
|
7882
|
-
args: [{ selector: 'gravity-header', standalone: true, imports: [SvgIconComponent, GravityIconComponent, NgClass, GravityPushNotificationsComponent], template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n
|
|
7882
|
+
args: [{ selector: 'gravity-header', standalone: true, imports: [SvgIconComponent, GravityIconComponent, NgClass, GravityPushNotificationsComponent], template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\">\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\n @if (breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl')) {\n <div class=\"breadcrumb\">\n @if (breadCrumb.icon) {\n <gravity-icon class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n }\n @for (item of breadCrumb.list; track item; 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 }\n </div>\n }\n\n @if (!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1) {\n <h1\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n }\n\n @if (isMobile() && backButton) {\n <h1 [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n }\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n @if ((notifications && !isMobile()) || (notifications && isMobile() && !backButton)) {\n <gravity-push-notifications\n [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n }\n\n @if (isMobile()) {\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n }\n </div>\n </section>\n\n @if (!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title) {\n <section class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n }\n\n @if (isMobile() && logoUrl && !backButton && title) {\n <section class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n </section>\n }\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{height:36px}\n"] }]
|
|
7883
7883
|
}], propDecorators: { title: [{
|
|
7884
7884
|
type: Input
|
|
7885
7885
|
}], logoUrl: [{
|