@pepperi-addons/ngx-lib 0.3.15-beta.57 → 0.3.15-beta.58

package/bundles/pepperi-addons-ngx-lib-side-bar.umd.js

@@ -13,6 +13,7 @@
             this.ignoreResize = false;
             this.showHeader = true;
             this.showFooter = false;
+            this.showToggle = true;
             this._useAsWebComponent = false;
             this._animationTime = 350; // milliseconds.
             this.state = 'open';
@@ -121,7 +122,7 @@
     PepSideBarComponent.decorators = [
         { type: core.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>",
+                    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': showToggle && state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button *ngIf=\"showToggle\" 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 .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;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 .35s ease-out;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(1.5rem + .5rem + 2.5rem) - .75rem);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 .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;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 - 4rem);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(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;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(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);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:1.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(.5rem + 2.5rem);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(1.5rem + .5rem + 2.5rem);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:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-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);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:rgba(26,26,26,.24);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:#fff;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%))}"]
                 },] },
         { type: core.Injectable }
@@ -135,6 +136,7 @@
         ignoreResize: [{ type: core.Input }],
         showHeader: [{ type: core.Input }],
         showFooter: [{ type: core.Input }],
+        showToggle: [{ type: core.Input }],
         useAsWebComponent: [{ type: core.Input }],
         stateChange: [{ type: core.Output }],
         sidenav: [{ type: core.ViewChild, args: ['sidenav',] }]

package/bundles/pepperi-addons-ngx-lib-side-bar.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-side-bar.umd.js","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../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","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":["pepIconArrowRight","EventEmitter","PepScreenSizeType","pepIconArrowLeft","Component","Injectable","ElementRef","Renderer2","PepLayoutService","Input","Output","ViewChild","pepIconSystemClose","NgModule","CommonModule","MatCommonModule","MatIconModule","MatSidenavModule","PepNgxLibModule","PepIconModule","PepIconRegistry"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-side-bar.umd.js","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../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    @Input() showToggle = true;\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","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":["pepIconArrowRight","EventEmitter","PepScreenSizeType","pepIconArrowLeft","Component","Injectable","ElementRef","Renderer2","PepLayoutService","Input","Output","ViewChild","pepIconSystemClose","NgModule","CommonModule","MatCommonModule","MatIconModule","MatSidenavModule","PepNgxLibModule","PepIconModule","PepIconRegistry"],"mappings":"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"}

package/esm2015/side-bar/side-bar.component.js

@@ -9,6 +9,7 @@ export class PepSideBarComponent {
         this.ignoreResize = false;
         this.showHeader = true;
         this.showFooter = false;
+        this.showToggle = true;
         this._useAsWebComponent = false;
         this._animationTime = 350; // milliseconds.
         this.state = 'open';
@@ -110,7 +111,7 @@ PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
 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>",
+                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': showToggle && state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button *ngIf=\"showToggle\" 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 .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;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 .35s ease-out;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(1.5rem + .5rem + 2.5rem) - .75rem);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 .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;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 - 4rem);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(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;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(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);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:1.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(.5rem + 2.5rem);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(1.5rem + .5rem + 2.5rem);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:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-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);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:rgba(26,26,26,.24);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:#fff;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%))}"]
             },] },
     { type: Injectable }
