ngx-gem-spaas/esm2022/menu-side-bar/menu-side-bar.component.mjs

This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.

import { Component, Input } from '@angular/core';
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/active-route.service";
import * as i2 from "../_services/config.service";
import * as i3 from "../_services/theme.service";
import * as i4 from "@angular/material/tooltip";
import * as i5 from "@angular/common";
export class MenuSideBarComponent extends BaseComponent {
    constructor(activeRouteService, configService, themeService) {
        super();
        this.activeRouteService = activeRouteService;
        this.configService = configService;
        this.themeService = themeService;
        this.titleText = '';
        this.env = '';
        this.fullEnv = '';
        // enable menu gutter and notify parent that iframe has menu
        this.themeService.setBodyData(DATA__HAS_MENU);
        this.setEnv();
    }
    ngOnInit() {
        if (!this.titleText) {
            this.titleText = this.activeRouteService.getActiveRoute()?.url;
        }
    }
    setEnv() {
        const config = this.configService.getConfig();
        if (config.environment &&
            !config.environment.startsWith('local') &&
            !config.environment.startsWith('prod')) {
            this.env = config.environment.slice(0, 3);
            this.fullEnv = config.environment;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuSideBarComponent, deps: [{ token: i1.ActiveRouteService }, { token: i2.ConfigService }, { token: i3.ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MenuSideBarComponent, selector: "spaas-menu-side-bar", inputs: { titleText: "titleText" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mm-side-bar\">\r\n\r\n  @if (env) {\r\n    <div class=\"mm-side-bar__env {{env}}\"\r\n         matTooltipPosition=\"right\"\r\n         matTooltipClass=\"bg-error\"\r\n         matTooltip=\"you are on the {{fullEnv | uppercase}} environment\">\r\n      {{ env }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"mm-side-bar__title\">\r\n    {{ titleText }}\r\n  </div>\r\n\r\n  <ng-content select=\"spaas-menu-side-bar-icon\"></ng-content>\r\n\r\n</div>\r\n", styles: [".mm-side-bar{animation:anim-fade-in .4s .2s ease forwards;height:calc(100vh - 88px);left:0;opacity:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:44px;width:44px;z-index:9994}.mm-side-bar__title,.mm-side-bar__env{font-family:BebasNeue,Lato,Arial,sans-serif;font-size:28px;text-align:right;text-orientation:sideways;transform:rotate(180deg);-webkit-user-select:none;user-select:none;width:44px;writing-mode:vertical-lr}.mm-side-bar__title{min-height:174px;padding:44px 0 7px 2px}@media screen and (max-height: 544px){.mm-side-bar__title{display:none}}.mm-side-bar__env{background-color:hsla(var(--error-h),var(--error-s),var(--error-l),1);color:#fff;margin-bottom:7px;padding:14px 0 14px 2px}.mm-side-bar__env.acc,.mm-side-bar__env.hom{background-color:orange}.mm-side-bar__icon{cursor:pointer;font-family:BebasNeue,Lato,Arial,sans-serif;font-size:84%;height:34px;line-height:26px;padding:4px;position:relative;text-align:center;transition:color .4s;width:44px}.mm-side-bar__icon.with-hover:hover{color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.mm-side-bar__icon.with-divider{border-top:1px solid hsla(var(--bg-h),var(--bg-s),calc(var(--bg-l) + var(--table-even)),1);height:calc(34px + var(--margin-top) * .5);margin-top:calc(var(--margin-top) * .5);padding-top:calc(4px + var(--margin-top) * .5)}.mm-side-bar__icon:not(.with-divider){margin-top:var(--margin-top)}.mm-side-bar__icon.active{color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.mm-side-bar__icon.active:before,.mm-side-bar__icon.active:after{background-color:hsla(var(--error-h),var(--error-s),var(--error-l),1);content:\"\";height:2px;position:absolute;right:2px;top:7px;width:10px;z-index:900}.mm-side-bar__icon.active:before{transform:rotate(45deg)}.mm-side-bar__icon.active:after{transform:rotate(-45deg)}.mm-side-bar__icon.disabled:before,.mm-side-bar__icon.disabled:after{background-color:hsla(var(--disabled-h),var(--disabled-s),var(--disabled-l),1)}\n"], dependencies: [{ kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.UpperCasePipe, name: "uppercase" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuSideBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'spaas-menu-side-bar', template: "<div class=\"mm-side-bar\">\r\n\r\n  @if (env) {\r\n    <div class=\"mm-side-bar__env {{env}}\"\r\n         matTooltipPosition=\"right\"\r\n         matTooltipClass=\"bg-error\"\r\n         matTooltip=\"you are on the {{fullEnv | uppercase}} environment\">\r\n      {{ env }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"mm-side-bar__title\">\r\n    {{ titleText }}\r\n  </div>\r\n\r\n  <ng-content select=\"spaas-menu-side-bar-icon\"></ng-content>\r\n\r\n</div>\r\n", styles: [".mm-side-bar{animation:anim-fade-in .4s .2s ease forwards;height:calc(100vh - 88px);left:0;opacity:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:44px;width:44px;z-index:9994}.mm-side-bar__title,.mm-side-bar__env{font-family:BebasNeue,Lato,Arial,sans-serif;font-size:28px;text-align:right;text-orientation:sideways;transform:rotate(180deg);-webkit-user-select:none;user-select:none;width:44px;writing-mode:vertical-lr}.mm-side-bar__title{min-height:174px;padding:44px 0 7px 2px}@media screen and (max-height: 544px){.mm-side-bar__title{display:none}}.mm-side-bar__env{background-color:hsla(var(--error-h),var(--error-s),var(--error-l),1);color:#fff;margin-bottom:7px;padding:14px 0 14px 2px}.mm-side-bar__env.acc,.mm-side-bar__env.hom{background-color:orange}.mm-side-bar__icon{cursor:pointer;font-family:BebasNeue,Lato,Arial,sans-serif;font-size:84%;height:34px;line-height:26px;padding:4px;position:relative;text-align:center;transition:color .4s;width:44px}.mm-side-bar__icon.with-hover:hover{color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.mm-side-bar__icon.with-divider{border-top:1px solid hsla(var(--bg-h),var(--bg-s),calc(var(--bg-l) + var(--table-even)),1);height:calc(34px + var(--margin-top) * .5);margin-top:calc(var(--margin-top) * .5);padding-top:calc(4px + var(--margin-top) * .5)}.mm-side-bar__icon:not(.with-divider){margin-top:var(--margin-top)}.mm-side-bar__icon.active{color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.mm-side-bar__icon.active:before,.mm-side-bar__icon.active:after{background-color:hsla(var(--error-h),var(--error-s),var(--error-l),1);content:\"\";height:2px;position:absolute;right:2px;top:7px;width:10px;z-index:900}.mm-side-bar__icon.active:before{transform:rotate(45deg)}.mm-side-bar__icon.active:after{transform:rotate(-45deg)}.mm-side-bar__icon.disabled:before,.mm-side-bar__icon.disabled:after{background-color:hsla(var(--disabled-h),var(--disabled-s),var(--disabled-l),1)}\n"] }]
        }], ctorParameters: () => [{ type: i1.ActiveRouteService }, { type: i2.ConfigService }, { type: i3.ThemeService }], propDecorators: { titleText: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1zaWRlLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZ2VtLXNwYWFzL3NyYy9tZW51LXNpZGUtYmFyL21lbnUtc2lkZS1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvbWVudS1zaWRlLWJhci9tZW51LXNpZGUtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFTLE1BQU0sZUFBZSxDQUFDO0FBQ3ZELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUVyRCxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sd0JBQXdCLENBQUM7Ozs7Ozs7QUFRdEQsTUFBTSxPQUFPLG9CQUFxQixTQUFRLGFBQWE7SUFPckQsWUFDVSxrQkFBc0MsRUFDdEMsYUFBNEIsRUFDNUIsWUFBMEI7UUFFbEMsS0FBSyxFQUFFLENBQUM7UUFKQSx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW9CO1FBQ3RDLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBQzVCLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBUjNCLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFeEIsUUFBRyxHQUFHLEVBQUUsQ0FBQztRQUNULFlBQU8sR0FBVyxFQUFFLENBQUE7UUFRbEIsNERBQTREO1FBQzVELElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsY0FBYyxFQUFFLEVBQUUsR0FBRyxDQUFDO1FBQ2pFLENBQUM7SUFDSCxDQUFDO0lBRU8sTUFBTTtRQUNaLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDOUMsSUFDRSxNQUFNLENBQUMsV0FBVztZQUNsQixDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQztZQUN2QyxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxFQUN0QyxDQUFDO1lBQ0QsSUFBSSxDQUFDLEdBQUcsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDMUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDO1FBQ3BDLENBQUM7SUFDSCxDQUFDOytHQWxDVSxvQkFBb0I7bUdBQXBCLG9CQUFvQixzSENaakMsa2RBa0JBOzs0RkROYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UscUJBQXFCOzhJQU10QixTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBY3RpdmVSb3V0ZVNlcnZpY2V9IGZyb20gJy4uL19zZXJ2aWNlcy9hY3RpdmUtcm91dGUuc2VydmljZSc7XHJcbmltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtCYXNlQ29tcG9uZW50fSBmcm9tIFwiLi4vYmFzZS9iYXNlLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQge1RoZW1lU2VydmljZX0gZnJvbSBcIi4uL19zZXJ2aWNlcy90aGVtZS5zZXJ2aWNlXCI7XHJcbmltcG9ydCB7REFUQV9fSEFTX01FTlV9IGZyb20gXCIuLi9fbW9kZWxzL3RoZW1lLm1vZGVsXCI7XHJcbmltcG9ydCB7Q29uZmlnU2VydmljZX0gZnJvbSBcIi4uL19zZXJ2aWNlcy9jb25maWcuc2VydmljZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzcGFhcy1tZW51LXNpZGUtYmFyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbWVudS1zaWRlLWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbWVudS1zaWRlLWJhci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNZW51U2lkZUJhckNvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSB0aXRsZVRleHQgPSAnJztcclxuXHJcbiAgZW52ID0gJyc7XHJcbiAgZnVsbEVudjogc3RyaW5nID0gJydcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGFjdGl2ZVJvdXRlU2VydmljZTogQWN0aXZlUm91dGVTZXJ2aWNlLFxyXG4gICAgcHJpdmF0ZSBjb25maWdTZXJ2aWNlOiBDb25maWdTZXJ2aWNlLFxyXG4gICAgcHJpdmF0ZSB0aGVtZVNlcnZpY2U6IFRoZW1lU2VydmljZSxcclxuICApIHtcclxuICAgIHN1cGVyKCk7XHJcbiAgICAvLyBlbmFibGUgbWVudSBndXR0ZXIgYW5kIG5vdGlmeSBwYXJlbnQgdGhhdCBpZnJhbWUgaGFzIG1lbnVcclxuICAgIHRoaXMudGhlbWVTZXJ2aWNlLnNldEJvZHlEYXRhKERBVEFfX0hBU19NRU5VKTtcclxuICAgIHRoaXMuc2V0RW52KCk7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIGlmICghdGhpcy50aXRsZVRleHQpIHtcclxuICAgICAgdGhpcy50aXRsZVRleHQgPSB0aGlzLmFjdGl2ZVJvdXRlU2VydmljZS5nZXRBY3RpdmVSb3V0ZSgpPy51cmw7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHNldEVudigpOiB2b2lkIHtcclxuICAgIGNvbnN0IGNvbmZpZyA9IHRoaXMuY29uZmlnU2VydmljZS5nZXRDb25maWcoKTtcclxuICAgIGlmIChcclxuICAgICAgY29uZmlnLmVudmlyb25tZW50ICYmXHJcbiAgICAgICFjb25maWcuZW52aXJvbm1lbnQuc3RhcnRzV2l0aCgnbG9jYWwnKSAmJlxyXG4gICAgICAhY29uZmlnLmVudmlyb25tZW50LnN0YXJ0c1dpdGgoJ3Byb2QnKVxyXG4gICAgKSB7XHJcbiAgICAgIHRoaXMuZW52ID0gY29uZmlnLmVudmlyb25tZW50LnNsaWNlKDAsIDMpO1xyXG4gICAgICB0aGlzLmZ1bGxFbnYgPSBjb25maWcuZW52aXJvbm1lbnQ7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwibW0tc2lkZS1iYXJcIj5cclxuXHJcbiAgQGlmIChlbnYpIHtcclxuICAgIDxkaXYgY2xhc3M9XCJtbS1zaWRlLWJhcl9fZW52IHt7ZW52fX1cIlxyXG4gICAgICAgICBtYXRUb29sdGlwUG9zaXRpb249XCJyaWdodFwiXHJcbiAgICAgICAgIG1hdFRvb2x0aXBDbGFzcz1cImJnLWVycm9yXCJcclxuICAgICAgICAgbWF0VG9vbHRpcD1cInlvdSBhcmUgb24gdGhlIHt7ZnVsbEVudiB8IHVwcGVyY2FzZX19IGVudmlyb25tZW50XCI+XHJcbiAgICAgIHt7IGVudiB9fVxyXG4gICAgPC9kaXY+XHJcbiAgfVxyXG5cclxuICA8ZGl2IGNsYXNzPVwibW0tc2lkZS1iYXJfX3RpdGxlXCI+XHJcbiAgICB7eyB0aXRsZVRleHQgfX1cclxuICA8L2Rpdj5cclxuXHJcbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3BhYXMtbWVudS1zaWRlLWJhci1pY29uXCI+PC9uZy1jb250ZW50PlxyXG5cclxuPC9kaXY+XHJcbiJdfQ==