@pepperi-addons/ngx-lib 0.3.9-beta.21 → 0.3.9-beta.24

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

@@ -4,175 +4,175 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['side-bar'] = {}), global.ng.core, global.ng.common, global.ng.material.core, global.ng.material.icon, global.ng.material.sidenav, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].icon));
 }(this, (function (exports, core, common, core$1, icon$1, sidenav, ngxLib, icon) { 'use strict';
 
-    var PepSideBarComponent = /** @class */ (function () {
-        function PepSideBarComponent(hostElement, renderer, layoutService) {
-            var _this = this;
-            this.hostElement = hostElement;
-            this.renderer = renderer;
-            this.layoutService = layoutService;
-            this.ignoreResize = false;
-            this.showHeader = true;
-            this.showFooter = false;
-            this._useAsWebComponent = false;
-            this._animationTime = 350; // milliseconds.
-            this.state = 'open';
-            this.toggleButtonArrowName = icon.pepIconArrowRight.name;
-            this.isLargeScreen = true;
-            this.stateChange = new core.EventEmitter();
-            this.isMouseIn = false;
-            this.sideBarHeight = '100%';
-            this.PepScreenSizeType = ngxLib.PepScreenSizeType;
-            this.layoutService.onResize$.subscribe(function (size) {
-                _this.screenSize = size;
-                _this.isLargeScreen = size < ngxLib.PepScreenSizeType.MD;
-            });
-        }
-        Object.defineProperty(PepSideBarComponent.prototype, "useAsWebComponent", {
-            get: function () {
-                return this._useAsWebComponent;
-            },
-            set: function (value) {
-                if (value) {
-                    this.exportFunctionsOnHostElement();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepSideBarComponent.prototype.exportFunctionsOnHostElement = function () {
-            // This is for web component usage for use those functions.
-            this.hostElement.nativeElement.open = this.open.bind(this);
-            this.hostElement.nativeElement.close = this.close.bind(this);
-        };
-        PepSideBarComponent.prototype.setState = function (state) {
-            this.state = state;
-            this.toggleButtonArrowName =
-                // state === 'open' ?
-                // (this.layoutService.isRtl() ? pepIconArrowRight.name : pepIconArrowLeft.name) :
-                (this.layoutService.isRtl() ? icon.pepIconArrowLeft.name : icon.pepIconArrowRight.name);
-        };
-        PepSideBarComponent.prototype.toggleState = function () {
-            this.setState(this.state === 'close' ? 'open' : 'close');
-        };
-        PepSideBarComponent.prototype.ngOnInit = function () {
-            document.documentElement.style.setProperty(PepSideBarComponent.ONE_MULTI_BY_DIR_KEY, this.layoutService.isRtl() ? '1' : '-1');
-            this.setState(this.isLargeScreen ? 'open' : 'close');
-        };
-        PepSideBarComponent.prototype.setSideBarHeight = function (event) {
-            // const from = event.relatedTarget
-            //     ? event.relatedTarget
-            //     : event.fromElement;
-            // const to = event.target ? event.target : event.toElement;
-            // if (typeof from === 'undefined' || typeof to === 'undefined') {
-            //     return;
-            // }
-            // this.isMouseIn = true;
-            // this.sideBarHeight = window.innerHeight - to.offsetTop + 'px';
-        };
-        PepSideBarComponent.prototype.mouseLeaveSideBar = function (event) {
-            // const from = event.relatedTarget
-            //     ? event.relatedTarget
-            //     : event.fromElement;
-            // const to = event.target ? event.target : event.toElement;
-            // if (typeof from === 'undefined' || typeof to === 'undefined') {
-            //     return;
-            // }
-            // this.sideBarHeight = '100%';
-            // this.isMouseIn = false;
-        };
-        PepSideBarComponent.prototype.open = function () {
-            if (this.sidenav) {
-                this.sidenav.open();
-            }
-            this.state = 'open';
-        };
-        PepSideBarComponent.prototype.close = function () {
-            if (this.sidenav) {
-                this.sidenav.close();
-            }
-            this.state = 'close';
-        };
-        PepSideBarComponent.prototype.toggle = function () {
-            if (this.sidenav) {
-                // const isOpen = this.sidenav.opened;
-                this.sidenav.toggle();
-            }
-            this.toggleState();
-        };
-        PepSideBarComponent.prototype.toggleSideWrapper = function () {
-            var _this = this;
-            this.toggleState();
-            // Raise event after animation finish.
-            setTimeout(function () {
-                _this.stateChange.emit({ state: _this.state });
-            }, this._animationTime);
-        };
-        PepSideBarComponent.prototype.toggleSidenav = function (isOpen) {
-            var _this = this;
-            this.setState(isOpen ? 'open' : 'close');
-            // Raise event after animation finish.
-            setTimeout(function () {
-                _this.stateChange.emit({ state: _this.state });
-            }, this._animationTime);
-        };
-        return PepSideBarComponent;
-    }());
-    PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
-    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>",
-                    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 }
-    ];
-    PepSideBarComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: ngxLib.PepLayoutService }
-    ]; };
-    PepSideBarComponent.propDecorators = {
-        ignoreResize: [{ type: core.Input }],
-        showHeader: [{ type: core.Input }],
-        showFooter: [{ type: core.Input }],
-        useAsWebComponent: [{ type: core.Input }],
-        stateChange: [{ type: core.Output }],
-        sidenav: [{ type: core.ViewChild, args: ['sidenav',] }]
+    var PepSideBarComponent = /** @class */ (function () {
+        function PepSideBarComponent(hostElement, renderer, layoutService) {
+            var _this = this;
+            this.hostElement = hostElement;
+            this.renderer = renderer;
+            this.layoutService = layoutService;
+            this.ignoreResize = false;
+            this.showHeader = true;
+            this.showFooter = false;
+            this._useAsWebComponent = false;
+            this._animationTime = 350; // milliseconds.
+            this.state = 'open';
+            this.toggleButtonArrowName = icon.pepIconArrowRight.name;
+            this.isLargeScreen = true;
+            this.stateChange = new core.EventEmitter();
+            this.isMouseIn = false;
+            this.sideBarHeight = '100%';
+            this.PepScreenSizeType = ngxLib.PepScreenSizeType;
+            this.layoutService.onResize$.subscribe(function (size) {
+                _this.screenSize = size;
+                _this.isLargeScreen = size < ngxLib.PepScreenSizeType.MD;
+            });
+        }
+        Object.defineProperty(PepSideBarComponent.prototype, "useAsWebComponent", {
+            get: function () {
+                return this._useAsWebComponent;
+            },
+            set: function (value) {
+                if (value) {
+                    this.exportFunctionsOnHostElement();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepSideBarComponent.prototype.exportFunctionsOnHostElement = function () {
+            // This is for web component usage for use those functions.
+            this.hostElement.nativeElement.open = this.open.bind(this);
+            this.hostElement.nativeElement.close = this.close.bind(this);
+        };
+        PepSideBarComponent.prototype.setState = function (state) {
+            this.state = state;
+            this.toggleButtonArrowName =
+                // state === 'open' ?
+                // (this.layoutService.isRtl() ? pepIconArrowRight.name : pepIconArrowLeft.name) :
+                (this.layoutService.isRtl() ? icon.pepIconArrowLeft.name : icon.pepIconArrowRight.name);
+        };
+        PepSideBarComponent.prototype.toggleState = function () {
+            this.setState(this.state === 'close' ? 'open' : 'close');
+        };
+        PepSideBarComponent.prototype.ngOnInit = function () {
+            document.documentElement.style.setProperty(PepSideBarComponent.ONE_MULTI_BY_DIR_KEY, this.layoutService.isRtl() ? '1' : '-1');
+            this.setState(this.isLargeScreen ? 'open' : 'close');
+        };
+        PepSideBarComponent.prototype.setSideBarHeight = function (event) {
+            // const from = event.relatedTarget
+            //     ? event.relatedTarget
+            //     : event.fromElement;
+            // const to = event.target ? event.target : event.toElement;
+            // if (typeof from === 'undefined' || typeof to === 'undefined') {
+            //     return;
+            // }
+            // this.isMouseIn = true;
+            // this.sideBarHeight = window.innerHeight - to.offsetTop + 'px';
+        };
+        PepSideBarComponent.prototype.mouseLeaveSideBar = function (event) {
+            // const from = event.relatedTarget
+            //     ? event.relatedTarget
+            //     : event.fromElement;
+            // const to = event.target ? event.target : event.toElement;
+            // if (typeof from === 'undefined' || typeof to === 'undefined') {
+            //     return;
+            // }
+            // this.sideBarHeight = '100%';
+            // this.isMouseIn = false;
+        };
+        PepSideBarComponent.prototype.open = function () {
+            if (this.sidenav) {
+                this.sidenav.open();
+            }
+            this.state = 'open';
+        };
+        PepSideBarComponent.prototype.close = function () {
+            if (this.sidenav) {
+                this.sidenav.close();
+            }
+            this.state = 'close';
+        };
+        PepSideBarComponent.prototype.toggle = function () {
+            if (this.sidenav) {
+                // const isOpen = this.sidenav.opened;
+                this.sidenav.toggle();
+            }
+            this.toggleState();
+        };
+        PepSideBarComponent.prototype.toggleSideWrapper = function () {
+            var _this = this;
+            this.toggleState();
+            // Raise event after animation finish.
+            setTimeout(function () {
+                _this.stateChange.emit({ state: _this.state });
+            }, this._animationTime);
+        };
+        PepSideBarComponent.prototype.toggleSidenav = function (isOpen) {
+            var _this = this;
+            this.setState(isOpen ? 'open' : 'close');
+            // Raise event after animation finish.
+            setTimeout(function () {
+                _this.stateChange.emit({ state: _this.state });
+            }, this._animationTime);
+        };
+        return PepSideBarComponent;
+    }());
+    PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
+    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>",
+                    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 }
+    ];
+    PepSideBarComponent.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: core.Renderer2 },
+        { type: ngxLib.PepLayoutService }
+    ]; };
+    PepSideBarComponent.propDecorators = {
+        ignoreResize: [{ type: core.Input }],
+        showHeader: [{ type: core.Input }],
+        showFooter: [{ type: core.Input }],
+        useAsWebComponent: [{ type: core.Input }],
+        stateChange: [{ type: core.Output }],
+        sidenav: [{ type: core.ViewChild, args: ['sidenav',] }]
     };
 
-    var PepSideBarModule = /** @class */ (function () {
-        function PepSideBarModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([icon.pepIconSystemClose]);
-        }
-        return PepSideBarModule;
-    }());
-    PepSideBarModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        // Material modules,
-                        core$1.MatCommonModule,
-                        icon$1.MatIconModule,
-                        sidenav.MatSidenavModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon.PepIconModule,
-                    ],
-                    exports: [PepSideBarComponent],
-                    declarations: [PepSideBarComponent],
-                },] }
-    ];
-    PepSideBarModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepSideBarModule = /** @class */ (function () {
+        function PepSideBarModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([icon.pepIconSystemClose]);
+        }
+        return PepSideBarModule;
+    }());
+    PepSideBarModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        // Material modules,
+                        core$1.MatCommonModule,
+                        icon$1.MatIconModule,
+                        sidenav.MatSidenavModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon.PepIconModule,
+                    ],
+                    exports: [PepSideBarComponent],
+                    declarations: [PepSideBarComponent],
+                },] }
+    ];
+    PepSideBarModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    /*
-     * Public API Surface of ngx-lib/side-bar
+    /*
+     * Public API Surface of ngx-lib/side-bar
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepSideBarComponent = PepSideBarComponent;