ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
59 lines • 15.2 kB
JavaScript
import { Component, Input } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from "../base/base.component";
import { DATA__HAS_MENU } from "../_models/theme.model";
import * as i0 from "@angular/core";
import * as i1 from "../_services/embed-mode.service";
import * as i2 from "../_services/slide-out.service";
import * as i3 from "../_services/theme.service";
import * as i4 from "@angular/router";
export class MenuComponent extends BaseComponent {
constructor(embedModeService, slideOutService, themeService) {
super();
this.embedModeService = embedModeService;
this.slideOutService = slideOutService;
this.themeService = themeService;
/** The menu items to render in the DOM. */
this.menuItems = [];
this.mmActive = false;
this.so = '';
this.isIframe = false;
this.isIframe = this.embedModeService.getEmbedMode().isIframe();
if (!this.isIframe) {
this.themeService.setBodyData(DATA__HAS_MENU);
}
this.onSo();
}
// ********************************************************************************************************
// LOAD
// ********************************************************************************************************
onSo() {
this.slideOutService.onNewSlideOut()
.pipe(takeUntil(this.onDestroy$))
.subscribe((so) => {
if (so) {
this.mmActive = false;
}
});
}
// ********************************************************************************************************
// UI
// ********************************************************************************************************
// EVENT LISTENERS
onToggleMenu() {
this.mmActive = !this.mmActive;
if (this.mmActive) {
// menu active: close open slide-outs
this.slideOutService.newSlideOut('');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: i1.EmbedModeService }, { token: i2.SlideOutService }, { token: i3.ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MenuComponent, selector: "spaas-menu", inputs: { menuItems: "menuItems" }, usesInheritance: true, ngImport: i0, template: "@if (!isIframe) {\r\n <div class=\"mm\">\r\n\r\n <div (click)=\"onToggleMenu()\"\r\n [class.active]=\"mmActive\"\r\n class=\"mm__burger\">\r\n <span></span>\r\n <span></span>\r\n </div>\r\n <div [class.visible]=\"mmActive\"\r\n class=\"mm__slide-out\">\r\n @if (mmActive) {\r\n <div class=\"mm__slide-out__items\">\r\n @for (item of menuItems; track item) {\r\n <div (click)=\"onToggleMenu()\"\r\n [routerLink]=\"item.rtrLink\"\r\n routerLinkActive=\"accent\">\r\n {{ item.label }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"mm__slide-out__logo\">\r\n <svg viewBox=\"0 0 512 256\">\r\n <use [attr.xlink:href]=\"'assets/images/logo-engie.svg#svg1'\"></use>\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".mm__burger{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),1);color:hsla(var(--color-h),var(--color-s),var(--color-l),1);cursor:pointer;height:44px;left:0;position:fixed;top:2px;transition:background-color .4s;width:44px;z-index:9996}.mm__burger span{background-color:hsla(var(--color-h),var(--color-s),var(--color-l),1);border-radius:9px;display:block;height:3px;opacity:1;position:absolute;right:10px;transform:rotate(0);transition:.25s ease-in-out}.mm__burger span:nth-child(1){top:19px;width:24px}.mm__burger span:nth-child(2){top:24px;width:18px}.mm__burger.active span{background-color:hsla(var(--error-h),var(--error-s),var(--error-l),1);height:3px}.mm__burger.active span:nth-child(1){top:20px;transform:rotate(45deg);width:24px}.mm__burger.active span:nth-child(2){top:24px;transform:rotate(-45deg);width:24px}.mm__slide-out{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),.94);height:100vh;padding:28px 88px;position:fixed;left:0;top:0;transform:translate3d(-100%,0,0);transition:transform .2s;width:100%;z-index:9995}@media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1024px) and (orientation: portrait),screen and (max-width: 767px) and (orientation: portrait),screen and (max-height: 420px) and (orientation: landscape){.mm__slide-out{padding:28px 44px}}.mm__slide-out.visible{transform:translateZ(0)}.mm__slide-out__items{animation:anim-fade-in .2s .2s forwards;opacity:0}.mm__slide-out__items>div{cursor:pointer;font-size:28px;font-family:BebasNeue,Lato,Arial,sans-serif;padding:7px;transition:transform .2s}.mm__slide-out__items>div:hover{transform:translate(7px)}.mm__slide-out__logo{bottom:14px;color:hsla(var(--bg-h),var(--bg-s),calc(var(--bg-l) + -4%),1);height:40vh;position:absolute;right:88px;width:80vh}.mm__slide-out__logo svg{height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-menu', template: "@if (!isIframe) {\r\n <div class=\"mm\">\r\n\r\n <div (click)=\"onToggleMenu()\"\r\n [class.active]=\"mmActive\"\r\n class=\"mm__burger\">\r\n <span></span>\r\n <span></span>\r\n </div>\r\n <div [class.visible]=\"mmActive\"\r\n class=\"mm__slide-out\">\r\n @if (mmActive) {\r\n <div class=\"mm__slide-out__items\">\r\n @for (item of menuItems; track item) {\r\n <div (click)=\"onToggleMenu()\"\r\n [routerLink]=\"item.rtrLink\"\r\n routerLinkActive=\"accent\">\r\n {{ item.label }}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"mm__slide-out__logo\">\r\n <svg viewBox=\"0 0 512 256\">\r\n <use [attr.xlink:href]=\"'assets/images/logo-engie.svg#svg1'\"></use>\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".mm__burger{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),1);color:hsla(var(--color-h),var(--color-s),var(--color-l),1);cursor:pointer;height:44px;left:0;position:fixed;top:2px;transition:background-color .4s;width:44px;z-index:9996}.mm__burger span{background-color:hsla(var(--color-h),var(--color-s),var(--color-l),1);border-radius:9px;display:block;height:3px;opacity:1;position:absolute;right:10px;transform:rotate(0);transition:.25s ease-in-out}.mm__burger span:nth-child(1){top:19px;width:24px}.mm__burger span:nth-child(2){top:24px;width:18px}.mm__burger.active span{background-color:hsla(var(--error-h),var(--error-s),var(--error-l),1);height:3px}.mm__burger.active span:nth-child(1){top:20px;transform:rotate(45deg);width:24px}.mm__burger.active span:nth-child(2){top:24px;transform:rotate(-45deg);width:24px}.mm__slide-out{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),.94);height:100vh;padding:28px 88px;position:fixed;left:0;top:0;transform:translate3d(-100%,0,0);transition:transform .2s;width:100%;z-index:9995}@media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1024px) and (orientation: portrait),screen and (max-width: 767px) and (orientation: portrait),screen and (max-height: 420px) and (orientation: landscape){.mm__slide-out{padding:28px 44px}}.mm__slide-out.visible{transform:translateZ(0)}.mm__slide-out__items{animation:anim-fade-in .2s .2s forwards;opacity:0}.mm__slide-out__items>div{cursor:pointer;font-size:28px;font-family:BebasNeue,Lato,Arial,sans-serif;padding:7px;transition:transform .2s}.mm__slide-out__items>div:hover{transform:translate(7px)}.mm__slide-out__logo{bottom:14px;color:hsla(var(--bg-h),var(--bg-s),calc(var(--bg-l) + -4%),1);height:40vh;position:absolute;right:88px;width:80vh}.mm__slide-out__logo svg{height:100%;width:100%}\n"] }]
}], ctorParameters: () => [{ type: i1.EmbedModeService }, { type: i2.SlideOutService }, { type: i3.ThemeService }], propDecorators: { menuItems: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZ2VtLXNwYWFzL3NyYy9tZW51L21lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvbWVudS9tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6QyxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFHckQsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7QUFTdEQsTUFBTSxPQUFPLGFBQWMsU0FBUSxhQUFhO0lBUzlDLFlBQ1UsZ0JBQWtDLEVBQ2xDLGVBQWdDLEVBQ2hDLFlBQTBCO1FBRWxDLEtBQUssRUFBRSxDQUFDO1FBSkEscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUNsQyxvQkFBZSxHQUFmLGVBQWUsQ0FBaUI7UUFDaEMsaUJBQVksR0FBWixZQUFZLENBQWM7UUFWcEMsMkNBQTJDO1FBQ2xDLGNBQVMsR0FBb0IsRUFBRSxDQUFDO1FBRXpDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQUNSLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFRZixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNoRSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ2hELENBQUM7UUFDRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDZCxDQUFDO0lBRUQsMkdBQTJHO0lBQzNHLE9BQU87SUFDUCwyR0FBMkc7SUFFbkcsSUFBSTtRQUNWLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxFQUFFO2FBQ2pDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2FBQ2hDLFNBQVMsQ0FDUixDQUFDLEVBQUUsRUFBRSxFQUFFO1lBQ0wsSUFBSSxFQUFFLEVBQUUsQ0FBQztnQkFDUCxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUN4QixDQUFDO1FBQ0gsQ0FBQyxDQUNGLENBQUM7SUFDTixDQUFDO0lBRUQsMkdBQTJHO0lBQzNHLEtBQUs7SUFDTCwyR0FBMkc7SUFFM0csa0JBQWtCO0lBQ2xCLFlBQVk7UUFDVixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUMvQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixxQ0FBcUM7WUFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdkMsQ0FBQztJQUNILENBQUM7K0dBakRVLGFBQWE7bUdBQWIsYUFBYSw2R0NmMUIsczVCQThCQTs7NEZEZmEsYUFBYTtrQkFOekIsU0FBUzsrQkFDRSxZQUFZOzhJQVFiLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge3Rha2VVbnRpbH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5pbXBvcnQge1NsaWRlT3V0U2VydmljZX0gZnJvbSBcIi4uL19zZXJ2aWNlcy9zbGlkZS1vdXQuc2VydmljZVwiO1xyXG5pbXBvcnQge0Jhc2VDb21wb25lbnR9IGZyb20gXCIuLi9iYXNlL2Jhc2UuY29tcG9uZW50XCI7XHJcbmltcG9ydCB7TWVudUl0ZW1Nb2RlbH0gZnJvbSBcIi4uL19tb2RlbHMvbWVudS1pdGVtLm1vZGVsXCI7XHJcbmltcG9ydCB7VGhlbWVTZXJ2aWNlfSBmcm9tIFwiLi4vX3NlcnZpY2VzL3RoZW1lLnNlcnZpY2VcIjtcclxuaW1wb3J0IHtEQVRBX19IQVNfTUVOVX0gZnJvbSBcIi4uL19tb2RlbHMvdGhlbWUubW9kZWxcIjtcclxuaW1wb3J0IHtFbWJlZE1vZGVTZXJ2aWNlfSBmcm9tIFwiLi4vX3NlcnZpY2VzL2VtYmVkLW1vZGUuc2VydmljZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzcGFhcy1tZW51JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbWVudS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbWVudS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTWVudUNvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnQge1xyXG5cclxuICAvKiogVGhlIG1lbnUgaXRlbXMgdG8gcmVuZGVyIGluIHRoZSBET00uICovXHJcbiAgQElucHV0KCkgbWVudUl0ZW1zOiBNZW51SXRlbU1vZGVsW10gPSBbXTtcclxuXHJcbiAgbW1BY3RpdmUgPSBmYWxzZTtcclxuICBzbyA9ICcnO1xyXG4gIGlzSWZyYW1lID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBlbWJlZE1vZGVTZXJ2aWNlOiBFbWJlZE1vZGVTZXJ2aWNlLFxyXG4gICAgcHJpdmF0ZSBzbGlkZU91dFNlcnZpY2U6IFNsaWRlT3V0U2VydmljZSxcclxuICAgIHByaXZhdGUgdGhlbWVTZXJ2aWNlOiBUaGVtZVNlcnZpY2UsXHJcbiAgKSB7XHJcbiAgICBzdXBlcigpO1xyXG4gICAgdGhpcy5pc0lmcmFtZSA9IHRoaXMuZW1iZWRNb2RlU2VydmljZS5nZXRFbWJlZE1vZGUoKS5pc0lmcmFtZSgpO1xyXG4gICAgaWYgKCF0aGlzLmlzSWZyYW1lKSB7XHJcbiAgICAgIHRoaXMudGhlbWVTZXJ2aWNlLnNldEJvZHlEYXRhKERBVEFfX0hBU19NRU5VKTtcclxuICAgIH1cclxuICAgIHRoaXMub25TbygpO1xyXG4gIH1cclxuXHJcbiAgLy8gKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcclxuICAvLyBMT0FEXHJcbiAgLy8gKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcclxuXHJcbiAgcHJpdmF0ZSBvblNvKCk6IHZvaWQge1xyXG4gICAgdGhpcy5zbGlkZU91dFNlcnZpY2Uub25OZXdTbGlkZU91dCgpXHJcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLm9uRGVzdHJveSQpKVxyXG4gICAgICAuc3Vic2NyaWJlKFxyXG4gICAgICAgIChzbykgPT4ge1xyXG4gICAgICAgICAgaWYgKHNvKSB7XHJcbiAgICAgICAgICAgIHRoaXMubW1BY3RpdmUgPSBmYWxzZTtcclxuICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgICk7XHJcbiAgfVxyXG5cclxuICAvLyAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxyXG4gIC8vIFVJXHJcbiAgLy8gKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcclxuXHJcbiAgLy8gRVZFTlQgTElTVEVORVJTXHJcbiAgb25Ub2dnbGVNZW51KCk6IHZvaWQge1xyXG4gICAgdGhpcy5tbUFjdGl2ZSA9ICF0aGlzLm1tQWN0aXZlO1xyXG4gICAgaWYgKHRoaXMubW1BY3RpdmUpIHtcclxuICAgICAgLy8gbWVudSBhY3RpdmU6IGNsb3NlIG9wZW4gc2xpZGUtb3V0c1xyXG4gICAgICB0aGlzLnNsaWRlT3V0U2VydmljZS5uZXdTbGlkZU91dCgnJyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iLCJAaWYgKCFpc0lmcmFtZSkge1xyXG4gIDxkaXYgY2xhc3M9XCJtbVwiPlxyXG5cclxuICAgIDxkaXYgKGNsaWNrKT1cIm9uVG9nZ2xlTWVudSgpXCJcclxuICAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCJtbUFjdGl2ZVwiXHJcbiAgICAgICAgIGNsYXNzPVwibW1fX2J1cmdlclwiPlxyXG4gICAgICA8c3Bhbj48L3NwYW4+XHJcbiAgICAgIDxzcGFuPjwvc3Bhbj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBbY2xhc3MudmlzaWJsZV09XCJtbUFjdGl2ZVwiXHJcbiAgICAgICAgIGNsYXNzPVwibW1fX3NsaWRlLW91dFwiPlxyXG4gICAgICBAaWYgKG1tQWN0aXZlKSB7XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm1tX19zbGlkZS1vdXRfX2l0ZW1zXCI+XHJcbiAgICAgICAgICBAZm9yIChpdGVtIG9mIG1lbnVJdGVtczsgdHJhY2sgaXRlbSkge1xyXG4gICAgICAgICAgICA8ZGl2IChjbGljayk9XCJvblRvZ2dsZU1lbnUoKVwiXHJcbiAgICAgICAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiaXRlbS5ydHJMaW5rXCJcclxuICAgICAgICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWNjZW50XCI+XHJcbiAgICAgICAgICAgICAge3sgaXRlbS5sYWJlbCB9fVxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIH1cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibW1fX3NsaWRlLW91dF9fbG9nb1wiPlxyXG4gICAgICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDUxMiAyNTZcIj5cclxuICAgICAgICAgICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cIidhc3NldHMvaW1hZ2VzL2xvZ28tZW5naWUuc3ZnI3N2ZzEnXCI+PC91c2U+XHJcbiAgICAgICAgICA8L3N2Zz5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgfVxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbn1cclxuIl19