@pepperi-addons/ngx-lib 0.3.15-beta.8 → 0.4.0-angular14.2

package/fesm2015/pepperi-addons-ngx-lib-side-bar.mjs

@@ -0,0 +1,194 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Injectable, Input, Output, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatCommonModule } from '@angular/material/core';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i1 from '@pepperi-addons/ngx-lib';
+import { PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
+import { pepIconArrowRight, pepIconArrowLeft, pepIconSystemClose, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+
+class PepSideBarComponent {
+    constructor(hostElement, renderer, layoutService) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.layoutService = layoutService;
+        this.ignoreResize = false;
+        this.showHeader = true;
+        this.showFooter = false;
+        this._useAsWebComponent = false;
+        this._animationTime = 350; // milliseconds.
+        this.state = 'open';
+        this.toggleButtonArrowName = pepIconArrowRight.name;
+        this.isLargeScreen = true;
+        this.stateChange = new EventEmitter();
+        this.isMouseIn = false;
+        this.sideBarHeight = '100%';
+        this.PepScreenSizeType = PepScreenSizeType;
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+            this.isLargeScreen = size < PepScreenSizeType.MD;
+        });
+    }
+    set useAsWebComponent(value) {
+        if (value) {
+            this.exportFunctionsOnHostElement();
+        }
+    }
+    get useAsWebComponent() {
+        return this._useAsWebComponent;
+    }
+    exportFunctionsOnHostElement() {
+        // This is for web component usage for use those functions.
+        this.hostElement.nativeElement.open = this.open.bind(this);
+        this.hostElement.nativeElement.close = this.close.bind(this);
+    }
+    setState(state) {
+        this.state = state;
+        this.toggleButtonArrowName =
+            // state === 'open' ?
+            // (this.layoutService.isRtl() ? pepIconArrowRight.name : pepIconArrowLeft.name) :
+            (this.layoutService.isRtl() ? pepIconArrowLeft.name : pepIconArrowRight.name);
+    }
+    toggleState() {
+        this.setState(this.state === 'close' ? 'open' : 'close');
+    }
+    ngOnInit() {
+        document.documentElement.style.setProperty(PepSideBarComponent.ONE_MULTI_BY_DIR_KEY, this.layoutService.isRtl() ? '1' : '-1');
+        this.setState(this.isLargeScreen ? 'open' : 'close');
+    }
+    setSideBarHeight(event) {
+        // const from = event.relatedTarget
+        //     ? event.relatedTarget
+        //     : event.fromElement;
+        // const to = event.target ? event.target : event.toElement;
+        // if (typeof from === 'undefined' || typeof to === 'undefined') {
+        //     return;
+        // }
+        // this.isMouseIn = true;
+        // this.sideBarHeight = window.innerHeight - to.offsetTop + 'px';
+    }
+    mouseLeaveSideBar(event) {
+        // const from = event.relatedTarget
+        //     ? event.relatedTarget
+        //     : event.fromElement;
+        // const to = event.target ? event.target : event.toElement;
+        // if (typeof from === 'undefined' || typeof to === 'undefined') {
+        //     return;
+        // }
+        // this.sideBarHeight = '100%';
+        // this.isMouseIn = false;
+    }
+    open() {
+        if (this.sidenav) {
+            this.sidenav.open();
+        }
+        this.state = 'open';
+    }
+    close() {
+        if (this.sidenav) {
+            this.sidenav.close();
+        }
+        this.state = 'close';
+    }
+    toggle() {
+        if (this.sidenav) {
+            // const isOpen = this.sidenav.opened;
+            this.sidenav.toggle();
+        }
+        this.toggleState();
+    }
+    toggleSideWrapper() {
+        this.toggleState();
+        // Raise event after animation finish.
+        setTimeout(() => {
+            this.stateChange.emit({ state: this.state });
+        }, this._animationTime);
+    }
+    toggleSidenav(isOpen) {
+        this.setState(isOpen ? 'open' : 'close');
+        // Raise event after animation finish.
+        setTimeout(() => {
+            this.stateChange.emit({ state: this.state });
+        }, this._animationTime);
+    }
+}
+PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
+PepSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n    </ng-container>\n    <ng-template #largeScreensBlock>\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\n                <mat-icon>\n                    <pep-icon [name]=\"toggleButtonArrowName\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #notLargeScreensBlock>\n        <mat-sidenav-container [hasBackdrop]=\"true\">\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\n                (openedChange)=\"toggleSidenav($event)\">\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            </mat-sidenav>\n        </mat-sidenav-container>\n    </ng-template>\n</div>\n\n<ng-template #sideLayoutTemplate>\n    <div class=\"side-layout\">\n        <div *ngIf=\"showHeader\" class=\"header-content\">\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        </div>\n        <div class=\"main-content\">\n            <div class=\"content\">\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n            </div>\n        </div>\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\n            <div class=\"content pep-border-top body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n    <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n    <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n    <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n    <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+PepSideBarComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-side-bar', template: "<div class=\"pep-side-bar-container\">\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n    </ng-container>\n    <ng-template #largeScreensBlock>\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\n                <mat-icon>\n                    <pep-icon [name]=\"toggleButtonArrowName\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #notLargeScreensBlock>\n        <mat-sidenav-container [hasBackdrop]=\"true\">\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\n                (openedChange)=\"toggleSidenav($event)\">\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            </mat-sidenav>\n        </mat-sidenav-container>\n    </ng-template>\n</div>\n\n<ng-template #sideLayoutTemplate>\n    <div class=\"side-layout\">\n        <div *ngIf=\"showHeader\" class=\"header-content\">\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        </div>\n        <div class=\"main-content\">\n            <div class=\"content\">\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n            </div>\n        </div>\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\n            <div class=\"content pep-border-top body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n    <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n    <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n    <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n    <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
+        }, {
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PepLayoutService }]; }, propDecorators: { ignoreResize: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], useAsWebComponent: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }], sidenav: [{
+                type: ViewChild,
+                args: ['sidenav']
+            }] } });
+
+class PepSideBarModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([pepIconSystemClose]);
+    }
+}
+PepSideBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepSideBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarModule, declarations: [PepSideBarComponent], imports: [CommonModule,
+        // Material modules,
+        MatCommonModule,
+        MatIconModule,
+        MatSidenavModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule], exports: [PepSideBarComponent] });
+PepSideBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarModule, imports: [CommonModule,
+        // Material modules,
+        MatCommonModule,
+        MatIconModule,
+        MatSidenavModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepSideBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatIconModule,
+                        MatSidenavModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepIconModule,
+                    ],
+                    exports: [PepSideBarComponent],
+                    declarations: [PepSideBarComponent],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
+
+/*
+ * Public API Surface of ngx-lib/side-bar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PepSideBarComponent, PepSideBarModule };
+//# sourceMappingURL=pepperi-addons-ngx-lib-side-bar.mjs.map

package/fesm2015/pepperi-addons-ngx-lib-side-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pepperi-addons-ngx-lib-side-bar.mjs","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../projects/ngx-lib/side-bar/side-bar.component.html","../../../projects/ngx-lib/side-bar/side-bar.module.ts","../../../projects/ngx-lib/side-bar/public-api.ts","../../../projects/ngx-lib/side-bar/pepperi-addons-ngx-lib-side-bar.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    Injectable,\n    Input,\n    Output,\n    EventEmitter,\n    ViewChild,\n    ElementRef,\n    Renderer2,\n} from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport {\n    trigger,\n    state,\n    style,\n    transition,\n    animate,\n} from '@angular/animations';\nimport {\n    PepCustomizationService,\n    PepLayoutService,\n    PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { IPepSideBarStateChangeEvent, PepSideBarStateType } from './side-bar.model';\nimport { pepIconArrowLeft, pepIconArrowRight } from '@pepperi-addons/ngx-lib/icon';\n\n@Component({\n    selector: 'pep-side-bar',\n    templateUrl: './side-bar.component.html',\n    styleUrls: ['./side-bar.component.scss', './side-bar.component.theme.scss']\n})\n@Injectable()\nexport class PepSideBarComponent implements OnInit {\n    static ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';\n\n    @Input() ignoreResize = false;\n    @Input() showHeader = true;\n    @Input() showFooter = false;\n\n    private _useAsWebComponent = false;\n    private readonly _animationTime = 350; // milliseconds.\n\n    state: PepSideBarStateType = 'open';\n    toggleButtonArrowName: string = pepIconArrowRight.name;\n    isLargeScreen = true;\n\n    @Input()\n    set useAsWebComponent(value: boolean) {\n        if (value) {\n            this.exportFunctionsOnHostElement();\n        }\n    }\n    get useAsWebComponent(): boolean {\n        return this._useAsWebComponent;\n    }\n\n    @Output()\n    stateChange: EventEmitter<IPepSideBarStateChangeEvent> = new EventEmitter<IPepSideBarStateChangeEvent>();\n\n    @ViewChild('sidenav') sidenav: MatSidenav;\n\n    isMouseIn = false;\n    sideBarHeight = '100%';\n\n    screenSize: PepScreenSizeType;\n    PepScreenSizeType = PepScreenSizeType;\n\n    constructor(\n        private hostElement: ElementRef,\n        private renderer: Renderer2,\n        public layoutService: PepLayoutService\n    ) {\n        this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n            this.screenSize = size;\n            this.isLargeScreen = size < PepScreenSizeType.MD;\n        });\n    }\n\n    private exportFunctionsOnHostElement() {\n        // This is for web component usage for use those functions.\n        this.hostElement.nativeElement.open = this.open.bind(this);\n        this.hostElement.nativeElement.close = this.close.bind(this);\n    }\n\n    private setState(state: PepSideBarStateType) {\n        this.state = state;\n        this.toggleButtonArrowName =\n            // state === 'open' ?\n            // (this.layoutService.isRtl() ? pepIconArrowRight.name : pepIconArrowLeft.name) :\n            (this.layoutService.isRtl() ? pepIconArrowLeft.name : pepIconArrowRight.name);\n    }\n\n    private toggleState() {\n        this.setState(this.state === 'close' ? 'open' : 'close');\n    }\n\n    ngOnInit() {\n        document.documentElement.style.setProperty(PepSideBarComponent.ONE_MULTI_BY_DIR_KEY, this.layoutService.isRtl() ? '1' : '-1');\n        this.setState(this.isLargeScreen ? 'open' : 'close');\n    }\n\n    setSideBarHeight(event) {\n        // const from = event.relatedTarget\n        //     ? event.relatedTarget\n        //     : event.fromElement;\n        // const to = event.target ? event.target : event.toElement;\n\n        // if (typeof from === 'undefined' || typeof to === 'undefined') {\n        //     return;\n        // }\n        // this.isMouseIn = true;\n\n        // this.sideBarHeight = window.innerHeight - to.offsetTop + 'px';\n    }\n\n    mouseLeaveSideBar(event) {\n        // const from = event.relatedTarget\n        //     ? event.relatedTarget\n        //     : event.fromElement;\n        // const to = event.target ? event.target : event.toElement;\n\n        // if (typeof from === 'undefined' || typeof to === 'undefined') {\n        //     return;\n        // }\n        // this.sideBarHeight = '100%';\n        // this.isMouseIn = false;\n    }\n\n    open() {\n        if (this.sidenav) {\n            this.sidenav.open();\n        }\n\n        this.state = 'open';\n    }\n\n    close() {\n        if (this.sidenav) {\n            this.sidenav.close();\n        }\n\n        this.state = 'close';\n    }\n\n    toggle() {\n        if (this.sidenav) {\n            // const isOpen = this.sidenav.opened;\n            this.sidenav.toggle();\n        }\n\n        this.toggleState();\n    }\n\n    toggleSideWrapper() {\n        this.toggleState();\n        // Raise event after animation finish.\n        setTimeout(() => {\n            this.stateChange.emit({ state: this.state });\n        }, this._animationTime);\n    }\n\n    toggleSidenav(isOpen: boolean) {\n        this.setState(isOpen ? 'open' : 'close');\n        // Raise event after animation finish.\n        setTimeout(() => {\n            this.stateChange.emit({ state: this.state });\n        }, this._animationTime);\n    }\n}\n","<div class=\"pep-side-bar-container\">\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n    </ng-container>\n    <ng-template #largeScreensBlock>\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\n                <mat-icon>\n                    <pep-icon [name]=\"toggleButtonArrowName\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #notLargeScreensBlock>\n        <mat-sidenav-container [hasBackdrop]=\"true\">\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\n                (openedChange)=\"toggleSidenav($event)\">\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            </mat-sidenav>\n        </mat-sidenav-container>\n    </ng-template>\n</div>\n\n<ng-template #sideLayoutTemplate>\n    <div class=\"side-layout\">\n        <div *ngIf=\"showHeader\" class=\"header-content\">\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        </div>\n        <div class=\"main-content\">\n            <div class=\"content\">\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n            </div>\n        </div>\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\n            <div class=\"content pep-border-top body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n    <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n    <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n    <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n    <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSidenavModule } from '@angular/material/sidenav';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepSideBarComponent } from './side-bar.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules,\n        MatCommonModule,\n        MatIconModule,\n        MatSidenavModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n    ],\n    exports: [PepSideBarComponent],\n    declarations: [PepSideBarComponent],\n})\nexport class PepSideBarModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/side-bar\n */\nexport * from './side-bar.module';\nexport * from './side-bar.component';\nexport * from './side-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i5","i1"],"mappings":"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"}