@pepperi-addons/ngx-lib 0.4.0-angular14.27 → 0.4.0-angular14.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -94,11 +94,11 @@ export class PepSideBarComponent {
94
94
  }
95
95
  PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
96
96
  PepSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
97
- PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { position: "position", ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", showToggle: "showToggle", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
97
+ PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { position: "position", ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", showToggle: "showToggle", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
98
98
  PepSideBarComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent });
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent, decorators: [{
100
100
  type: Component,
101
- 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]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
101
+ 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]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
102
102
  }, {
103
103
  type: Injectable
104
104
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PepLayoutService }]; }, propDecorators: { position: [{
@@ -119,4 +119,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
119
119
  type: ViewChild,
120
120
  args: ['sidenav']
121
121
  }] } });
122
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9zaWRlLWJhci9zaWRlLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL3NpZGUtYmFyL3NpZGUtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBRVQsVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsR0FHWixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBR0gsaUJBQWlCLEdBQ3BCLE1BQU0seUJBQXlCLENBQUM7QUFFakMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sOEJBQThCLENBQUM7Ozs7Ozs7QUFRbkYsTUFBTSxPQUFPLG1CQUFtQjtJQXFDNUIsWUFDWSxXQUF1QixFQUN2QixRQUFtQixFQUNwQixhQUErQjtRQUY5QixnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ3BCLGtCQUFhLEdBQWIsYUFBYSxDQUFrQjtRQXJDakMsYUFBUSxHQUFvQixPQUFPLENBQUM7UUFDcEMsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFDckIsZUFBVSxHQUFHLElBQUksQ0FBQztRQUNsQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLGVBQVUsR0FBRyxJQUFJLENBQUM7UUFFbkIsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLG1CQUFjLEdBQUcsR0FBRyxDQUFDLENBQUMsZ0JBQWdCO1FBRXZELFVBQUssR0FBd0IsTUFBTSxDQUFDO1FBQ3BDLDBCQUFxQixHQUFXLGlCQUFpQixDQUFDLElBQUksQ0FBQztRQUN2RCxrQkFBYSxHQUFHLElBQUksQ0FBQztRQWFyQixnQkFBVyxHQUE4QyxJQUFJLFlBQVksRUFBK0IsQ0FBQztR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Q0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDakQsQ0FBQyxFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQWU7UUFDekIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekMsc0NBQXNDO1FBQ3RDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUNqRCxDQUFDLEVBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQzVCLENBQUM7O0FBN0dNLHdDQUFvQixHQUFHLHdCQUF3QixDQUFDO2dIQUQ5QyxtQkFBbUI7b0dBQW5CLG1CQUFtQix1WEMxQmhDLG9tSEF3RmM7b0hEOURELG1CQUFtQjsyRkFBbkIsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNJLGNBQWM7O2tCQUkzQixVQUFVO3dKQUlFLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFVRixpQkFBaUI7c0JBRHBCLEtBQUs7Z0JBV04sV0FBVztzQkFEVixNQUFNO2dCQUdlLE9BQU87c0JBQTVCLFNBQVM7dUJBQUMsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIE9uSW5pdCxcbiAgICBJbmplY3RhYmxlLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgVmlld0NoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgUmVuZGVyZXIyLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFNpZGVuYXYgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zaWRlbmF2JztcbmltcG9ydCB7XG4gICAgUGVwQ3VzdG9taXphdGlvblNlcnZpY2UsXG4gICAgUGVwTGF5b3V0U2VydmljZSxcbiAgICBQZXBTY3JlZW5TaXplVHlwZSxcbn0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgSVBlcFNpZGVCYXJTdGF0ZUNoYW5nZUV2ZW50LCBQZXBTaWRlQmFyU3RhdGVUeXBlIH0gZnJvbSAnLi9zaWRlLWJhci5tb2RlbCc7XG5pbXBvcnQgeyBwZXBJY29uQXJyb3dMZWZ0LCBwZXBJY29uQXJyb3dSaWdodCB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ljb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1zaWRlLWJhcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NpZGUtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zaWRlLWJhci5jb21wb25lbnQuc2NzcycsICcuL3NpZGUtYmFyLmNvbXBvbmVudC50aGVtZS5zY3NzJ11cbn0pXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgUGVwU2lkZUJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgc3RhdGljIE9ORV9NVUxUSV9CWV9ESVJfS0VZID0gJy0tcGVwLW9uZS1tdWx0aS1ieS1kaXInO1xuXG4gICAgQElucHV0KCkgcG9zaXRpb246ICdzdGFydCcgfCAnZW5kJyA9ICdzdGFydCc7XG4gICAgQElucHV0KCkgaWdub3JlUmVzaXplID0gZmFsc2U7XG4gICAgQElucHV0KCkgc2hvd0hlYWRlciA9IHRydWU7XG4gICAgQElucHV0KCkgc2hvd0Zvb3RlciA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHNob3dUb2dnbGUgPSB0cnVlO1xuXG4gICAgcHJpdmF0ZSBfdXNlQXNXZWJDb21wb25lbnQgPSBmYWxzZTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9hbmltYXRpb25UaW1lID0gMzUwOyAvLyBtaWxsaXNlY29uZHMuXG5cbiAgICBzdGF0ZTogUGVwU2lkZUJhclN0YXRlVHlwZSA9ICdvcGVuJztcbiAgICB0b2dnbGVCdXR0b25BcnJvd05hbWU6IHN0cmluZyA9IHBlcEljb25BcnJvd1JpZ2h0Lm5hbWU7XG4gICAgaXNMYXJnZVNjcmVlbiA9IHRydWU7XG5cbiAgICBASW5wdXQoKVxuICAgIHNldCB1c2VBc1dlYkNvbXBvbmVudCh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuZXhwb3J0RnVuY3Rpb25zT25Ib3N0RWxlbWVudCgpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCB1c2VBc1dlYkNvbXBvbmVudCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3VzZUFzV2ViQ29tcG9uZW50O1xuICAgIH1cblxuICAgIEBPdXRwdXQoKVxuICAgIHN0YXRlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8SVBlcFNpZGVCYXJTdGF0ZUNoYW5nZUV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8SVBlcFNpZGVCYXJTdGF0ZUNoYW5nZUV2ZW50PigpO1xuXG4gICAgQFZpZXdDaGlsZCgnc2lkZW5hdicpIHNpZGVuYXY6IE1hdFNpZGVuYXY7XG5cbiAgICBpc01vdXNlSW4gPSBmYWxzZTtcbiAgICBzaWRlQmFySGVpZ2h0ID0gJzEwMCUnO1xuXG4gICAgc2NyZWVuU2l6ZTogUGVwU2NyZWVuU2l6ZVR5cGU7XG4gICAgUGVwU2NyZWVuU2l6ZVR5cGUgPSBQZXBTY3JlZW5TaXplVHlwZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwcml2YXRlIGhvc3RFbGVtZW50OiBFbGVtZW50UmVmLFxuICAgICAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgICAgIHB1YmxpYyBsYXlvdXRTZXJ2aWNlOiBQZXBMYXlvdXRTZXJ2aWNlXG4gICAgKSB7XG4gICAgICAgIHRoaXMubGF5b3V0U2VydmljZS5vblJlc2l6ZSQuc3Vic2NyaWJlKChzaXplOiBQZXBTY3JlZW5TaXplVHlwZSkgPT4ge1xuICAgICAgICAgICAgdGhpcy5zY3JlZW5TaXplID0gc2l6ZTtcbiAgICAgICAgICAgIHRoaXMuaXNMYXJnZVNjcmVlbiA9IHNpemUgPCBQZXBTY3JlZW5TaXplVHlwZS5NRDtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBleHBvcnRGdW5jdGlvbnNPbkhvc3RFbGVtZW50KCkge1xuICAgICAgICAvLyBUaGlzIGlzIGZvciB3ZWIgY29tcG9uZW50IHVzYWdlIGZvciB1c2UgdGhvc2UgZnVuY3Rpb25zLlxuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQub3BlbiA9IHRoaXMub3Blbi5iaW5kKHRoaXMpO1xuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2xvc2UgPSB0aGlzLmNsb3NlLmJpbmQodGhpcyk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBzZXRTdGF0ZShzdGF0ZTogUGVwU2lkZUJhclN0YXRlVHlwZSkge1xuICAgICAgICB0aGlzLnN0YXRlID0gc3RhdGU7XG4gICAgICAgIHRoaXMudG9nZ2xlQnV0dG9uQXJyb3dOYW1lID1cbiAgICAgICAgICAgIC8vIHN0YXRlID09PSAnb3BlbicgP1xuICAgICAgICAgICAgLy8gKHRoaXMubGF5b3V0U2VydmljZS5pc1J0bCgpID8gcGVwSWNvbkFycm93UmlnaHQubmFtZSA6IHBlcEljb25BcnJvd0xlZnQubmFtZSkgOlxuICAgICAgICAgICAgKHRoaXMubGF5b3V0U2VydmljZS5pc1J0bCgpIHx8IHRoaXMucG9zaXRpb24gPT09ICdlbmQnID8gcGVwSWNvbkFycm93TGVmdC5uYW1lIDogcGVwSWNvbkFycm93UmlnaHQubmFtZSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB0b2dnbGVTdGF0ZSgpIHtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh0aGlzLnN0YXRlID09PSAnY2xvc2UnID8gJ29wZW4nIDogJ2Nsb3NlJyk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eShQZXBTaWRlQmFyQ29tcG9uZW50Lk9ORV9NVUxUSV9CWV9ESVJfS0VZLCB0aGlzLmxheW91dFNlcnZpY2UuaXNSdGwoKSA/ICcxJyA6ICctMScpO1xuICAgICAgICB0aGlzLnNldFN0YXRlKHRoaXMuaXNMYXJnZVNjcmVlbiA/ICdvcGVuJyA6ICdjbG9zZScpO1xuICAgIH1cblxuICAgIG9wZW4oKSB7XG4gICAgICAgIGlmICh0aGlzLnNpZGVuYXYpIHtcbiAgICAgICAgICAgIHRoaXMuc2lkZW5hdi5vcGVuKCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnN0YXRlID0gJ29wZW4nO1xuICAgIH1cblxuICAgIGNsb3NlKCkge1xuICAgICAgICBpZiAodGhpcy5zaWRlbmF2KSB7XG4gICAgICAgICAgICB0aGlzLnNpZGVuYXYuY2xvc2UoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuc3RhdGUgPSAnY2xvc2UnO1xuICAgIH1cblxuICAgIHRvZ2dsZSgpIHtcbiAgICAgICAgaWYgKHRoaXMuc2lkZW5hdikge1xuICAgICAgICAgICAgLy8gY29uc3QgaXNPcGVuID0gdGhpcy5zaWRlbmF2Lm9wZW5lZDtcbiAgICAgICAgICAgIHRoaXMuc2lkZW5hdi50b2dnbGUoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMudG9nZ2xlU3RhdGUoKTtcbiAgICB9XG5cbiAgICB0b2dnbGVTaWRlV3JhcHBlcigpIHtcbiAgICAgICAgdGhpcy50b2dnbGVTdGF0ZSgpO1xuICAgICAgICAvLyBSYWlzZSBldmVudCBhZnRlciBhbmltYXRpb24gZmluaXNoLlxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuc3RhdGVDaGFuZ2UuZW1pdCh7IHN0YXRlOiB0aGlzLnN0YXRlIH0pO1xuICAgICAgICB9LCB0aGlzLl9hbmltYXRpb25UaW1lKTtcbiAgICB9XG5cbiAgICB0b2dnbGVTaWRlbmF2KGlzT3BlbjogYm9vbGVhbikge1xuICAgICAgICB0aGlzLnNldFN0YXRlKGlzT3BlbiA/ICdvcGVuJyA6ICdjbG9zZScpO1xuICAgICAgICAvLyBSYWlzZSBldmVudCBhZnRlciBhbmltYXRpb24gZmluaXNoLlxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuc3RhdGVDaGFuZ2UuZW1pdCh7IHN0YXRlOiB0aGlzLnN0YXRlIH0pO1xuICAgICAgICB9LCB0aGlzLl9hbmltYXRpb25UaW1lKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicGVwLXNpZGUtYmFyLWNvbnRhaW5lclwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc0xhcmdlU2NyZWVuIHx8IGlnbm9yZVJlc2l6ZTsgdGhlbiBsYXJnZVNjcmVlbnNCbG9jazsgZWxzZSBub3RMYXJnZVNjcmVlbnNCbG9ja1wiPlxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjbGFyZ2VTY3JlZW5zQmxvY2s+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtc2lkZS1iYXItY29udGFpbmVyXCIgW25nQ2xhc3NdPVwieyAnZW5kLXBvc2l0aW9uJzogcG9zaXRpb24gPT09ICdlbmQnLCAnaXMtb3Blbi1zdGF0ZSc6ICFzaG93VG9nZ2xlIHx8IHN0YXRlID09PSAnb3Blbid9XCI+XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJwb3NpdGlvbiA9PT0gJ3N0YXJ0J1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzaWRlTGF5b3V0VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlLWJ1dHRvbi1ib3JkZXJcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidG9nZ2xlQnV0dG9uVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInBvc2l0aW9uID09PSAnZW5kJ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0b2dnbGVCdXR0b25UZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtYnV0dG9uLWJvcmRlclwiPjwvZGl2PlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzaWRlTGF5b3V0VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICAgIDxuZy10ZW1wbGF0ZSAjbm90TGFyZ2VTY3JlZW5zQmxvY2s+XG4gICAgICAgIDxtYXQtc2lkZW5hdi1jb250YWluZXIgW2hhc0JhY2tkcm9wXT1cInRydWVcIj5cbiAgICAgICAgICAgIDxtYXQtc2lkZW5hdiAjc2lkZW5hdiBbcG9zaXRpb25dPVwicG9zaXRpb25cIiBtb2RlPVwib3ZlclwiIGF1dG9Gb2N1cz1cImZhbHNlXCIgZml4ZWRJblZpZXdwb3J0PVwiZmFsc2VcIlxuICAgICAgICAgICAgICAgIChvcGVuZWRDaGFuZ2UpPVwidG9nZ2xlU2lkZW5hdigkZXZlbnQpXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInNpZGVMYXlvdXRUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9tYXQtc2lkZW5hdj5cbiAgICAgICAgPC9tYXQtc2lkZW5hdi1jb250YWluZXI+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI3RvZ2dsZUJ1dHRvblRlbXBsYXRlPlxuICAgIDxidXR0b24gbWF0LWJ1dHRvbiAqbmdJZj1cInNob3dUb2dnbGVcIiBjbGFzcz1cInRvZ2dsZS1idXR0b24gcGVwLWJ1dHRvbiB4cyByZWd1bGFyIGljb24tYnV0dG9uIFwiIChjbGljayk9XCJ0b2dnbGVTaWRlV3JhcHBlcigpXCI+XG4gICAgICAgIDxtYXQtaWNvbj5cbiAgICAgICAgICAgIDxwZXAtaWNvbiBbbmFtZV09XCJ0b2dnbGVCdXR0b25BcnJvd05hbWVcIj5cbiAgICAgICAgICAgIDwvcGVwLWljb24+XG4gICAgICAgIDwvbWF0LWljb24+XG4gICAgPC9idXR0b24+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3NpZGVMYXlvdXRUZW1wbGF0ZT5cbiAgICA8ZGl2IGNsYXNzPVwic2lkZS1sYXlvdXRcIj5cbiAgICAgICAgPGRpdiAqbmdJZj1cInNob3dIZWFkZXJcIiBjbGFzcz1cImhlYWRlci1jb250ZW50XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudCBwZXAtYm9yZGVyLWJvdHRvbSBib2R5LWxnIGVsbGlwc2lzXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImhlYWRlclRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInN0YXJ0Q29udGVudFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImZpbHRlcnNUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzbWFydEZpbHRlcnNUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZW5kQ29udGVudFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJzaG93Rm9vdGVyXCIgY2xhc3M9XCJmb290ZXItY29udGVudFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnQgcGVwLWJvcmRlci10b3AgYm9keS1sZyBlbGxpcHNpc1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJmb290ZXJUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuXG48bmctdGVtcGxhdGUgI2hlYWRlclRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltoZWFkZXItY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3N0YXJ0Q29udGVudFRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzdGFydC1jb250ZW50XVwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY29udGVudFRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZW5kQ29udGVudFRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltlbmQtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2ZpbHRlcnNUZW1wbGF0ZT5cblxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNzbWFydEZpbHRlcnNUZW1wbGF0ZT5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJwZXAtc21hcnQtZmlsdGVyc1wiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZm9vdGVyVGVtcGxhdGU+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Zvb3Rlci1jb250ZW50XVwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+Il19
122
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9zaWRlLWJhci9zaWRlLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL3NpZGUtYmFyL3NpZGUtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBRVQsVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsR0FHWixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBR0gsaUJBQWlCLEdBQ3BCLE1BQU0seUJBQXlCLENBQUM7QUFFakMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sOEJBQThCLENBQUM7Ozs7Ozs7QUFRbkYsTUFBTSxPQUFPLG1CQUFtQjtJQXFDNUIsWUFDWSxXQUF1QixFQUN2QixRQUFtQixFQUNwQixhQUErQjtRQUY5QixnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ3BCLGtCQUFhLEdBQWIsYUFBYSxDQUFrQjtRQXJDakMsYUFBUSxHQUFvQixPQUFPLENBQUM7UUFDcEMsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFDckIsZUFBVSxHQUFHLElBQUksQ0FBQztRQUNsQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLGVBQVUsR0FBRyxJQUFJLENBQUM7UUFFbkIsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLG1CQUFjLEdBQUcsR0FBRyxDQUFDLENBQUMsZ0JBQWdCO1FBRXZELFVBQUssR0FBd0IsTUFBTSxDQUFDO1FBQ3BDLDBCQUFxQixHQUFXLGlCQUFpQixDQUFDLElBQUksQ0FBQztRQUN2RCxrQkFBYSxHQUFHLElBQUksQ0FBQztRQWFyQixnQkFBVyxHQUE4QyxJQUFJLFlBQVksRUFBK0IsQ0FBQztR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Q0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDakQsQ0FBQyxFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQWU7UUFDekIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekMsc0NBQXNDO1FBQ3RDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUNqRCxDQUFDLEVBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQzVCLENBQUM7O0FBN0dNLHdDQUFvQixHQUFHLHdCQUF3QixDQUFDO2dIQUQ5QyxtQkFBbUI7b0dBQW5CLG1CQUFtQix1WEMxQmhDLG9tSEF3RmM7b0hEOURELG1CQUFtQjsyRkFBbkIsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNJLGNBQWM7O2tCQUkzQixVQUFVO3dKQUlFLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFVRixpQkFBaUI7c0JBRHBCLEtBQUs7Z0JBV04sV0FBVztzQkFEVixNQUFNO2dCQUdlLE9BQU87c0JBQTVCLFNBQVM7dUJBQUMsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIE9uSW5pdCxcbiAgICBJbmplY3RhYmxlLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgVmlld0NoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgUmVuZGVyZXIyLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFNpZGVuYXYgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zaWRlbmF2JztcbmltcG9ydCB7XG4gICAgUGVwQ3VzdG9taXphdGlvblNlcnZpY2UsXG4gICAgUGVwTGF5b3V0U2VydmljZSxcbiAgICBQZXBTY3JlZW5TaXplVHlwZSxcbn0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgSVBlcFNpZGVCYXJTdGF0ZUNoYW5nZUV2ZW50LCBQZXBTaWRlQmFyU3RhdGVUeXBlIH0gZnJvbSAnLi9zaWRlLWJhci5tb2RlbCc7XG5pbXBvcnQgeyBwZXBJY29uQXJyb3dMZWZ0LCBwZXBJY29uQXJyb3dSaWdodCB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ljb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1zaWRlLWJhcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NpZGUtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zaWRlLWJhci5jb21wb25lbnQuc2NzcycsICcuL3NpZGUtYmFyLmNvbXBvbmVudC50aGVtZS5zY3NzJ11cbn0pXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgUGVwU2lkZUJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgc3RhdGljIE9ORV9NVUxUSV9CWV9ESVJfS0VZID0gJy0tcGVwLW9uZS1tdWx0aS1ieS1kaXInO1xuXG4gICAgQElucHV0KCkgcG9zaXRpb246ICdzdGFydCcgfCAnZW5kJyA9ICdzdGFydCc7XG4gICAgQElucHV0KCkgaWdub3JlUmVzaXplID0gZmFsc2U7XG4gICAgQElucHV0KCkgc2hvd0hlYWRlciA9IHRydWU7XG4gICAgQElucHV0KCkgc2hvd0Zvb3RlciA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHNob3dUb2dnbGUgPSB0cnVlO1xuXG4gICAgcHJpdmF0ZSBfdXNlQXNXZWJDb21wb25lbnQgPSBmYWxzZTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9hbmltYXRpb25UaW1lID0gMzUwOyAvLyBtaWxsaXNlY29uZHMuXG5cbiAgICBzdGF0ZTogUGVwU2lkZUJhclN0YXRlVHlwZSA9ICdvcGVuJztcbiAgICB0b2dnbGVCdXR0b25BcnJvd05hbWU6IHN0cmluZyA9IHBlcEljb25BcnJvd1JpZ2h0Lm5hbWU7XG4gICAgaXNMYXJnZVNjcmVlbiA9IHRydWU7XG5cbiAgICBASW5wdXQoKVxuICAgIHNldCB1c2VBc1dlYkNvbXBvbmVudCh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuZXhwb3J0RnVuY3Rpb25zT25Ib3N0RWxlbWVudCgpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCB1c2VBc1dlYkNvbXBvbmVudCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3VzZUFzV2ViQ29tcG9uZW50O1xuICAgIH1cblxuICAgIEBPdXRwdXQoKVxuICAgIHN0YXRlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8SVBlcFNpZGVCYXJTdGF0ZUNoYW5nZUV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8SVBlcFNpZGVCYXJTdGF0ZUNoYW5nZUV2ZW50PigpO1xuXG4gICAgQFZpZXdDaGlsZCgnc2lkZW5hdicpIHNpZGVuYXY6IE1hdFNpZGVuYXY7XG5cbiAgICBpc01vdXNlSW4gPSBmYWxzZTtcbiAgICBzaWRlQmFySGVpZ2h0ID0gJzEwMCUnO1xuXG4gICAgc2NyZWVuU2l6ZTogUGVwU2NyZWVuU2l6ZVR5cGU7XG4gICAgUGVwU2NyZWVuU2l6ZVR5cGUgPSBQZXBTY3JlZW5TaXplVHlwZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwcml2YXRlIGhvc3RFbGVtZW50OiBFbGVtZW50UmVmLFxuICAgICAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgICAgIHB1YmxpYyBsYXlvdXRTZXJ2aWNlOiBQZXBMYXlvdXRTZXJ2aWNlXG4gICAgKSB7XG4gICAgICAgIHRoaXMubGF5b3V0U2VydmljZS5vblJlc2l6ZSQuc3Vic2NyaWJlKChzaXplOiBQZXBTY3JlZW5TaXplVHlwZSkgPT4ge1xuICAgICAgICAgICAgdGhpcy5zY3JlZW5TaXplID0gc2l6ZTtcbiAgICAgICAgICAgIHRoaXMuaXNMYXJnZVNjcmVlbiA9IHNpemUgPCBQZXBTY3JlZW5TaXplVHlwZS5NRDtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBleHBvcnRGdW5jdGlvbnNPbkhvc3RFbGVtZW50KCkge1xuICAgICAgICAvLyBUaGlzIGlzIGZvciB3ZWIgY29tcG9uZW50IHVzYWdlIGZvciB1c2UgdGhvc2UgZnVuY3Rpb25zLlxuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQub3BlbiA9IHRoaXMub3Blbi5iaW5kKHRoaXMpO1xuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2xvc2UgPSB0aGlzLmNsb3NlLmJpbmQodGhpcyk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBzZXRTdGF0ZShzdGF0ZTogUGVwU2lkZUJhclN0YXRlVHlwZSkge1xuICAgICAgICB0aGlzLnN0YXRlID0gc3RhdGU7XG4gICAgICAgIHRoaXMudG9nZ2xlQnV0dG9uQXJyb3dOYW1lID1cbiAgICAgICAgICAgIC8vIHN0YXRlID09PSAnb3BlbicgP1xuICAgICAgICAgICAgLy8gKHRoaXMubGF5b3V0U2VydmljZS5pc1J0bCgpID8gcGVwSWNvbkFycm93UmlnaHQubmFtZSA6IHBlcEljb25BcnJvd0xlZnQubmFtZSkgOlxuICAgICAgICAgICAgKHRoaXMubGF5b3V0U2VydmljZS5pc1J0bCgpIHx8IHRoaXMucG9zaXRpb24gPT09ICdlbmQnID8gcGVwSWNvbkFycm93TGVmdC5uYW1lIDogcGVwSWNvbkFycm93UmlnaHQubmFtZSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB0b2dnbGVTdGF0ZSgpIHtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh0aGlzLnN0YXRlID09PSAnY2xvc2UnID8gJ29wZW4nIDogJ2Nsb3NlJyk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eShQZXBTaWRlQmFyQ29tcG9uZW50Lk9ORV9NVUxUSV9CWV9ESVJfS0VZLCB0aGlzLmxheW91dFNlcnZpY2UuaXNSdGwoKSA/ICcxJyA6ICctMScpO1xuICAgICAgICB0aGlzLnNldFN0YXRlKHRoaXMuaXNMYXJnZVNjcmVlbiA/ICdvcGVuJyA6ICdjbG9zZScpO1xuICAgIH1cblxuICAgIG9wZW4oKSB7XG4gICAgICAgIGlmICh0aGlzLnNpZGVuYXYpIHtcbiAgICAgICAgICAgIHRoaXMuc2lkZW5hdi5vcGVuKCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnN0YXRlID0gJ29wZW4nO1xuICAgIH1cblxuICAgIGNsb3NlKCkge1xuICAgICAgICBpZiAodGhpcy5zaWRlbmF2KSB7XG4gICAgICAgICAgICB0aGlzLnNpZGVuYXYuY2xvc2UoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuc3RhdGUgPSAnY2xvc2UnO1xuICAgIH1cblxuICAgIHRvZ2dsZSgpIHtcbiAgICAgICAgaWYgKHRoaXMuc2lkZW5hdikge1xuICAgICAgICAgICAgLy8gY29uc3QgaXNPcGVuID0gdGhpcy5zaWRlbmF2Lm9wZW5lZDtcbiAgICAgICAgICAgIHRoaXMuc2lkZW5hdi50b2dnbGUoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMudG9nZ2xlU3RhdGUoKTtcbiAgICB9XG5cbiAgICB0b2dnbGVTaWRlV3JhcHBlcigpIHtcbiAgICAgICAgdGhpcy50b2dnbGVTdGF0ZSgpO1xuICAgICAgICAvLyBSYWlzZSBldmVudCBhZnRlciBhbmltYXRpb24gZmluaXNoLlxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuc3RhdGVDaGFuZ2UuZW1pdCh7IHN0YXRlOiB0aGlzLnN0YXRlIH0pO1xuICAgICAgICB9LCB0aGlzLl9hbmltYXRpb25UaW1lKTtcbiAgICB9XG5cbiAgICB0b2dnbGVTaWRlbmF2KGlzT3BlbjogYm9vbGVhbikge1xuICAgICAgICB0aGlzLnNldFN0YXRlKGlzT3BlbiA/ICdvcGVuJyA6ICdjbG9zZScpO1xuICAgICAgICAvLyBSYWlzZSBldmVudCBhZnRlciBhbmltYXRpb24gZmluaXNoLlxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuc3RhdGVDaGFuZ2UuZW1pdCh7IHN0YXRlOiB0aGlzLnN0YXRlIH0pO1xuICAgICAgICB9LCB0aGlzLl9hbmltYXRpb25UaW1lKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicGVwLXNpZGUtYmFyLWNvbnRhaW5lclwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc0xhcmdlU2NyZWVuIHx8IGlnbm9yZVJlc2l6ZTsgdGhlbiBsYXJnZVNjcmVlbnNCbG9jazsgZWxzZSBub3RMYXJnZVNjcmVlbnNCbG9ja1wiPlxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjbGFyZ2VTY3JlZW5zQmxvY2s+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtc2lkZS1iYXItY29udGFpbmVyXCIgW25nQ2xhc3NdPVwieyAnZW5kLXBvc2l0aW9uJzogcG9zaXRpb24gPT09ICdlbmQnLCAnaXMtb3Blbi1zdGF0ZSc6ICFzaG93VG9nZ2xlIHx8IHN0YXRlID09PSAnb3Blbid9XCI+XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJwb3NpdGlvbiA9PT0gJ3N0YXJ0J1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzaWRlTGF5b3V0VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlLWJ1dHRvbi1ib3JkZXJcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidG9nZ2xlQnV0dG9uVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInBvc2l0aW9uID09PSAnZW5kJ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzaWRlTGF5b3V0VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlLWJ1dHRvbi1ib3JkZXJcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidG9nZ2xlQnV0dG9uVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICAgIDxuZy10ZW1wbGF0ZSAjbm90TGFyZ2VTY3JlZW5zQmxvY2s+XG4gICAgICAgIDxtYXQtc2lkZW5hdi1jb250YWluZXIgW2hhc0JhY2tkcm9wXT1cInRydWVcIj5cbiAgICAgICAgICAgIDxtYXQtc2lkZW5hdiAjc2lkZW5hdiBbcG9zaXRpb25dPVwicG9zaXRpb25cIiBtb2RlPVwib3ZlclwiIGF1dG9Gb2N1cz1cImZhbHNlXCIgZml4ZWRJblZpZXdwb3J0PVwiZmFsc2VcIlxuICAgICAgICAgICAgICAgIChvcGVuZWRDaGFuZ2UpPVwidG9nZ2xlU2lkZW5hdigkZXZlbnQpXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInNpZGVMYXlvdXRUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9tYXQtc2lkZW5hdj5cbiAgICAgICAgPC9tYXQtc2lkZW5hdi1jb250YWluZXI+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI3RvZ2dsZUJ1dHRvblRlbXBsYXRlPlxuICAgIDxidXR0b24gbWF0LWJ1dHRvbiAqbmdJZj1cInNob3dUb2dnbGVcIiBjbGFzcz1cInRvZ2dsZS1idXR0b24gcGVwLWJ1dHRvbiB4cyByZWd1bGFyIGljb24tYnV0dG9uIFwiIChjbGljayk9XCJ0b2dnbGVTaWRlV3JhcHBlcigpXCI+XG4gICAgICAgIDxtYXQtaWNvbj5cbiAgICAgICAgICAgIDxwZXAtaWNvbiBbbmFtZV09XCJ0b2dnbGVCdXR0b25BcnJvd05hbWVcIj5cbiAgICAgICAgICAgIDwvcGVwLWljb24+XG4gICAgICAgIDwvbWF0LWljb24+XG4gICAgPC9idXR0b24+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3NpZGVMYXlvdXRUZW1wbGF0ZT5cbiAgICA8ZGl2IGNsYXNzPVwic2lkZS1sYXlvdXRcIj5cbiAgICAgICAgPGRpdiAqbmdJZj1cInNob3dIZWFkZXJcIiBjbGFzcz1cImhlYWRlci1jb250ZW50XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudCBwZXAtYm9yZGVyLWJvdHRvbSBib2R5LWxnIGVsbGlwc2lzXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImhlYWRlclRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInN0YXJ0Q29udGVudFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImZpbHRlcnNUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzbWFydEZpbHRlcnNUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZW5kQ29udGVudFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJzaG93Rm9vdGVyXCIgY2xhc3M9XCJmb290ZXItY29udGVudFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnQgcGVwLWJvcmRlci10b3AgYm9keS1sZyBlbGxpcHNpc1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJmb290ZXJUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuXG48bmctdGVtcGxhdGUgI2hlYWRlclRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltoZWFkZXItY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3N0YXJ0Q29udGVudFRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzdGFydC1jb250ZW50XVwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY29udGVudFRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZW5kQ29udGVudFRlbXBsYXRlPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltlbmQtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2ZpbHRlcnNUZW1wbGF0ZT5cblxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNzbWFydEZpbHRlcnNUZW1wbGF0ZT5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJwZXAtc21hcnQtZmlsdGVyc1wiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZm9vdGVyVGVtcGxhdGU+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Zvb3Rlci1jb250ZW50XVwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+Il19
@@ -99,11 +99,11 @@ class PepSideBarComponent {
99
99
  }
