@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/fesm2020/pepperi-addons-ngx-lib-separator.mjs

@@ -4,85 +4,85 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { DEFAULT_HORIZONTAL_ALIGNMENT, PepCustomizationService } from '@pepperi-addons/ngx-lib';
 
-class PepSeparatorComponent {
-    constructor(renderer, element) {
-        this.renderer = renderer;
-        this.element = element;
-        this.key = '';
-        this.label = '';
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this.controlType = 'separator';
-        this.form = null;
-        this.layoutType = 'form';
-        // @Input() renderTitle = true;
-        this._visible = true;
-        this.standAlone = false;
-    }
-    set visible(visible) {
-        this._visible = visible;
-        if (visible) {
-            this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
-        }
-        else {
-            this.renderer.addClass(this.element.nativeElement, 'hidden-element');
-        }
-    }
-    get visible() {
-        return this._visible;
-    }
-    ngOnInit() {
-        if (this.form === null) {
-            this.standAlone = true;
-            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-            // There is no pep-title-field here
-            // if (!this.renderTitle) {
-            //     this.renderer.addClass(
-            //         this.element.nativeElement,
-            //         PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME
-            //     );
-            // }
-        }
-    }
-}
-PepSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PepSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSeparatorComponent, selector: "pep-separator", inputs: { key: "key", label: "label", xAlignment: "xAlignment", form: "form", layoutType: "layoutType", visible: "visible" }, ngImport: i0, template: "<ng-container *ngIf=\"layoutType === 'form'\">\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n        <span class=\"block-with-text body-md\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-separator-field,.pep-separator-field{padding:0;height:3.5rem;max-height:3.5rem;margin-top:.5rem}.pepperi-separator-field.pepperi-small-separator-field,.pepperi-separator-field.pep-small-separator-field,.pep-separator-field.pepperi-small-separator-field,.pep-separator-field.pep-small-separator-field{height:1.15rem;margin-top:.25rem!important;margin-bottom:0!important}.pepperi-separator-field.pepperi-small-separator-field .small-block-with-text,.pepperi-separator-field.pep-small-separator-field .small-block-with-text,.pep-separator-field.pepperi-small-separator-field .small-block-with-text,.pep-separator-field.pep-small-separator-field .small-block-with-text{display:block;font-weight:var(--pep-font-weight-bold, 600);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pepperi-separator-field.wrap,.pep-separator-field.wrap{display:flex}.pepperi-separator-field.wrap .block-with-text,.pep-separator-field.wrap .block-with-text{width:100%;margin-bottom:.5rem;font-weight:var(--pep-font-weight-bold, 600);align-self:flex-end;max-height:inherit}.pepperi-separator-field.wrap.align-left .block-with-text,.pepperi-separator-field.wrap.align-0 .block-with-text,.pepperi-separator-field.wrap.align-1 .block-with-text,.pep-separator-field.wrap.align-left .block-with-text,.pep-separator-field.wrap.align-0 .block-with-text,.pep-separator-field.wrap.align-1 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:left;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{right:3px}.pepperi-separator-field.wrap.align-right .block-with-text,.pepperi-separator-field.wrap.align-2 .block-with-text,.pep-separator-field.wrap.align-right .block-with-text,.pep-separator-field.wrap.align-2 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:rtl;text-align:right;padding-left:1em}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{left:3px}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{left:3px}.pepperi-separator-field.wrap.align-center .block-with-text,.pepperi-separator-field.wrap.align-3 .block-with-text,.pep-separator-field.wrap.align-center .block-with-text,.pep-separator-field.wrap.align-3 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:center;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{right:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-separator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"layoutType === 'form'\">\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n        <span class=\"block-with-text body-md\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-separator-field,.pep-separator-field{padding:0;height:3.5rem;max-height:3.5rem;margin-top:.5rem}.pepperi-separator-field.pepperi-small-separator-field,.pepperi-separator-field.pep-small-separator-field,.pep-separator-field.pepperi-small-separator-field,.pep-separator-field.pep-small-separator-field{height:1.15rem;margin-top:.25rem!important;margin-bottom:0!important}.pepperi-separator-field.pepperi-small-separator-field .small-block-with-text,.pepperi-separator-field.pep-small-separator-field .small-block-with-text,.pep-separator-field.pepperi-small-separator-field .small-block-with-text,.pep-separator-field.pep-small-separator-field .small-block-with-text{display:block;font-weight:var(--pep-font-weight-bold, 600);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pepperi-separator-field.wrap,.pep-separator-field.wrap{display:flex}.pepperi-separator-field.wrap .block-with-text,.pep-separator-field.wrap .block-with-text{width:100%;margin-bottom:.5rem;font-weight:var(--pep-font-weight-bold, 600);align-self:flex-end;max-height:inherit}.pepperi-separator-field.wrap.align-left .block-with-text,.pepperi-separator-field.wrap.align-0 .block-with-text,.pepperi-separator-field.wrap.align-1 .block-with-text,.pep-separator-field.wrap.align-left .block-with-text,.pep-separator-field.wrap.align-0 .block-with-text,.pep-separator-field.wrap.align-1 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:left;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{right:3px}.pepperi-separator-field.wrap.align-right .block-with-text,.pepperi-separator-field.wrap.align-2 .block-with-text,.pep-separator-field.wrap.align-right .block-with-text,.pep-separator-field.wrap.align-2 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:rtl;text-align:right;padding-left:1em}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{left:3px}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{left:3px}.pepperi-separator-field.wrap.align-center .block-with-text,.pepperi-separator-field.wrap.align-3 .block-with-text,.pep-separator-field.wrap.align-center .block-with-text,.pep-separator-field.wrap.align-3 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:center;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{right:3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], xAlignment: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], layoutType: [{
-                type: Input
-            }], visible: [{
-                type: Input
+class PepSeparatorComponent {
+    constructor(renderer, element) {
+        this.renderer = renderer;
+        this.element = element;
+        this.key = '';
+        this.label = '';
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.controlType = 'separator';
+        this.form = null;
+        this.layoutType = 'form';
+        // @Input() renderTitle = true;
+        this._visible = true;
+        this.standAlone = false;
+    }
+    set visible(visible) {
+        this._visible = visible;
+        if (visible) {
+            this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+        }
+        else {
+            this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    ngOnInit() {
+        if (this.form === null) {
+            this.standAlone = true;
+            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            // There is no pep-title-field here
+            // if (!this.renderTitle) {
+            //     this.renderer.addClass(
+            //         this.element.nativeElement,
+            //         PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME
+            //     );
+            // }
+        }
+    }
+}
+PepSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PepSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSeparatorComponent, selector: "pep-separator", inputs: { key: "key", label: "label", xAlignment: "xAlignment", form: "form", layoutType: "layoutType", visible: "visible" }, ngImport: i0, template: "<ng-container *ngIf=\"layoutType === 'form'\">\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n        <span class=\"block-with-text body-md\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-separator-field,.pep-separator-field{padding:0;height:3.5rem;max-height:3.5rem;margin-top:.5rem}.pepperi-separator-field.pepperi-small-separator-field,.pepperi-separator-field.pep-small-separator-field,.pep-separator-field.pepperi-small-separator-field,.pep-separator-field.pep-small-separator-field{height:1.15rem;margin-top:.25rem!important;margin-bottom:0!important}.pepperi-separator-field.pepperi-small-separator-field .small-block-with-text,.pepperi-separator-field.pep-small-separator-field .small-block-with-text,.pep-separator-field.pepperi-small-separator-field .small-block-with-text,.pep-separator-field.pep-small-separator-field .small-block-with-text{display:block;font-weight:var(--pep-font-weight-bold, 600);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pepperi-separator-field.wrap,.pep-separator-field.wrap{display:flex}.pepperi-separator-field.wrap .block-with-text,.pep-separator-field.wrap .block-with-text{width:100%;margin-bottom:.5rem;font-weight:var(--pep-font-weight-bold, 600);align-self:flex-end;max-height:inherit}.pepperi-separator-field.wrap.align-left .block-with-text,.pepperi-separator-field.wrap.align-0 .block-with-text,.pepperi-separator-field.wrap.align-1 .block-with-text,.pep-separator-field.wrap.align-left .block-with-text,.pep-separator-field.wrap.align-0 .block-with-text,.pep-separator-field.wrap.align-1 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:left;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{right:3px}.pepperi-separator-field.wrap.align-right .block-with-text,.pepperi-separator-field.wrap.align-2 .block-with-text,.pep-separator-field.wrap.align-right .block-with-text,.pep-separator-field.wrap.align-2 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:rtl;text-align:right;padding-left:1em}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{left:3px}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{left:3px}.pepperi-separator-field.wrap.align-center .block-with-text,.pepperi-separator-field.wrap.align-3 .block-with-text,.pep-separator-field.wrap.align-center .block-with-text,.pep-separator-field.wrap.align-3 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:center;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{right:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-separator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"layoutType === 'form'\">\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n        <span class=\"block-with-text body-md\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-separator-field,.pep-separator-field{padding:0;height:3.5rem;max-height:3.5rem;margin-top:.5rem}.pepperi-separator-field.pepperi-small-separator-field,.pepperi-separator-field.pep-small-separator-field,.pep-separator-field.pepperi-small-separator-field,.pep-separator-field.pep-small-separator-field{height:1.15rem;margin-top:.25rem!important;margin-bottom:0!important}.pepperi-separator-field.pepperi-small-separator-field .small-block-with-text,.pepperi-separator-field.pep-small-separator-field .small-block-with-text,.pep-separator-field.pepperi-small-separator-field .small-block-with-text,.pep-separator-field.pep-small-separator-field .small-block-with-text{display:block;font-weight:var(--pep-font-weight-bold, 600);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pepperi-separator-field.wrap,.pep-separator-field.wrap{display:flex}.pepperi-separator-field.wrap .block-with-text,.pep-separator-field.wrap .block-with-text{width:100%;margin-bottom:.5rem;font-weight:var(--pep-font-weight-bold, 600);align-self:flex-end;max-height:inherit}.pepperi-separator-field.wrap.align-left .block-with-text,.pepperi-separator-field.wrap.align-0 .block-with-text,.pepperi-separator-field.wrap.align-1 .block-with-text,.pep-separator-field.wrap.align-left .block-with-text,.pep-separator-field.wrap.align-0 .block-with-text,.pep-separator-field.wrap.align-1 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:left;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after{right:3px}.pepperi-separator-field.wrap.align-right .block-with-text,.pepperi-separator-field.wrap.align-2 .block-with-text,.pep-separator-field.wrap.align-right .block-with-text,.pep-separator-field.wrap.align-2 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:rtl;text-align:right;padding-left:1em}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pep-separator-field.wrap.align-2 .block-with-text:before{left:3px}.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:after{left:3px}.pepperi-separator-field.wrap.align-center .block-with-text,.pepperi-separator-field.wrap.align-3 .block-with-text,.pep-separator-field.wrap.align-center .block-with-text,.pep-separator-field.wrap.align-3 .block-with-text{max-width:100%;overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:center;margin-right:-1em;padding-right:1em}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pepperi-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pep-separator-field.wrap.align-3 .block-with-text:before{right:3px}.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:after{right:3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], visible: [{
+                type: Input
             }] } });
 
-class PepSeparatorModule {
-}
-PepSeparatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepSeparatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, declarations: [PepSeparatorComponent], imports: [CommonModule], exports: [PepSeparatorComponent] });
-PepSeparatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    exports: [PepSeparatorComponent],
-                    declarations: [PepSeparatorComponent],
-                }]
+class PepSeparatorModule {
+}
+PepSeparatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepSeparatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, declarations: [PepSeparatorComponent], imports: [CommonModule], exports: [PepSeparatorComponent] });
+PepSeparatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSeparatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [PepSeparatorComponent],
+                    declarations: [PepSeparatorComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-lib/separator
+/*
+ * Public API Surface of ngx-lib/separator
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepSeparatorComponent, PepSeparatorModule };

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

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