ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
62 lines • 12.9 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from "../base/base.component";
import * as i0 from "@angular/core";
import * as i1 from "../_services/slide-out.service";
import * as i2 from "@angular/material/tooltip";
export class MenuSideBarIconComponent extends BaseComponent {
constructor(slideOutService) {
super();
this.slideOutService = slideOutService;
this.tooltipMsg = '';
this.withTopMargin = false;
this.withHover = true;
this.withDivider = false;
// GENERIC STATE INDICATORS FROM PARENT
this.isDisabled = false;
// TYPE TO INDICATE WHAT THIS ICON SHOULD DO WHEN CLICKED
this.soType = '';
// MOUSE-EVENT EMITTER IF NOT SO-TYPE
this.clicked = new EventEmitter();
this.activeSo = '';
this.isActive = false;
this.getSoActive();
}
getSoActive() {
this.slideOutService.onNewSlideOut()
.pipe(takeUntil(this.onDestroy$))
.subscribe((so) => {
this.activeSo = so;
this.isActive = this.soType !== '' && this.activeSo === this.soType;
});
}
onClick(e) {
if (this.soType) {
this.slideOutService.newSlideOut(this.soType);
}
else if (!this.isDisabled) {
this.clicked.emit(e);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuSideBarIconComponent, deps: [{ token: i1.SlideOutService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuSideBarIconComponent, selector: "spaas-menu-side-bar-icon", inputs: { tooltipMsg: "tooltipMsg", withTopMargin: "withTopMargin", withHover: "withHover", withDivider: "withDivider", isDisabled: "isDisabled", soType: "soType" }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mm-side-bar__icon\"\r\n [style.--margin-top]=\"withTopMargin || withDivider ? '24px' : '0px'\"\r\n [class.active]=\"isActive\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.with-hover]=\"withHover\"\r\n [class.with-divider]=\"withDivider\"\r\n [matTooltip]=\"tooltipMsg\"\r\n matTooltipPosition=\"right\"\r\n (click)=\"onClick($event)\">\r\n <ng-content></ng-content>\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: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuSideBarIconComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-menu-side-bar-icon', template: "<div class=\"mm-side-bar__icon\"\r\n [style.--margin-top]=\"withTopMargin || withDivider ? '24px' : '0px'\"\r\n [class.active]=\"isActive\"\r\n [class.disabled]=\"isDisabled\"\r\n [class.with-hover]=\"withHover\"\r\n [class.with-divider]=\"withDivider\"\r\n [matTooltip]=\"tooltipMsg\"\r\n matTooltipPosition=\"right\"\r\n (click)=\"onClick($event)\">\r\n <ng-content></ng-content>\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.SlideOutService }], propDecorators: { tooltipMsg: [{
type: Input
}], withTopMargin: [{
type: Input
}], withHover: [{
type: Input
}], withDivider: [{
type: Input
}], isDisabled: [{
type: Input
}], soType: [{
type: Input
}], clicked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1zaWRlLWJhci1pY29uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1nZW0tc3BhYXMvc3JjL21lbnUtc2lkZS1iYXIvbWVudS1zaWRlLWJhci1pY29uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1nZW0tc3BhYXMvc3JjL21lbnUtc2lkZS1iYXIvbWVudS1zaWRlLWJhci1pY29uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDckUsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBRXpDLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQzs7OztBQU9yRCxNQUFNLE9BQU8sd0JBQXlCLFNBQVEsYUFBYTtJQW1CekQsWUFDVSxlQUFnQztRQUV4QyxLQUFLLEVBQUUsQ0FBQztRQUZBLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQWxCakMsZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNoQixrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUN0QixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRTdCLHVDQUF1QztRQUM5QixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBRTVCLHlEQUF5RDtRQUNoRCxXQUFNLEdBQUcsRUFBRSxDQUFDO1FBRXJCLHFDQUFxQztRQUMzQixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztRQUVuRCxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsYUFBUSxHQUFHLEtBQUssQ0FBQztRQU1mLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRU8sV0FBVztRQUNqQixJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsRUFBRTthQUNqQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUNoQyxTQUFTLENBQ1IsQ0FBQyxFQUFFLEVBQUUsRUFBRTtZQUNMLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO1lBQ25CLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLE1BQU0sS0FBSyxFQUFFLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3RFLENBQUMsQ0FDRixDQUFDO0lBQ04sQ0FBQztJQUVELE9BQU8sQ0FBQyxDQUFhO1FBQ25CLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQ2hCLElBQUksQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNoRCxDQUFDO2FBQU0sSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUM1QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQzsrR0EzQ1Usd0JBQXdCO21HQUF4Qix3QkFBd0IsOFJDVnJDLDhhQVdBOzs0RkREYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0UsMEJBQTBCO29GQU0zQixVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUdHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBR0csTUFBTTtzQkFBZCxLQUFLO2dCQUdJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHt0YWtlVW50aWx9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHtTbGlkZU91dFNlcnZpY2V9IGZyb20gXCIuLi9fc2VydmljZXMvc2xpZGUtb3V0LnNlcnZpY2VcIjtcclxuaW1wb3J0IHtCYXNlQ29tcG9uZW50fSBmcm9tIFwiLi4vYmFzZS9iYXNlLmNvbXBvbmVudFwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzcGFhcy1tZW51LXNpZGUtYmFyLWljb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9tZW51LXNpZGUtYmFyLWljb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL21lbnUtc2lkZS1iYXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTWVudVNpZGVCYXJJY29uQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpIHRvb2x0aXBNc2cgPSAnJztcclxuICBASW5wdXQoKSB3aXRoVG9wTWFyZ2luID0gZmFsc2U7XHJcbiAgQElucHV0KCkgd2l0aEhvdmVyID0gdHJ1ZTtcclxuICBASW5wdXQoKSB3aXRoRGl2aWRlciA9IGZhbHNlO1xyXG5cclxuICAvLyBHRU5FUklDIFNUQVRFIElORElDQVRPUlMgRlJPTSBQQVJFTlRcclxuICBASW5wdXQoKSBpc0Rpc2FibGVkID0gZmFsc2U7XHJcblxyXG4gIC8vIFRZUEUgVE8gSU5ESUNBVEUgV0hBVCBUSElTIElDT04gU0hPVUxEIERPIFdIRU4gQ0xJQ0tFRFxyXG4gIEBJbnB1dCgpIHNvVHlwZSA9ICcnO1xyXG5cclxuICAvLyBNT1VTRS1FVkVOVCBFTUlUVEVSIElGIE5PVCBTTy1UWVBFXHJcbiAgQE91dHB1dCgpIGNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XHJcblxyXG4gIGFjdGl2ZVNvID0gJyc7XHJcbiAgaXNBY3RpdmUgPSBmYWxzZTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHNsaWRlT3V0U2VydmljZTogU2xpZGVPdXRTZXJ2aWNlLFxyXG4gICkge1xyXG4gICAgc3VwZXIoKTtcclxuICAgIHRoaXMuZ2V0U29BY3RpdmUoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgZ2V0U29BY3RpdmUoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNsaWRlT3V0U2VydmljZS5vbk5ld1NsaWRlT3V0KClcclxuICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMub25EZXN0cm95JCkpXHJcbiAgICAgIC5zdWJzY3JpYmUoXHJcbiAgICAgICAgKHNvKSA9PiB7XHJcbiAgICAgICAgICB0aGlzLmFjdGl2ZVNvID0gc287XHJcbiAgICAgICAgICB0aGlzLmlzQWN0aXZlID0gdGhpcy5zb1R5cGUgIT09ICcnICYmIHRoaXMuYWN0aXZlU28gPT09IHRoaXMuc29UeXBlO1xyXG4gICAgICAgIH1cclxuICAgICAgKTtcclxuICB9XHJcblxyXG4gIG9uQ2xpY2soZTogTW91c2VFdmVudCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMuc29UeXBlKSB7XHJcbiAgICAgIHRoaXMuc2xpZGVPdXRTZXJ2aWNlLm5ld1NsaWRlT3V0KHRoaXMuc29UeXBlKTtcclxuICAgIH0gZWxzZSBpZiAoIXRoaXMuaXNEaXNhYmxlZCkge1xyXG4gICAgICB0aGlzLmNsaWNrZWQuZW1pdChlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJtbS1zaWRlLWJhcl9faWNvblwiXHJcbiAgICAgW3N0eWxlLi0tbWFyZ2luLXRvcF09XCJ3aXRoVG9wTWFyZ2luIHx8IHdpdGhEaXZpZGVyID8gJzI0cHgnIDogJzBweCdcIlxyXG4gICAgIFtjbGFzcy5hY3RpdmVdPVwiaXNBY3RpdmVcIlxyXG4gICAgIFtjbGFzcy5kaXNhYmxlZF09XCJpc0Rpc2FibGVkXCJcclxuICAgICBbY2xhc3Mud2l0aC1ob3Zlcl09XCJ3aXRoSG92ZXJcIlxyXG4gICAgIFtjbGFzcy53aXRoLWRpdmlkZXJdPVwid2l0aERpdmlkZXJcIlxyXG4gICAgIFttYXRUb29sdGlwXT1cInRvb2x0aXBNc2dcIlxyXG4gICAgIG1hdFRvb2x0aXBQb3NpdGlvbj1cInJpZ2h0XCJcclxuICAgICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCI+XHJcbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG48L2Rpdj5cclxuIl19