@@ -124,8 +125,9 @@ PepSideBarComponent.propDecorators = {
     ignoreResize: [{ type: Input }],
     showHeader: [{ type: Input }],
     showFooter: [{ type: Input }],
+    showToggle: [{ type: Input }],
     useAsWebComponent: [{ type: Input }],
     stateChange: [{ type: Output }],
     sidenav: [{ type: ViewChild, args: ['sidenav',] }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9zaWRlLWJhci9zaWRlLWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxVQUFVLEVBQ1YsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBQ1osU0FBUyxFQUNULFVBQVUsRUFDVixTQUFTLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFTdkIsT0FBTyxFQUVILGdCQUFnQixFQUNoQixpQkFBaUIsR0FDcEIsTUFBTSx5QkFBeUIsQ0FBQztBQUVqQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQVFuRixNQUFNLE9BQU8sbUJBQW1CO0lBbUM1QixZQUNZLFdBQXVCLEVBQ3ZCLFFBQW1CLEVBQ3BCLGFBQStCO1FBRjlCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDcEIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBbkNqQyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUNyQixlQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFFcEIsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLG1CQUFjLEdBQUcsR0FBRyxDQUFDLENBQUMsZ0JBQWdCO1FBRXZELFVBQUssR0FBd0IsTUFBTSxDQUFDO1FBQ3BDLDBCQUFxQixHQUFXLGlCQUFpQixDQUFDLElBQUksQ0FBQztRQUN2RCxrQkFBYSxHQUFHLElBQUksQ0FBQztRQWFyQixnQkFBVyxHQUE4QyxJQUFJLFlBQVksRUFBK0IsQ0FBQztRQUl6RyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLGtCQUFhLEdBQUcsTUFBTSxDQUFDO1FBR3ZCLHNCQUFpQixHQUFHLGlCQUFpQixDQUFDO1FBT2xDLElB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Q0FBQyxNQUFNLEVBQUUsQ0FBQztTQUN6QjtRQUVELElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsaUJBQWlCO1FBQ2IsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ25CLHNDQUFzQztRQUN0QyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ1osSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDakQsQ0FBQyxFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQWU7UUFDekIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekMsc0NBQXNDO1FBQ3RDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUNqRCxDQUFDLEVBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQzVCLENBQUM7O0FBdElNLHdDQUFvQixHQUFHLHdCQUF3QixDQUFDOztZQVAxRCxTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLGNBQWM7Z0JBQ3hCLDIvRkFBd0M7O2FBRTNDO1lBQ0EsVUFBVTs7O1lBeEJQLFVBQVU7WUFDVixTQUFTO1lBWVQsZ0JBQWdCOzs7MkJBZWYsS0FBSzt5QkFDTCxLQUFLO3lCQUNMLEtBQUs7Z0NBU0wsS0FBSzswQkFVTCxNQUFNO3NCQUdOLFNBQVMsU0FBQyxTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsXG4gICAgT25Jbml0LFxuICAgIEluamVjdGFibGUsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBWaWV3Q2hpbGQsXG4gICAgRWxlbWVudFJlZixcbiAgICBSZW5kZXJlcjIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0U2lkZW5hdiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NpZGVuYXYnO1xuaW1wb3J0IHtcbiAgICB0cmlnZ2VyLFxuICAgIHN0YXRlLFxuICAgIHN0eWxlLFxuICAgIHRyYW5zaXRpb24sXG4gICAgYW5pbWF0ZSxcbn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1xuICAgIFBlcEN1c3RvbWl6YXRpb25TZXJ2aWNlLFxuICAgIFBlcExheW91dFNlcnZpY2UsXG4gICAgUGVwU2NyZWVuU2l6ZVR5cGUsXG59IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliJztcbmltcG9ydCB7IElQZXBTaWRlQmFyU3RhdGVDaGFuZ2VFdmVudCwgUGVwU2lkZUJhclN0YXRlVHlwZSB9IGZyb20gJy4vc2lkZS1iYXIubW9kZWwnO1xuaW1wb3J0IHsgcGVwSWNvbkFycm93TGVmdCwgcGVwSWNvbkFycm93UmlnaHQgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9pY29uJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdwZXAtc2lkZS1iYXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaWRlLWJhci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2lkZS1iYXIuY29tcG9uZW50LnNjc3MnLCAnLi9zaWRlLWJhci5jb21wb25lbnQudGhlbWUuc2NzcyddXG59KVxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFBlcFNpZGVCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIHN0YXRpYyBPTkVfTVVMVElfQllfRElSX0tFWSA9ICctLXBlcC1vbmUtbXVsdGktYnktZGlyJztcblxuICAgIEBJbnB1dCgpIGlnbm9yZVJlc2l6ZSA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHNob3dIZWFkZXIgPSB0cnVlO1xuICAgIEBJbnB1dCgpIHNob3dGb290ZXIgPSBmYWxzZTtcblxuICAgIHByaXZhdGUgX3VzZUFzV2ViQ29tcG9uZW50ID0gZmFsc2U7XG4gICAgcHJpdmF0ZSByZWFkb25seSBfYW5pbWF0aW9uVGltZSA9IDM1MDsgLy8gbWlsbGlzZWNvbmRzLlxuXG4gICAgc3RhdGU6IFBlcFNpZGVCYXJTdGF0ZVR5cGUgPSAnb3Blbic7XG4gICAgdG9nZ2xlQnV0dG9uQXJyb3dOYW1lOiBzdHJpbmcgPSBwZXBJY29uQXJyb3dSaWdodC5uYW1lO1xuICAgIGlzTGFyZ2VTY3JlZW4gPSB0cnVlO1xuXG4gICAgQElucHV0KClcbiAgICBzZXQgdXNlQXNXZWJDb21wb25lbnQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICAgICAgaWYgKHZhbHVlKSB7XG4gICAgICAgICAgICB0aGlzLmV4cG9ydEZ1bmN0aW9uc09uSG9zdEVsZW1lbnQoKTtcbiAgICAgICAgfVxuICAgIH1cbiAgICBnZXQgdXNlQXNXZWJDb21wb25lbnQoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl91c2VBc1dlYkNvbXBvbmVudDtcbiAgICB9XG5cbiAgICBAT3V0cHV0KClcbiAgICBzdGF0ZUNoYW5nZTogRXZlbnRFbWl0dGVyPElQZXBTaWRlQmFyU3RhdGVDaGFuZ2VFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPElQZXBTaWRlQmFyU3RhdGVDaGFuZ2VFdmVudD4oKTtcblxuICAgIEBWaWV3Q2hpbGQoJ3NpZGVuYXYnKSBzaWRlbmF2OiBNYXRTaWRlbmF2O1xuXG4gICAgaXNNb3VzZUluID0gZmFsc2U7XG4gICAgc2lkZUJhckhlaWdodCA9ICcxMDAlJztcblxuICAgIHNjcmVlblNpemU6IFBlcFNjcmVlblNpemVUeXBlO1xuICAgIFBlcFNjcmVlblNpemVUeXBlID0gUGVwU2NyZWVuU2l6ZVR5cGU7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSBob3N0RWxlbWVudDogRWxlbWVudFJlZixcbiAgICAgICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgICAgICBwdWJsaWMgbGF5b3V0U2VydmljZTogUGVwTGF5b3V0U2VydmljZVxuICAgICkge1xuICAgICAgICB0aGlzLmxheW91dFNlcnZpY2Uub25SZXNpemUkLnN1YnNjcmliZSgoc2l6ZTogUGVwU2NyZWVuU2l6ZVR5cGUpID0+IHtcbiAgICAgICAgICAgIHRoaXMuc2NyZWVuU2l6ZSA9IHNpemU7XG4gICAgICAgICAgICB0aGlzLmlzTGFyZ2VTY3JlZW4gPSBzaXplIDwgUGVwU2NyZWVuU2l6ZVR5cGUuTUQ7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHByaXZhdGUgZXhwb3J0RnVuY3Rpb25zT25Ib3N0RWxlbWVudCgpIHtcbiAgICAgICAgLy8gVGhpcyBpcyBmb3Igd2ViIGNvbXBvbmVudCB1c2FnZSBmb3IgdXNlIHRob3NlIGZ1bmN0aW9ucy5cbiAgICAgICAgdGhpcy5ob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50Lm9wZW4gPSB0aGlzLm9wZW4uYmluZCh0aGlzKTtcbiAgICAgICAgdGhpcy5ob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50LmNsb3NlID0gdGhpcy5jbG9zZS5iaW5kKHRoaXMpO1xuICAgIH1cblxuICAgIHByaXZhdGUgc2V0U3RhdGUoc3RhdGU6IFBlcFNpZGVCYXJTdGF0ZVR5cGUpIHtcbiAgICAgICAgdGhpcy5zdGF0ZSA9IHN0YXRlO1xuICAgICAgICB0aGlzLnRvZ2dsZUJ1dHRvbkFycm93TmFtZSA9XG4gICAgICAgICAgICAvLyBzdGF0ZSA9PT0gJ29wZW4nID9cbiAgICAgICAgICAgIC8vICh0aGlzLmxheW91dFNlcnZpY2UuaXNSdGwoKSA/IHBlcEljb25BcnJvd1JpZ2h0Lm5hbWUgOiBwZXBJY29uQXJyb3dMZWZ0Lm5hbWUpIDpcbiAgICAgICAgICAgICh0aGlzLmxheW91dFNlcnZpY2UuaXNSdGwoKSA/IHBlcEljb25BcnJvd0xlZnQubmFtZSA6IHBlcEljb25BcnJvd1JpZ2h0Lm5hbWUpO1xuICAgIH1cblxuICAgIHByaXZhdGUgdG9nZ2xlU3RhdGUoKSB7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUodGhpcy5zdGF0ZSA9PT0gJ2Nsb3NlJyA/ICdvcGVuJyA6ICdjbG9zZScpO1xuICAgIH1cblxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoUGVwU2lkZUJhckNvbXBvbmVudC5PTkVfTVVMVElfQllfRElSX0tFWSwgdGhpcy5sYXlvdXRTZXJ2aWNlLmlzUnRsKCkgPyAnMScgOiAnLTEnKTtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh0aGlzLmlzTGFyZ2VTY3JlZW4gPyAnb3BlbicgOiAnY2xvc2UnKTtcbiAgICB9XG5cbiAgICBzZXRTaWRlQmFySGVpZ2h0KGV2ZW50KSB7XG4gICAgICAgIC8vIGNvbnN0IGZyb20gPSBldmVudC5yZWxhdGVkVGFyZ2V0XG4gICAgICAgIC8vICAgICA/IGV2ZW50LnJlbGF0ZWRUYXJnZXRcbiAgICAgICAgLy8gICAgIDogZXZlbnQuZnJvbUVsZW1lbnQ7XG4gICAgICAgIC8vIGNvbnN0IHRvID0gZXZlbnQudGFyZ2V0ID8gZXZlbnQudGFyZ2V0IDogZXZlbnQudG9FbGVtZW50O1xuXG4gICAgICAgIC8vIGlmICh0eXBlb2YgZnJvbSA9PT0gJ3VuZGVmaW5lZCcgfHwgdHlwZW9mIHRvID09PSAndW5kZWZpbmVkJykge1xuICAgICAgICAvLyAgICAgcmV0dXJuO1xuICAgICAgICAvLyB9XG4gICAgICAgIC8vIHRoaXMuaXNNb3VzZUluID0gdHJ1ZTtcblxuICAgICAgICAvLyB0aGlzLnNpZGVCYXJIZWlnaHQgPSB3aW5kb3cuaW5uZXJIZWlnaHQgLSB0by5vZmZzZXRUb3AgKyAncHgnO1xuICAgIH1cblxuICAgIG1vdXNlTGVhdmVTaWRlQmFyKGV2ZW50KSB7XG4gICAgICAgIC8vIGNvbnN0IGZyb20gPSBldmVudC5yZWxhdGVkVGFyZ2V0XG4gICAgICAgIC8vICAgICA/IGV2ZW50LnJlbGF0ZWRUYXJnZXRcbiAgICAgICAgLy8gICAgIDogZXZlbnQuZnJvbUVsZW1lbnQ7XG4gICAgICAgIC8vIGNvbnN0IHRvID0gZXZlbnQudGFyZ2V0ID8gZXZlbnQudGFyZ2V0IDogZXZlbnQudG9FbGVtZW50O1xuXG4gICAgICAgIC8vIGlmICh0eXBlb2YgZnJvbSA9PT0gJ3VuZGVmaW5lZCcgfHwgdHlwZW9mIHRvID09PSAndW5kZWZpbmVkJykge1xuICAgICAgICAvLyAgICAgcmV0dXJuO1xuICAgICAgICAvLyB9XG4gICAgICAgIC8vIHRoaXMuc2lkZUJhckhlaWdodCA9ICcxMDAlJztcbiAgICAgICAgLy8gdGhpcy5pc01vdXNlSW4gPSBmYWxzZTtcbiAgICB9XG5cbiAgICBvcGVuKCkge1xuICAgICAgICBpZiAodGhpcy5zaWRlbmF2KSB7XG4gICAgICAgICAgICB0aGlzLnNpZGVuYXYub3BlbigpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5zdGF0ZSA9ICdvcGVuJztcbiAgICB9XG5cbiAgICBjbG9zZSgpIHtcbiAgICAgICAgaWYgKHRoaXMuc2lkZW5hdikge1xuICAgICAgICAgICAgdGhpcy5zaWRlbmF2LmNsb3NlKCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnN0YXRlID0gJ2Nsb3NlJztcbiAgICB9XG5cbiAgICB0b2dnbGUoKSB7XG4gICAgICAgIGlmICh0aGlzLnNpZGVuYXYpIHtcbiAgICAgICAgICAgIC8vIGNvbnN0IGlzT3BlbiA9IHRoaXMuc2lkZW5hdi5vcGVuZWQ7XG4gICAgICAgICAgICB0aGlzLnNpZGVuYXYudG9nZ2xlKCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnRvZ2dsZVN0YXRlKCk7XG4gICAgfVxuXG4gICAgdG9nZ2xlU2lkZVdyYXBwZXIoKSB7XG4gICAgICAgIHRoaXMudG9nZ2xlU3RhdGUoKTtcbiAgICAgICAgLy8gUmFpc2UgZXZlbnQgYWZ0ZXIgYW5pbWF0aW9uIGZpbmlzaC5cbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnN0YXRlQ2hhbmdlLmVtaXQoeyBzdGF0ZTogdGhpcy5zdGF0ZSB9KTtcbiAgICAgICAgfSwgdGhpcy5fYW5pbWF0aW9uVGltZSk7XG4gICAgfVxuXG4gICAgdG9nZ2xlU2lkZW5hdihpc09wZW46IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZShpc09wZW4gPyAnb3BlbicgOiAnY2xvc2UnKTtcbiAgICAgICAgLy8gUmFpc2UgZXZlbnQgYWZ0ZXIgYW5pbWF0aW9uIGZpbmlzaC5cbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnN0YXRlQ2hhbmdlLmVtaXQoeyBzdGF0ZTogdGhpcy5zdGF0ZSB9KTtcbiAgICAgICAgfSwgdGhpcy5fYW5pbWF0aW9uVGltZSk7XG4gICAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9zaWRlLWJhci9zaWRlLWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxVQUFVLEVBQ1YsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBQ1osU0FBUyxFQUNULFVBQVUsRUFDVixTQUFTLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFTdkIsT0FBTyxFQUVILGdCQUFnQixFQUNoQixpQkFBaUIsR0FDcEIsTUFBTSx5QkFBeUIsQ0FBQztBQUVqQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQVFuRixNQUFNLE9BQU8sbUJBQW1CO0lBb0M1QixZQUNZLFdBQXVCLEVBQ3ZCLFFBQW1CLEVBQ3BCLGFBQStCO1FBRjlCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDcEIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBcENqQyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUNyQixlQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsZUFBVSxHQUFHLElBQUksQ0FBQztRQUVuQix1QkFBa0IsR0FBRyxLQUFLLENBQUM7UUFDbEIsbUJBQWMsR0FBRyxHQUFHLENBQUMsQ0FBQyxnQkFBZ0I7UUFFdkQsVUFBSyxHQUF3QixNQUFNLENBQUM7UUFDcEMsMEJBQXFCLEdBQVcsaUJBQWlCLENBQUMsSUFBSSxDQUFDO1FBQ3ZELGtCQUFhLEdBQUcsSUFBSSxDQUFDO1FBYXJCLGdCQUFXLEdBQThDLElBQUksWUFBWSxFQUErQixDQUFDO1FBSXpHLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsa0JBQWEsR0FBRyxNQUFNLENBQUM7UUFHdkIsc0JBQWlC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QUFzQztZQUN0QyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQ3pCO1FBRUQsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxpQkFBaUI7UUFDYixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsc0NBQXNDO1FBQ3RDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUNqRCxDQUFDLEVBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFRCxhQUFhLENBQUMsTUFBZTtRQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUN6QyxzQ0FBc0M7UUFDdEMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNaLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQ2pELENBQUMsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7QUF2SU0sd0NBQW9CLEdBQUcsd0JBQXdCLENBQUM7O1lBUDFELFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsY0FBYztnQkFDeEIsOGhHQUF3Qzs7YUFFM0M7WUFDQSxVQUFVOzs7WUF4QlAsVUFBVTtZQUNWLFNBQVM7WUFZVCxnQkFBZ0I7OzsyQkFlZixLQUFLO3lCQUNMLEtBQUs7eUJBQ0wsS0FBSzt5QkFDTCxLQUFLO2dDQVNMLEtBQUs7MEJBVUwsTUFBTTtzQkFHTixTQUFTLFNBQUMsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIE9uSW5pdCxcbiAgICBJbmplY3RhYmxlLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgVmlld0NoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgUmVuZGVyZXIyLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFNpZGVuYXYgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zaWRlbmF2JztcbmltcG9ydCB7XG4gICAgdHJpZ2dlcixcbiAgICBzdGF0ZSxcbiAgICBzdHlsZSxcbiAgICB0cmFuc2l0aW9uLFxuICAgIGFuaW1hdGUsXG59IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHtcbiAgICBQZXBDdXN0b21pemF0aW9uU2VydmljZSxcbiAgICBQZXBMYXlvdXRTZXJ2aWNlLFxuICAgIFBlcFNjcmVlblNpemVUeXBlLFxufSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBJUGVwU2lkZUJhclN0YXRlQ2hhbmdlRXZlbnQsIFBlcFNpZGVCYXJTdGF0ZVR5cGUgfSBmcm9tICcuL3NpZGUtYmFyLm1vZGVsJztcbmltcG9ydCB7IHBlcEljb25BcnJvd0xlZnQsIHBlcEljb25BcnJvd1JpZ2h0IH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvaWNvbic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncGVwLXNpZGUtYmFyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2lkZS1iYXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NpZGUtYmFyLmNvbXBvbmVudC5zY3NzJywgJy4vc2lkZS1iYXIuY29tcG9uZW50LnRoZW1lLnNjc3MnXVxufSlcbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBQZXBTaWRlQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBzdGF0aWMgT05FX01VTFRJX0JZX0RJUl9LRVkgPSAnLS1wZXAtb25lLW11bHRpLWJ5LWRpcic7XG5cbiAgICBASW5wdXQoKSBpZ25vcmVSZXNpemUgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBzaG93SGVhZGVyID0gdHJ1ZTtcbiAgICBASW5wdXQoKSBzaG93Rm9vdGVyID0gZmFsc2U7XG4gICAgQElucHV0KCkgc2hvd1RvZ2dsZSA9IHRydWU7XG5cbiAgICBwcml2YXRlIF91c2VBc1dlYkNvbXBvbmVudCA9IGZhbHNlO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX2FuaW1hdGlvblRpbWUgPSAzNTA7IC8vIG1pbGxpc2Vjb25kcy5cblxuICAgIHN0YXRlOiBQZXBTaWRlQmFyU3RhdGVUeXBlID0gJ29wZW4nO1xuICAgIHRvZ2dsZUJ1dHRvbkFycm93TmFtZTogc3RyaW5nID0gcGVwSWNvbkFycm93UmlnaHQubmFtZTtcbiAgICBpc0xhcmdlU2NyZWVuID0gdHJ1ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgc2V0IHVzZUFzV2ViQ29tcG9uZW50KHZhbHVlOiBib29sZWFuKSB7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5leHBvcnRGdW5jdGlvbnNPbkhvc3RFbGVtZW50KCk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgZ2V0IHVzZUFzV2ViQ29tcG9uZW50KCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5fdXNlQXNXZWJDb21wb25lbnQ7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpXG4gICAgc3RhdGVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxJUGVwU2lkZUJhclN0YXRlQ2hhbmdlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxJUGVwU2lkZUJhclN0YXRlQ2hhbmdlRXZlbnQ+KCk7XG5cbiAgICBAVmlld0NoaWxkKCdzaWRlbmF2Jykgc2lkZW5hdjogTWF0U2lkZW5hdjtcblxuICAgIGlzTW91c2VJbiA9IGZhbHNlO1xuICAgIHNpZGVCYXJIZWlnaHQgPSAnMTAwJSc7XG5cbiAgICBzY3JlZW5TaXplOiBQZXBTY3JlZW5TaXplVHlwZTtcbiAgICBQZXBTY3JlZW5TaXplVHlwZSA9IFBlcFNjcmVlblNpemVUeXBlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgaG9zdEVsZW1lbnQ6IEVsZW1lbnRSZWYsXG4gICAgICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICAgICAgcHVibGljIGxheW91dFNlcnZpY2U6IFBlcExheW91dFNlcnZpY2VcbiAgICApIHtcbiAgICAgICAgdGhpcy5sYXlvdXRTZXJ2aWNlLm9uUmVzaXplJC5zdWJzY3JpYmUoKHNpemU6IFBlcFNjcmVlblNpemVUeXBlKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnNjcmVlblNpemUgPSBzaXplO1xuICAgICAgICAgICAgdGhpcy5pc0xhcmdlU2NyZWVuID0gc2l6ZSA8IFBlcFNjcmVlblNpemVUeXBlLk1EO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGV4cG9ydEZ1bmN0aW9uc09uSG9zdEVsZW1lbnQoKSB7XG4gICAgICAgIC8vIFRoaXMgaXMgZm9yIHdlYiBjb21wb25lbnQgdXNhZ2UgZm9yIHVzZSB0aG9zZSBmdW5jdGlvbnMuXG4gICAgICAgIHRoaXMuaG9zdEVsZW1lbnQubmF0aXZlRWxlbWVudC5vcGVuID0gdGhpcy5vcGVuLmJpbmQodGhpcyk7XG4gICAgICAgIHRoaXMuaG9zdEVsZW1lbnQubmF0aXZlRWxlbWVudC5jbG9zZSA9IHRoaXMuY2xvc2UuYmluZCh0aGlzKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHNldFN0YXRlKHN0YXRlOiBQZXBTaWRlQmFyU3RhdGVUeXBlKSB7XG4gICAgICAgIHRoaXMuc3RhdGUgPSBzdGF0ZTtcbiAgICAgICAgdGhpcy50b2dnbGVCdXR0b25BcnJvd05hbWUgPVxuICAgICAgICAgICAgLy8gc3RhdGUgPT09ICdvcGVuJyA/XG4gICAgICAgICAgICAvLyAodGhpcy5sYXlvdXRTZXJ2aWNlLmlzUnRsKCkgPyBwZXBJY29uQXJyb3dSaWdodC5uYW1lIDogcGVwSWNvbkFycm93TGVmdC5uYW1lKSA6XG4gICAgICAgICAgICAodGhpcy5sYXlvdXRTZXJ2aWNlLmlzUnRsKCkgPyBwZXBJY29uQXJyb3dMZWZ0Lm5hbWUgOiBwZXBJY29uQXJyb3dSaWdodC5uYW1lKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHRvZ2dsZVN0YXRlKCkge1xuICAgICAgICB0aGlzLnNldFN0YXRlKHRoaXMuc3RhdGUgPT09ICdjbG9zZScgPyAnb3BlbicgOiAnY2xvc2UnKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KFBlcFNpZGVCYXJDb21wb25lbnQuT05FX01VTFRJX0JZX0RJUl9LRVksIHRoaXMubGF5b3V0U2VydmljZS5pc1J0bCgpID8gJzEnIDogJy0xJyk7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUodGhpcy5pc0xhcmdlU2NyZWVuID8gJ29wZW4nIDogJ2Nsb3NlJyk7XG4gICAgfVxuXG4gICAgc2V0U2lkZUJhckhlaWdodChldmVudCkge1xuICAgICAgICAvLyBjb25zdCBmcm9tID0gZXZlbnQucmVsYXRlZFRhcmdldFxuICAgICAgICAvLyAgICAgPyBldmVudC5yZWxhdGVkVGFyZ2V0XG4gICAgICAgIC8vICAgICA6IGV2ZW50LmZyb21FbGVtZW50O1xuICAgICAgICAvLyBjb25zdCB0byA9IGV2ZW50LnRhcmdldCA/IGV2ZW50LnRhcmdldCA6IGV2ZW50LnRvRWxlbWVudDtcblxuICAgICAgICAvLyBpZiAodHlwZW9mIGZyb20gPT09ICd1bmRlZmluZWQnIHx8IHR5cGVvZiB0byA9PT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgLy8gICAgIHJldHVybjtcbiAgICAgICAgLy8gfVxuICAgICAgICAvLyB0aGlzLmlzTW91c2VJbiA9IHRydWU7XG5cbiAgICAgICAgLy8gdGhpcy5zaWRlQmFySGVpZ2h0ID0gd2luZG93LmlubmVySGVpZ2h0IC0gdG8ub2Zmc2V0VG9wICsgJ3B4JztcbiAgICB9XG5cbiAgICBtb3VzZUxlYXZlU2lkZUJhcihldmVudCkge1xuICAgICAgICAvLyBjb25zdCBmcm9tID0gZXZlbnQucmVsYXRlZFRhcmdldFxuICAgICAgICAvLyAgICAgPyBldmVudC5yZWxhdGVkVGFyZ2V0XG4gICAgICAgIC8vICAgICA6IGV2ZW50LmZyb21FbGVtZW50O1xuICAgICAgICAvLyBjb25zdCB0byA9IGV2ZW50LnRhcmdldCA/IGV2ZW50LnRhcmdldCA6IGV2ZW50LnRvRWxlbWVudDtcblxuICAgICAgICAvLyBpZiAodHlwZW9mIGZyb20gPT09ICd1bmRlZmluZWQnIHx8IHR5cGVvZiB0byA9PT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgLy8gICAgIHJldHVybjtcbiAgICAgICAgLy8gfVxuICAgICAgICAvLyB0aGlzLnNpZGVCYXJIZWlnaHQgPSAnMTAwJSc7XG4gICAgICAgIC8vIHRoaXMuaXNNb3VzZUluID0gZmFsc2U7XG4gICAgfVxuXG4gICAgb3BlbigpIHtcbiAgICAgICAgaWYgKHRoaXMuc2lkZW5hdikge1xuICAgICAgICAgICAgdGhpcy5zaWRlbmF2Lm9wZW4oKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuc3RhdGUgPSAnb3Blbic7XG4gICAgfVxuXG4gICAgY2xvc2UoKSB7XG4gICAgICAgIGlmICh0aGlzLnNpZGVuYXYpIHtcbiAgICAgICAgICAgIHRoaXMuc2lkZW5hdi5jbG9zZSgpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5zdGF0ZSA9ICdjbG9zZSc7XG4gICAgfVxuXG4gICAgdG9nZ2xlKCkge1xuICAgICAgICBpZiAodGhpcy5zaWRlbmF2KSB7XG4gICAgICAgICAgICAvLyBjb25zdCBpc09wZW4gPSB0aGlzLnNpZGVuYXYub3BlbmVkO1xuICAgICAgICAgICAgdGhpcy5zaWRlbmF2LnRvZ2dsZSgpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy50b2dnbGVTdGF0ZSgpO1xuICAgIH1cblxuICAgIHRvZ2dsZVNpZGVXcmFwcGVyKCkge1xuICAgICAgICB0aGlzLnRvZ2dsZVN0YXRlKCk7XG4gICAgICAgIC8vIFJhaXNlIGV2ZW50IGFmdGVyIGFuaW1hdGlvbiBmaW5pc2guXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHsgc3RhdGU6IHRoaXMuc3RhdGUgfSk7XG4gICAgICAgIH0sIHRoaXMuX2FuaW1hdGlvblRpbWUpO1xuICAgIH1cblxuICAgIHRvZ2dsZVNpZGVuYXYoaXNPcGVuOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoaXNPcGVuID8gJ29wZW4nIDogJ2Nsb3NlJyk7XG4gICAgICAgIC8vIFJhaXNlIGV2ZW50IGFmdGVyIGFuaW1hdGlvbiBmaW5pc2guXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHsgc3RhdGU6IHRoaXMuc3RhdGUgfSk7XG4gICAgICAgIH0sIHRoaXMuX2FuaW1hdGlvblRpbWUpO1xuICAgIH1cbn1cbiJdfQ==

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

@@ -14,6 +14,7 @@ class PepSideBarComponent {
         this.ignoreResize = false;
         this.showHeader = true;
         this.showFooter = false;
+        this.showToggle = true;
         this._useAsWebComponent = false;
         this._animationTime = 350; // milliseconds.
         this.state = 'open';
@@ -115,7 +116,7 @@ PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
 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>",
+                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': showToggle && state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button *ngIf=\"showToggle\" 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 .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;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 .35s ease-out;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(1.5rem + .5rem + 2.5rem) - .75rem);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 .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;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 - 4rem);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(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;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(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);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:1.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(.5rem + 2.5rem);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(1.5rem + .5rem + 2.5rem);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:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-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);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:rgba(26,26,26,.24);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:#fff;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%))}"]
             },] },
     { type: Injectable }