100
100
  PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
101
101
  PepSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
102
- PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { position: "position", ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", showToggle: "showToggle", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
102
+ PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { position: "position", ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", showToggle: "showToggle", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
103
103
  PepSideBarComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent });
104
104
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent, decorators: [{
105
105
  type: Component,
106
- 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]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
106
+ 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]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
107
107
  }, {
108
108
  type: Injectable
109
109
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PepLayoutService }]; }, propDecorators: { position: [{
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-lib-side-bar.mjs","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../projects/ngx-lib/side-bar/side-bar.component.html","../../../projects/ngx-lib/side-bar/side-bar.module.ts","../../../projects/ngx-lib/side-bar/public-api.ts","../../../projects/ngx-lib/side-bar/pepperi-addons-ngx-lib-side-bar.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Injectable,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ElementRef,\n Renderer2,\n} from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport {\n 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() position: 'start' | 'end' = 'start';\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() || this.position === 'end' ? 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 open() {\n if (this.sidenav) {\n this.sidenav.open();\n }\n\n this.state = 'open';\n }\n\n close() {\n if (this.sidenav) {\n this.sidenav.close();\n }\n\n this.state = 'close';\n }\n\n toggle() {\n if (this.sidenav) {\n // const isOpen = this.sidenav.opened;\n this.sidenav.toggle();\n }\n\n this.toggleState();\n }\n\n toggleSideWrapper() {\n this.toggleState();\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n\n toggleSidenav(isOpen: boolean) {\n this.setState(isOpen ? 'open' : 'close');\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n}\n","<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSidenavModule } from '@angular/material/sidenav';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepSideBarComponent } from './side-bar.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatSidenavModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepSideBarComponent],\n declarations: [PepSideBarComponent],\n})\nexport class PepSideBarModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/side-bar\n */\nexport * from './side-bar.module';\nexport * from './side-bar.component';\nexport * from './side-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i5","i1"],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-side-bar.mjs","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../projects/ngx-lib/side-bar/side-bar.component.html","../../../projects/ngx-lib/side-bar/side-bar.module.ts","../../../projects/ngx-lib/side-bar/public-api.ts","../../../projects/ngx-lib/side-bar/pepperi-addons-ngx-lib-side-bar.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Injectable,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ElementRef,\n Renderer2,\n} from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport {\n 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() position: 'start' | 'end' = 'start';\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() || this.position === 'end' ? 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 open() {\n if (this.sidenav) {\n this.sidenav.open();\n }\n\n this.state = 'open';\n }\n\n close() {\n if (this.sidenav) {\n this.sidenav.close();\n }\n\n this.state = 'close';\n }\n\n toggle() {\n if (this.sidenav) {\n // const isOpen = this.sidenav.opened;\n this.sidenav.toggle();\n }\n\n this.toggleState();\n }\n\n toggleSideWrapper() {\n this.toggleState();\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n\n toggleSidenav(isOpen: boolean) {\n this.setState(isOpen ? 'open' : 'close');\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n}\n","<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSidenavModule } from '@angular/material/sidenav';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepSideBarComponent } from './side-bar.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatSidenavModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepSideBarComponent],\n declarations: [PepSideBarComponent],\n})\nexport class PepSideBarModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/side-bar\n */\nexport * from './side-bar.module';\nexport * from './side-bar.component';\nexport * from './side-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i5","i1"],"mappings":";;;;;;;;;;;;;;MA0Ba,mBAAmB,CAAA;AAqC5B,IAAA,WAAA,CACY,WAAuB,EACvB,QAAmB,EACpB,aAA+B,EAAA;AAF9B,QAAA,IAAW,CAAA,WAAA,GAAX,WAAW,CAAY;AACvB,QAAA,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;AACpB,QAAA,IAAa,CAAA,aAAA,GAAb,aAAa,CAAkB;AArCjC,QAAA,IAAQ,CAAA,QAAA,GAAoB,OAAO,CAAC;AACpC,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;AACrB,QAAA,IAAU,CAAA,UAAA,GAAG,IAAI,CAAC;AAClB,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AACnB,QAAA,IAAU,CAAA,UAAA,GAAG,IAAI,CAAC;AAEnB,QAAA,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;AAClB,QAAA,IAAA,CAAA,cAAc,GAAG,GAAG,CAAC;AAEtC,QAAA,IAAK,CAAA,KAAA,GAAwB,MAAM,CAAC;AACpC,QAAA,IAAA,CAAA,qBAAqB,GAAW,iBAAiB,CAAC,IAAI,CAAC;AACvD,QAAA,IAAa,CAAA,aAAA,GAAG,IAAI,CAAC;AAarB,QAAA,IAAA,CAAA,WAAW,GAA8C,IAAI,YAAY,EAA+B,CAAC;AAIzG,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAClB,QAAA,IAAa,CAAA,aAAA,GAAG,MAAM,CAAC;AAGvB,QAAA,IAAiB,CAAA,iBAAA,GAAG,iBAAiB,CAAC;QAOlC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAuB,KAAI;AAC/D,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,iBAAiB,CAAC,EAAE,CAAC;AACrD,SAAC,CAAC,CAAC;KACN;IA9BD,IACI,iBAAiB,CAAC,KAAc,EAAA;AAChC,QAAA,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,4BAA4B,EAAE,CAAC;AACvC,SAAA;KACJ;AACD,IAAA,IAAI,iBAAiB,GAAA;QACjB,OAAO,IAAI,CAAC,kBAAkB,CAAC;KAClC;IAwBO,4BAA4B,GAAA;;AAEhC,QAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3D,QAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChE;AAEO,IAAA,QAAQ,CAAC,KAA0B,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACnB,QAAA,IAAI,CAAC,qBAAqB;;;aAGrB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,gBAAgB,CAAC,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAChH;IAEO,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KAC5D;IAED,QAAQ,GAAA;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;AAC9H,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACxD;IAED,IAAI,GAAA;QACA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;AACvB,SAAA;AAED,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;KACvB;IAED,KAAK,GAAA;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AACxB,SAAA;AAED,QAAA,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;KACxB;IAED,MAAM,GAAA;QACF,IAAI,IAAI,CAAC,OAAO,EAAE;;AAEd,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;AACzB,SAAA;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;;QAEnB,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AACjD,SAAC,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3B;AAED,IAAA,aAAa,CAAC,MAAe,EAAA;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;;QAEzC,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AACjD,SAAC,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3B;;AA7GM,mBAAoB,CAAA,oBAAA,GAAG,wBAAwB,CAAC;gHAD9C,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,uXC1BhC,omHAwFc,EAAA,MAAA,EAAA,CAAA,66HAAA,EAAA,usBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,aAAA,EAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;oHD9DD,mBAAmB,EAAA,CAAA,CAAA;2FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;+BACI,cAAc,EAAA,QAAA,EAAA,omHAAA,EAAA,MAAA,EAAA,CAAA,66HAAA,EAAA,usBAAA,CAAA,EAAA,CAAA;;kBAI3B,UAAU;wJAIE,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAUF,iBAAiB,EAAA,CAAA;sBADpB,KAAK;gBAWN,WAAW,EAAA,CAAA;sBADV,MAAM;gBAGe,OAAO,EAAA,CAAA;sBAA5B,SAAS;uBAAC,SAAS,CAAA;;;MEzBX,gBAAgB,CAAA;AACzB,IAAA,WAAA,CAAoB,eAAgC,EAAA;AAAhC,QAAA,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC5D;;6GAHQ,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;8GAAhB,gBAAgB,EAAA,YAAA,EAAA,CAFV,mBAAmB,CAAA,EAAA,OAAA,EAAA,CAV9B,YAAY;;QAEZ,eAAe;QACf,aAAa;QACb,gBAAgB;;QAEhB,eAAe;QACf,aAAa,aAEP,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAGpB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAZrB,YAAY;;QAEZ,eAAe;QACf,aAAa;QACb,gBAAgB;;QAEhB,eAAe;QACf,aAAa,CAAA,EAAA,CAAA,CAAA;2FAKR,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAd5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;;wBAEZ,eAAe;wBACf,aAAa;wBACb,gBAAgB;;wBAEhB,eAAe;wBACf,aAAa;AAChB,qBAAA;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,YAAY,EAAE,CAAC,mBAAmB,CAAC;iBACtC,CAAA;;;AC7BD;;AAEG;;ACFH;;AAEG;;;;"}
@@ -99,11 +99,11 @@ class PepSideBarComponent {
99
99
  }
100
100
  PepSideBarComponent.ONE_MULTI_BY_DIR_KEY = '--pep-one-multi-by-dir';
101
101
  PepSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
102
- PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { position: "position", ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", showToggle: "showToggle", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
102
+ PepSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSideBarComponent, selector: "pep-side-bar", inputs: { position: "position", ignoreResize: "ignoreResize", showHeader: "showHeader", showFooter: "showFooter", showToggle: "showToggle", useAsWebComponent: "useAsWebComponent" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
103
103
  PepSideBarComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent });
104
104
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSideBarComponent, decorators: [{
105
105
  type: Component,
106
- 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]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
106
+ 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]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>", styles: [".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform ease-out .35s,width ease-out .35s;transform:translate(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button,.pep-side-bar-container .toggle-side-bar-container.end-position.is-open-state .toggle-button-border{margin-inline:.25rem -3rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button{margin-inline:.25rem -.75rem!important}.pep-side-bar-container .toggle-side-bar-container.end-position .toggle-button-border{padding-inline-start:unset!important;padding-inline-end:var(--pep-spacing-lg, 1rem)!important}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform ease-out .35s,width ease-out .35s;transform:unset;width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline ease-out .35s;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline ease-out .35s,transform ease-out .35s;transform:rotate(0);margin-inline:-.75rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out calc(.35s / 3),margin-inline ease-out .35s;opacity:1;margin-inline:unset;width:1px;padding-inline-start:var(--pep-spacing-lg, 1rem);margin-top:var(--pep-top-bar-spacing-top, 1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:var(--pep-side-bar-width, 16rem);width:var(--pep-side-bar-width, 16rem);padding:0 var(--pep-spacing-lg, 1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:var(--pep-top-bar-spacing-top, 1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:var(--pep-side-bar-width, 16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}\n", ".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{border-inline-end:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .mat-sidenav-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown{background-color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
107
107
  }, {
108
108
  type: Injectable
109
109
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PepLayoutService }]; }, propDecorators: { position: [{
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-lib-side-bar.mjs","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../projects/ngx-lib/side-bar/side-bar.component.html","../../../projects/ngx-lib/side-bar/side-bar.module.ts","../../../projects/ngx-lib/side-bar/public-api.ts","../../../projects/ngx-lib/side-bar/pepperi-addons-ngx-lib-side-bar.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Injectable,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ElementRef,\n Renderer2,\n} from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport {\n 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() position: 'start' | 'end' = 'start';\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() || this.position === 'end' ? 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 open() {\n if (this.sidenav) {\n this.sidenav.open();\n }\n\n this.state = 'open';\n }\n\n close() {\n if (this.sidenav) {\n this.sidenav.close();\n }\n\n this.state = 'close';\n }\n\n toggle() {\n if (this.sidenav) {\n // const isOpen = this.sidenav.opened;\n this.sidenav.toggle();\n }\n\n this.toggleState();\n }\n\n toggleSideWrapper() {\n this.toggleState();\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n\n toggleSidenav(isOpen: boolean) {\n this.setState(isOpen ? 'open' : 'close');\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n}\n","<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSidenavModule } from '@angular/material/sidenav';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepSideBarComponent } from './side-bar.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatSidenavModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepSideBarComponent],\n declarations: [PepSideBarComponent],\n})\nexport class PepSideBarModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/side-bar\n */\nexport * from './side-bar.module';\nexport * from './side-bar.component';\nexport * from './side-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i5","i1"],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-side-bar.mjs","sources":["../../../projects/ngx-lib/side-bar/side-bar.component.ts","../../../projects/ngx-lib/side-bar/side-bar.component.html","../../../projects/ngx-lib/side-bar/side-bar.module.ts","../../../projects/ngx-lib/side-bar/public-api.ts","../../../projects/ngx-lib/side-bar/pepperi-addons-ngx-lib-side-bar.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Injectable,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ElementRef,\n Renderer2,\n} from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport {\n 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() position: 'start' | 'end' = 'start';\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() || this.position === 'end' ? 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 open() {\n if (this.sidenav) {\n this.sidenav.open();\n }\n\n this.state = 'open';\n }\n\n close() {\n if (this.sidenav) {\n this.sidenav.close();\n }\n\n this.state = 'close';\n }\n\n toggle() {\n if (this.sidenav) {\n // const isOpen = this.sidenav.opened;\n this.sidenav.toggle();\n }\n\n this.toggleState();\n }\n\n toggleSideWrapper() {\n this.toggleState();\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n\n toggleSidenav(isOpen: boolean) {\n this.setState(isOpen ? 'open' : 'close');\n // Raise event after animation finish.\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, this._animationTime);\n }\n}\n","<div class=\"pep-side-bar-container\">\n <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n </ng-container>\n <ng-template #largeScreensBlock>\n <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'end-position': position === 'end', 'is-open-state': !showToggle || state === 'open'}\">\n \n <ng-container *ngIf=\"position === 'start'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"position === 'end'\">\n <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n <div class=\"toggle-button-border\"></div>\n <ng-container *ngTemplateOutlet=\"toggleButtonTemplate\"></ng-container>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #notLargeScreensBlock>\n <mat-sidenav-container [hasBackdrop]=\"true\">\n <mat-sidenav #sidenav [position]=\"position\" 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 #toggleButtonTemplate>\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</ng-template>\n\n<ng-template #sideLayoutTemplate>\n <div class=\"side-layout\">\n <div *ngIf=\"showHeader\" class=\"header-content\">\n <div class=\"content pep-border-bottom body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"main-content\">\n <div class=\"content\">\n <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"showFooter\" class=\"footer-content\">\n <div class=\"content pep-border-top body-lg ellipsis\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSidenavModule } from '@angular/material/sidenav';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepSideBarComponent } from './side-bar.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatSidenavModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepSideBarComponent],\n declarations: [PepSideBarComponent],\n})\nexport class PepSideBarModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/side-bar\n */\nexport * from './side-bar.module';\nexport * from './side-bar.component';\nexport * from './side-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i5","i1"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pepperi-addons/ngx-lib",
3
- "version": "0.4.0-angular14.27",
3
+ "version": "0.4.0-angular14.28",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": ">= 14.0.2",
6
6
  "@angular/cdk": ">= 14.0.2",