ngx-gem-spaas/esm2022/slide-out/slide-out.component.mjs

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

import { Component } 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/icon";
export class SlideOutComponent extends BaseComponent {
    constructor(slideOutService) {
        super();
        this.slideOutService = slideOutService;
        this.soActive = '';
        this.getSmActive();
    }
    ngOnDestroy() {
        this.slideOutService.newSlideOut('');
        super.ngOnDestroy();
    }
    // ********************************************************************************************************
    // LOAD DATA
    // ********************************************************************************************************
    getSmActive() {
        this.slideOutService.onNewSlideOut()
            .pipe(takeUntil(this.onDestroy$))
            .subscribe((sm) => {
            this.soActive = sm;
        });
    }
    // ********************************************************************************************************
    // UI
    // ********************************************************************************************************
    onClose() {
        this.slideOutService.newSlideOut('');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlideOutComponent, deps: [{ token: i1.SlideOutService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SlideOutComponent, selector: "spaas-slide-out", usesInheritance: true, ngImport: i0, template: "<div class=\"slide-out\"\r\n     [class.visible]=\"soActive\">\r\n  <div class=\"slide-out__close\"\r\n       [class.visible]=\"soActive\">\r\n    <mat-icon (click)=\"onClose()\">clear</mat-icon>\r\n  </div>\r\n  <ng-content select=\"spaas-slide-out-content\"></ng-content>\r\n</div>\r\n\r\n", styles: [".slide-out{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),.94);height:100vh;position:fixed;left:0;top:0;transform:translate3d(-100%,0,0);transition:transform .2s;width:100%;z-index:9004}.slide-out.visible{transform:translateZ(0)}.slide-out__close{color:hsla(var(--error-h),var(--error-s),var(--error-l),1);opacity:0;position:fixed;right:54px;top:20px;z-index:9999}@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){.slide-out__close{right:10px}}.slide-out__close.visible{animation:rotate .6s;opacity:1}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.slide-out__close .mat-icon{font-size:28px!important;height:28px!important;line-height:28px!important;width:28px!important}.slide-out__content{animation:anim-fade-in .4s .2s ease forwards;display:flex;height:calc(100vh - 28px);justify-content:flex-start;left:88px;opacity:0;overflow-y:auto;overscroll-behavior:contain;position:fixed;top:14px;width:calc(100% - 176px);z-index:9005}@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){.slide-out__content{left:44px;width:calc(100% - 88px)}}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SlideOutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'spaas-slide-out', template: "<div class=\"slide-out\"\r\n     [class.visible]=\"soActive\">\r\n  <div class=\"slide-out__close\"\r\n       [class.visible]=\"soActive\">\r\n    <mat-icon (click)=\"onClose()\">clear</mat-icon>\r\n  </div>\r\n  <ng-content select=\"spaas-slide-out-content\"></ng-content>\r\n</div>\r\n\r\n", styles: [".slide-out{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),.94);height:100vh;position:fixed;left:0;top:0;transform:translate3d(-100%,0,0);transition:transform .2s;width:100%;z-index:9004}.slide-out.visible{transform:translateZ(0)}.slide-out__close{color:hsla(var(--error-h),var(--error-s),var(--error-l),1);opacity:0;position:fixed;right:54px;top:20px;z-index:9999}@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){.slide-out__close{right:10px}}.slide-out__close.visible{animation:rotate .6s;opacity:1}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.slide-out__close .mat-icon{font-size:28px!important;height:28px!important;line-height:28px!important;width:28px!important}.slide-out__content{animation:anim-fade-in .4s .2s ease forwards;display:flex;height:calc(100vh - 28px);justify-content:flex-start;left:88px;opacity:0;overflow-y:auto;overscroll-behavior:contain;position:fixed;top:14px;width:calc(100% - 176px);z-index:9005}@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){.slide-out__content{left:44px;width:calc(100% - 88px)}}\n"] }]
        }], ctorParameters: () => [{ type: i1.SlideOutService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtb3V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1nZW0tc3BhYXMvc3JjL3NsaWRlLW91dC9zbGlkZS1vdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvc2xpZGUtb3V0L3NsaWRlLW91dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFZLE1BQU0sZUFBZSxDQUFDO0FBQ25ELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6QyxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7Ozs7QUFRckQsTUFBTSxPQUFPLGlCQUFrQixTQUFRLGFBQWE7SUFJbEQsWUFDVSxlQUFnQztRQUV4QyxLQUFLLEVBQUUsQ0FBQztRQUZBLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQUgxQyxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBTVosSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFUSxXQUFXO1FBQ2xCLElBQUksQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3JDLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUNyQixDQUFDO0lBRUQsMkdBQTJHO0lBQzNHLFlBQVk7SUFDWiwyR0FBMkc7SUFFbkcsV0FBVztRQUNqQixJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsRUFBRTthQUNqQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUNoQyxTQUFTLENBQ1IsQ0FBQyxFQUFFLEVBQUUsRUFBRTtZQUNMLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLENBQUMsQ0FDRixDQUFDO0lBQ04sQ0FBQztJQUVELDJHQUEyRztJQUMzRyxLQUFLO0lBQ0wsMkdBQTJHO0lBRTNHLE9BQU87UUFDTCxJQUFJLENBQUMsZUFBZSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN2QyxDQUFDOytHQXBDVSxpQkFBaUI7bUdBQWpCLGlCQUFpQiw4RUNYOUIscVNBU0E7OzRGREVhLGlCQUFpQjtrQkFON0IsU0FBUzsrQkFDRSxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgT25EZXN0cm95fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHt0YWtlVW50aWx9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHtTbGlkZU91dFNlcnZpY2V9IGZyb20gJy4uL19zZXJ2aWNlcy9zbGlkZS1vdXQuc2VydmljZSc7XHJcbmltcG9ydCB7QmFzZUNvbXBvbmVudH0gZnJvbSBcIi4uL2Jhc2UvYmFzZS5jb21wb25lbnRcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc3BhYXMtc2xpZGUtb3V0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGUtb3V0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zbGlkZS1vdXQuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIFNsaWRlT3V0Q29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XHJcblxyXG4gIHNvQWN0aXZlID0gJyc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBzbGlkZU91dFNlcnZpY2U6IFNsaWRlT3V0U2VydmljZSxcclxuICApIHtcclxuICAgIHN1cGVyKCk7XHJcbiAgICB0aGlzLmdldFNtQWN0aXZlKCk7XHJcbiAgfVxyXG5cclxuICBvdmVycmlkZSBuZ09uRGVzdHJveSgpIHtcclxuICAgIHRoaXMuc2xpZGVPdXRTZXJ2aWNlLm5ld1NsaWRlT3V0KCcnKTtcclxuICAgIHN1cGVyLm5nT25EZXN0cm95KClcclxuICB9XHJcblxyXG4gIC8vICoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXHJcbiAgLy8gTE9BRCBEQVRBXHJcbiAgLy8gKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcclxuXHJcbiAgcHJpdmF0ZSBnZXRTbUFjdGl2ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2xpZGVPdXRTZXJ2aWNlLm9uTmV3U2xpZGVPdXQoKVxyXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kkKSlcclxuICAgICAgLnN1YnNjcmliZShcclxuICAgICAgICAoc20pID0+IHtcclxuICAgICAgICAgIHRoaXMuc29BY3RpdmUgPSBzbTtcclxuICAgICAgICB9XHJcbiAgICAgICk7XHJcbiAgfVxyXG5cclxuICAvLyAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKlxyXG4gIC8vIFVJXHJcbiAgLy8gKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKipcclxuXHJcbiAgb25DbG9zZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2xpZGVPdXRTZXJ2aWNlLm5ld1NsaWRlT3V0KCcnKTtcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJzbGlkZS1vdXRcIlxyXG4gICAgIFtjbGFzcy52aXNpYmxlXT1cInNvQWN0aXZlXCI+XHJcbiAgPGRpdiBjbGFzcz1cInNsaWRlLW91dF9fY2xvc2VcIlxyXG4gICAgICAgW2NsYXNzLnZpc2libGVdPVwic29BY3RpdmVcIj5cclxuICAgIDxtYXQtaWNvbiAoY2xpY2spPVwib25DbG9zZSgpXCI+Y2xlYXI8L21hdC1pY29uPlxyXG4gIDwvZGl2PlxyXG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInNwYWFzLXNsaWRlLW91dC1jb250ZW50XCI+PC9uZy1jb250ZW50PlxyXG48L2Rpdj5cclxuXHJcbiJdfQ==