@@ -129,6 +130,7 @@ PepSideBarComponent.propDecorators = {
     ignoreResize: [{ type: Input }],
     showHeader: [{ type: Input }],
     showFooter: [{ type: Input }],
+    showToggle: [{ type: Input }],
     useAsWebComponent: [{ type: Input }],
     stateChange: [{ type: Output }],
     sidenav: [{ type: ViewChild, args: ['sidenav',] }]

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

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-side-bar.js","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../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","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":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-side-bar.js","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../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    @Input() showToggle = true;\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","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":[],"mappings":";;;;;;;;MAiCa,mBAAmB;IAoC5B,YACY,WAAuB,EACvB,QAAmB,EACpB,aAA+B;QAF9B,gBAAW,GAAX,WAAW,CAAY;QACvB,aAAQ,GAAR,QAAQ,CAAW;QACpB,kBAAa,GAAb,aAAa,CAAkB;QApCjC,iBAAY,GAAG,KAAK,CAAC;QACrB,eAAU,GAAG,IAAI,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QACnB,eAAU,GAAG,IAAI,CAAC;QAEnB,uBAAkB,GAAG,KAAK,CAAC;QAClB,mBAAc,GAAG,GAAG,CAAC;QAEtC,UAAK,GAAwB,MAAM,CAAC;QACpC,0BAAqB,GAAW,iBAAiB,CAAC,IAAI,CAAC;QACvD,kBAAa,GAAG,IAAI,CAAC;QAarB,gBAAW,GAA8C,IAAI,YAAY,EAA+B,CAAC;QAIzG,cAAS,GAAG,KAAK,CAAC;QAClB,kBAAa,GAAG,MAAM,CAAC;QAGvB,sBAAiB,GAAG,iBAAiB,CAAC;QAOlC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAuB;YAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACpD,CAAC,CAAC;KACN;IA9BD,IACI,iBAAiB,CAAC,KAAc;QAChC,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,4BAA4B,EAAE,CAAC;SACvC;KACJ;IACD,IAAI,iBAAiB;QACjB,OAAO,IAAI,CAAC,kBAAkB,CAAC;KAClC;IAwBO,4BAA4B;;QAEhC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3D,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChE;IAEO,QAAQ,CAAC,KAA0B;QACvC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,qBAAqB;;;aAGrB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACrF;IAEO,WAAW;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KAC5D;IAED,QAAQ;QACJ,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;QAC9H,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACxD;IAED,gBAAgB,CAAC,KAAK;;;;;;;;;;KAYrB;IAED,iBAAiB,CAAC,KAAK;;;;;;;;;;KAWtB;IAED,IAAI;QACA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACvB;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;KACvB;IAED,KAAK;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACxB;QAED,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;KACxB;IAED,MAAM;QACF,IAAI,IAAI,CAAC,OAAO,EAAE;;YAEd,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;SACzB;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;;QAEnB,UAAU,CAAC;YACP,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAChD,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3B;IAED,aAAa,CAAC,MAAe;QACzB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;;QAEzC,UAAU,CAAC;YACP,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAChD,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3B;;AAvIM,wCAAoB,GAAG,wBAAwB,CAAC;;YAP1D,SAAS,SAAC;gBACP,QAAQ,EAAE,cAAc;gBACxB,8hGAAwC;;aAE3C;YACA,UAAU;;;YAxBP,UAAU;YACV,SAAS;YAYT,gBAAgB;;;2BAef,KAAK;yBACL,KAAK;yBACL,KAAK;yBACL,KAAK;gCASL,KAAK;0BAUL,MAAM;sBAGN,SAAS,SAAC,SAAS;;;MC/BX,gBAAgB;IACzB,YAAoB,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC5D;;;YAjBJ,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;oBACf,aAAa;oBACb,gBAAgB;;oBAEhB,eAAe;oBACf,aAAa;iBAChB;gBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;gBAC9B,YAAY,EAAE,CAAC,mBAAmB,CAAC;aACtC;;;YAnBG,eAAe;;;ACVnB;;;;ACAA;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib",
-  "version": "0.3.15-beta.57",
+  "version": "0.3.15-beta.58",
   "peerDependencies": {
     "@angular/animations": ">= 12.0.0",
     "@angular/cdk": ">= 12.0.0",

package/side-bar/pepperi-addons-ngx-lib-side-bar.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSideBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSideBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSideBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":31,"character":41}]}]}},"PepSideBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"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 .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;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 .35s ease-out;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(1.5rem + .5rem + 2.5rem) - .75rem);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 .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;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 - 4rem);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(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;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(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);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:1.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(.5rem + 2.5rem);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(1.5rem + .5rem + 2.5rem);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:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}",".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-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);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:rgba(26,26,26,.24);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:#fff;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%))}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":32,"character":1}}],"members":{"ignoreResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["sidenav"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":70,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":71,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"toggleState":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSideBarHeight":[{"__symbolic":"method"}],"mouseLeaveSideBar":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleSideWrapper":[{"__symbolic":"method"}],"toggleSidenav":[{"__symbolic":"method"}]},"statics":{"ONE_MULTI_BY_DIR_KEY":"--pep-one-multi-by-dir"}},"PepSideBarStateType":{"__symbolic":"interface"},"IPepSideBarStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepSideBarModule":"./side-bar.module","PepSideBarComponent":"./side-bar.component","PepSideBarStateType":"./side-bar.model","IPepSideBarStateChangeEvent":"./side-bar.model"},"importAs":"@pepperi-addons/ngx-lib/side-bar"}
+{"__symbolic":"module","version":4,"metadata":{"PepSideBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSideBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSideBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":31,"character":41}]}]}},"PepSideBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"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': showToggle && state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button *ngIf=\"showToggle\" 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 .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;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 .35s ease-out;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(1.5rem + .5rem + 2.5rem) - .75rem);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 .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;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 - 4rem);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(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;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(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);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:1.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(.5rem + 2.5rem);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(1.5rem + .5rem + 2.5rem);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:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}",".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-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);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:rgba(26,26,26,.24);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:#fff;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%))}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":32,"character":1}}],"members":{"ignoreResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"showToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":5},"arguments":["sidenav"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":70,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":71,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":72,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"toggleState":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSideBarHeight":[{"__symbolic":"method"}],"mouseLeaveSideBar":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleSideWrapper":[{"__symbolic":"method"}],"toggleSidenav":[{"__symbolic":"method"}]},"statics":{"ONE_MULTI_BY_DIR_KEY":"--pep-one-multi-by-dir"}},"PepSideBarStateType":{"__symbolic":"interface"},"IPepSideBarStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepSideBarModule":"./side-bar.module","PepSideBarComponent":"./side-bar.component","PepSideBarStateType":"./side-bar.model","IPepSideBarStateChangeEvent":"./side-bar.model"},"importAs":"@pepperi-addons/ngx-lib/side-bar"}

package/side-bar/side-bar.component.d.ts

@@ -10,6 +10,7 @@ export declare class PepSideBarComponent implements OnInit {
     ignoreResize: boolean;
     showHeader: boolean;
     showFooter: boolean;
+    showToggle: boolean;
     private _useAsWebComponent;
     private readonly _animationTime;
     state: PepSideBarStateType;