npm - @spicainternational/ngx-sds-components - Versions diffs - 5.12.3 → 5.13.0-beta.0 - Mend

@spicainternational/ngx-sds-components 5.12.3 → 5.13.0-beta.0

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.

Files changed (7) hide show

package/esm2020/src/lib/side-bar/side-bar.component.mjs CHANGED Viewed

@@ -1,17 +1,88 @@
 import { Component, Input } from '@angular/core';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
+import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@fortawesome/angular-fontawesome";
 import * as i2 from "@angular/common";
+// import { faSidebar } from '@fortawesome/pro-light-svg-icons';
+// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';
 export class SdsSideBarComponent {
     constructor() {
-        this.showSideBar = false;
-        this.product = '';
-        this.isMainSideBar = false;
-        this.showSideBarToggleButton = false;
-        this.caretIcon = faChevronRight;
+        /**
+         * Define when the hide panel button is shown.
+         * Default is 'auto' which will only show the button when the users hovers over the panel.
+         * 'always' will always show the button.
+         *
+         * @type {('always' | 'auto')}
+         * @memberof SdsSideBarComponent
+         */
+        this.showCloseButton = 'auto';
+        /**
+         * Pull out mode will show the side bar as user hovers over the left side of the screen
+         * When side bar is in pull out mode it will be rendered over the main contents.
+         *
+         * @type {boolean}
+         * @memberof SdsSideBarComponent
+         */
+        this.enablePullOutMode = false;
+        /**
+         * Define the width of the side bar in rem.
+         *
+         * @type {number}
+         * @memberof SdsSideBarComponent
+         */
+        this.widthRem = 14;
+        /**
+         * Product name defines the color scheme of the side bar.
+         * Default is 'all-hours'.
+         * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'
+         *
+         * @type {string}
+         * @memberof SdsSideBarComponent
+         */
+        this.product = 'all-hours';
+        /**
+         * Define the width of the screen that triggers hiding of the side bar.
+         * Note that the width is checked at the component creation and not when the screen is resized.
+         * If user resizes the screen he must manually hide the side bar.
+         *
+         * @type {(number | undefined)}
+         * @memberof SdsSideBarComponent
+         */
+        this.autoHideScreenWidth = 992;
+        this.showSideBar = true;
+        this.pullOutSideBar = false;
+        this.caretIcon = faAngleLeft;
+        this.autoHideActive = false;
+        this.screenWidth = 0;
+        this.componentInitialized = false;
+        this._checkAutoHide$ = new Subject();
+        this._checkAutoHide$.subscribe(() => {
+            console.log('check autohide');
+            if (this.componentInitialized && this.autoHideScreenWidth) {
+                console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);
+                this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;
+                console.log('hideSideBar', this.autoHideActive);
+                if (this.autoHideActive) {
+                    this.showSideBar = false;
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._checkAutoHide$.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['autoHideScreenWidthRem']) {
+            this._checkAutoHide$.next();
+        }
+    }
+    ngOnInit() {
+        this.componentInitialized = true;
+        this.screenWidth = window.innerWidth;
+        console.log('screenWidth', this.screenWidth);
+        this._checkAutoHide$.next();
     }
-    ngOnInit() { }
     toggleSideBar(state) {
         if (state !== undefined) {
             this.showSideBar = state;
@@ -22,19 +93,23 @@ export class SdsSideBarComponent {
     }
 }
 SdsSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { product: "product", isMainSideBar: "isMainSideBar", showSideBarToggleButton: "showSideBarToggleButton", hideSideBarText: "hideSideBarText", showSideBarText: "showSideBarText" }, ngImport: i0, template: "<aside\r\n    class=\"sds-side-bar \"\r\n    [class]=\"(product ? 'product-' + product : null)\"\r\n    [class.sds-main-side-bar] = \"isMainSideBar\"\r\n    [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n    <div class=\"d-flex flex-column h-100\">\r\n        <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n            <div\r\n                *ngIf=\"showSideBarToggleButton\"\r\n                class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n                [class.open]=\"showSideBar\"\r\n                [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n                (click)=\"toggleSideBar()\"\r\n            >\r\n                <div class=\"toggle-side-bar-icon\">\r\n                    <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n                </div>    \r\n            </div>\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </div>\r\n</aside>\r\n", styles: [".toggle-side-bar-button{transition:transform .2s linear}.toggle-side-bar-button.open .toggle-side-bar-icon{transform:rotate(-180deg)}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n    class=\"vh-100 position-relative sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"showSideBar\"   \r\n    >\r\n\r\n    <!-- CLOSE SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n        class=\"sds-side-bar-button-container close-side-bar-button\"\r\n        [class.hidden]=\"!showSideBar\"\r\n        [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"closeButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"  \r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n        </button>\r\n    </div>\r\n\r\n    <!-- OPEN SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || !showSideBar)\"    \r\n        class=\"sds-side-bar-button-container open-side-bar-button\"\r\n        [class.hidden]=\"showSideBar\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"openButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"\r\n                [rotate]=\"180\"\r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n         </button>\r\n    </div>\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.shadow]=\"pullOutSideBar\"\r\n        [class.sds-side-bar-open]=\"showSideBar\"\r\n        [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n        \r\n        (mouseleave)=\"pullOutSideBar = false\"\r\n    >\r\n        <div \r\n            *ngIf=\"enablePullOutMode &&  !showSideBar && !pullOutSideBar\"\r\n            class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n            style=\"width: 0.75rem;\"\r\n            (mouseenter)=\"pullOutSideBar = true\"\r\n            >\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n            [style.width.rem]=\"widthRem\">\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-side-bar', template: "<aside\r\n    class=\"sds-side-bar \"\r\n    [class]=\"(product ? 'product-' + product : null)\"\r\n    [class.sds-main-side-bar] = \"isMainSideBar\"\r\n    [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n    <div class=\"d-flex flex-column h-100\">\r\n        <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n            <div\r\n                *ngIf=\"showSideBarToggleButton\"\r\n                class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n                [class.open]=\"showSideBar\"\r\n                [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n                (click)=\"toggleSideBar()\"\r\n            >\r\n                <div class=\"toggle-side-bar-icon\">\r\n                    <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n                </div>    \r\n            </div>\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </div>\r\n</aside>\r\n", styles: [".toggle-side-bar-button{transition:transform .2s linear}.toggle-side-bar-button.open .toggle-side-bar-icon{transform:rotate(-180deg)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { product: [{
+            args: [{ selector: 'sds-side-bar', template: "<div \r\n    class=\"vh-100 position-relative sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"showSideBar\"   \r\n    >\r\n\r\n    <!-- CLOSE SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n        class=\"sds-side-bar-button-container close-side-bar-button\"\r\n        [class.hidden]=\"!showSideBar\"\r\n        [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"closeButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"  \r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n        </button>\r\n    </div>\r\n\r\n    <!-- OPEN SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || !showSideBar)\"    \r\n        class=\"sds-side-bar-button-container open-side-bar-button\"\r\n        [class.hidden]=\"showSideBar\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"openButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"\r\n                [rotate]=\"180\"\r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n         </button>\r\n    </div>\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.shadow]=\"pullOutSideBar\"\r\n        [class.sds-side-bar-open]=\"showSideBar\"\r\n        [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n        \r\n        (mouseleave)=\"pullOutSideBar = false\"\r\n    >\r\n        <div \r\n            *ngIf=\"enablePullOutMode &&  !showSideBar && !pullOutSideBar\"\r\n            class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n            style=\"width: 0.75rem;\"\r\n            (mouseenter)=\"pullOutSideBar = true\"\r\n            >\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n            [style.width.rem]=\"widthRem\">\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showCloseButton: [{
+                type: Input
+            }], enablePullOutMode: [{
+                type: Input
+            }], widthRem: [{
                 type: Input
-            }], isMainSideBar: [{
+            }], product: [{
                 type: Input
-            }], showSideBarToggleButton: [{
+            }], autoHideScreenWidth: [{
                 type: Input
-            }], hideSideBarText: [{
+            }], closeButtonHint: [{
                 type: Input
-            }], showSideBarText: [{
+            }], openButtonHint: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2lkZS1iYXIvc2lkZS1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2lkZS1iYXIvc2lkZS1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFrQixjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQU9wRixNQUFNLE9BQU8sbUJBQW1CO0lBYzVCO1FBWk8sZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFFbEIsWUFBTyxHQUFVLEVBQUUsQ0FBQztRQUNwQixrQkFBYSxHQUFZLEtBQUssQ0FBQztRQUMvQiw0QkFBdUIsR0FBWSxLQUFLLENBQUM7UUFNM0MsY0FBUyxHQUFtQixjQUFjLENBQUM7SUFFbkMsQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVaLGFBQWEsQ0FBQyxLQUFlO1FBQ2hDLElBQUksS0FBSyxLQUFLLFNBQVMsRUFBRTtZQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztTQUM1QjthQUFNO1lBQ0gsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDeEM7SUFDTCxDQUFDOztnSEF4QlEsbUJBQW1CO29HQUFuQixtQkFBbUIsZ1BDUmhDLHFoQ0F3QkE7MkZEaEJhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDSSxjQUFjOzBFQVFmLE9BQU87c0JBQWYsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLHVCQUF1QjtzQkFBL0IsS0FBSztnQkFFVSxlQUFlO3NCQUE5QixLQUFLO2dCQUNVLGVBQWU7c0JBQTlCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSWNvbkRlZmluaXRpb24sIGZhQ2hldnJvblJpZ2h0IH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLXNpZGUtYmFyJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaWRlLWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9zaWRlLWJhci5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzU2lkZUJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgcHVibGljIHNob3dTaWRlQmFyID0gZmFsc2U7XHJcblxyXG4gICAgQElucHV0KCkgcHJvZHVjdDpzdHJpbmcgPSAnJztcclxuICAgIEBJbnB1dCgpIGlzTWFpblNpZGVCYXI6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIHNob3dTaWRlQmFyVG9nZ2xlQnV0dG9uOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGhpZGVTaWRlQmFyVGV4dD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93U2lkZUJhclRleHQ/OiBzdHJpbmc7XHJcblxyXG5cclxuICAgIHB1YmxpYyBjYXJldEljb246IEljb25EZWZpbml0aW9uID0gZmFDaGV2cm9uUmlnaHQ7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgdG9nZ2xlU2lkZUJhcihzdGF0ZT86IGJvb2xlYW4pIHtcclxuICAgICAgICBpZiAoc3RhdGUgIT09IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLnNob3dTaWRlQmFyID0gc3RhdGU7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy5zaG93U2lkZUJhciA9ICF0aGlzLnNob3dTaWRlQmFyO1xyXG4gICAgICAgIH1cclxuICAgIH0gICAgXHJcbn1cclxuIiwiPGFzaWRlXHJcbiAgICBjbGFzcz1cInNkcy1zaWRlLWJhciBcIlxyXG4gICAgW2NsYXNzXT1cIihwcm9kdWN0ID8gJ3Byb2R1Y3QtJyArIHByb2R1Y3QgOiBudWxsKVwiXHJcbiAgICBbY2xhc3Muc2RzLW1haW4tc2lkZS1iYXJdID0gXCJpc01haW5TaWRlQmFyXCJcclxuICAgIFtjbGFzcy5oaWRlLXNpZGViYXJdPVwiIXNob3dTaWRlQmFyXCJcclxuPlxyXG4gICAgPGRpdiBjbGFzcz1cImQtZmxleCBmbGV4LWNvbHVtbiBoLTEwMFwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggZmxleC1jb2x1bW4gZmxleC1ncm93LTAgdy0xMDAgaC0xMDBcIj5cclxuICAgICAgICAgICAgPGRpdlxyXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJzaG93U2lkZUJhclRvZ2dsZUJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInRvZ2dsZS1zaWRlLWJhci1idXR0b24gcG9zaXRpb24tYWJzb2x1dGUgZC1tZC1ub25lIHJvdW5kZWQtY2lyY2xlIHRvZ2dsZVNpZGVCYXIgZC1mbGV4IGp1c3RpZnktY29udGVudC1jZW50ZXIganVzdGlmeS1jb250ZW50LWNlbnRlciBhbGlnbi1pdGVtcy1jZW50ZXJcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLm9wZW5dPVwic2hvd1NpZGVCYXJcIlxyXG4gICAgICAgICAgICAgICAgW3RpdGxlXT1cInNob3dTaWRlQmFyID8gaGlkZVNpZGVCYXJUZXh0IDogc2hvd1NpZGVCYXJUZXh0XCJcclxuICAgICAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVTaWRlQmFyKClcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlLXNpZGUtYmFyLWljb25cIj5cclxuICAgICAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjYXJldEljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj4gICAgXHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PiAgICAgICAgICAgICAgICBcclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2FzaWRlPlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2lkZS1iYXIvc2lkZS1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvc2lkZS1iYXIvc2lkZS1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQStDLE1BQU0sZUFBZSxDQUFDO0FBQzlGLE9BQU8sRUFBa0IsV0FBVyxFQUFrQixNQUFNLGtDQUFrQyxDQUFDO0FBQy9GLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7QUFDL0IsZ0VBQWdFO0FBQ2hFLCtLQUErSztBQU8vSyxNQUFNLE9BQU8sbUJBQW1CO0lBNEU1QjtRQTFFQTs7Ozs7OztXQU9HO1FBQ2Esb0JBQWUsR0FBc0IsTUFBTSxDQUFDO1FBRTVEOzs7Ozs7V0FNRztRQUNhLHNCQUFpQixHQUFZLEtBQUssQ0FBQztRQUVuRDs7Ozs7V0FLRztRQUNhLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFFdEM7Ozs7Ozs7V0FPRztRQUNNLFlBQU8sR0FBK0QsV0FBVyxDQUFDO1FBRTNGOzs7Ozs7O1dBT0c7UUFDYSx3QkFBbUIsR0FBdUIsR0FBRyxDQUFDO1FBbUJ2RCxnQkFBVyxHQUFHLElBQUksQ0FBQztRQUNuQixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUN2QixjQUFTLEdBQW1CLFdBQVcsQ0FBQztRQUN4QyxtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUUvQixnQkFBVyxHQUFXLENBQUMsQ0FBQztRQUN4Qix5QkFBb0IsR0FBWSxLQUFLLENBQUM7UUFFdEMsb0JBQWUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBSTFDLElBQUksQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNoQyxPQUFPLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUM7WUFDOUIsSUFBSSxJQUFJLENBQUMsb0JBQW9CLElBQUksSUFBSSxDQUFDLG1CQUFtQixFQUFFO2dCQUN2RCxPQUFPLENBQUMsR0FBRyxDQUFDLDZCQUE2QixFQUFFLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO2dCQUVyRSxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDO2dCQUVsRSxPQUFPLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7Z0JBRWhELElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRTtvQkFDckIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7aUJBQzVCO2FBQ0o7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFDRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN2QyxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQzlCLElBQUksT0FBTyxDQUFDLHdCQUF3QixDQUFDLEVBQUU7WUFDbkMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUMvQjtJQUNMLENBQUM7SUFFRCxRQUFRO1FBQ0osSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQztRQUNqQyxJQUFJLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUM7UUFDckMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVNLGFBQWEsQ0FBQyxLQUFlO1FBQ2hDLElBQUksS0FBSyxLQUFLLFNBQVMsRUFBRTtZQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztTQUM1QjthQUFNO1lBQ0gsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDeEM7SUFDTCxDQUFDOztnSEFwSFEsbUJBQW1CO29HQUFuQixtQkFBbUIsNlRDWGhDLHE4RUE2RU07MkZEbEVPLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDSSxjQUFjOzBFQWNSLGVBQWU7c0JBQTlCLEtBQUs7Z0JBU1UsaUJBQWlCO3NCQUFoQyxLQUFLO2dCQVFVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBVUcsT0FBTztzQkFBZixLQUFLO2dCQVVVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFRVSxlQUFlO3NCQUE5QixLQUFLO2dCQVFVLGNBQWM7c0JBQTdCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSwgT25Jbml0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEljb25EZWZpbml0aW9uLCBmYUFuZ2xlTGVmdCwgZmFDaGV2cm9uUmlnaHQgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuLy8gaW1wb3J0IHsgZmFTaWRlYmFyIH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1saWdodC1zdmctaWNvbnMnO1xyXG4vLyBpbXBvcnQgeyBJY29uRGVmaW5pdGlvbiwgZmFTaWRlYmFyLCBmYUNoZXZyb25SaWdodCwgZmFHcmlwVmVydGljYWwsIGZhR3JpcExpbmVzVmVydGljYWwsIGZhQ2hldnJvbkxlZnQsIGZhQXJyb3dSaWdodEZyb21CcmFja2V0IH0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1yZWd1bGFyLXN2Zy1pY29ucyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLXNpZGUtYmFyJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaWRlLWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9zaWRlLWJhci5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzU2lkZUJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogRGVmaW5lIHdoZW4gdGhlIGhpZGUgcGFuZWwgYnV0dG9uIGlzIHNob3duLiAgXHJcbiAgICAgKiBEZWZhdWx0IGlzICdhdXRvJyB3aGljaCB3aWxsIG9ubHkgc2hvdyB0aGUgYnV0dG9uIHdoZW4gdGhlIHVzZXJzIGhvdmVycyBvdmVyIHRoZSBwYW5lbC5cclxuICAgICAqICdhbHdheXMnIHdpbGwgYWx3YXlzIHNob3cgdGhlIGJ1dHRvbi5cclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7KCdhbHdheXMnIHwgJ2F1dG8nKX1cclxuICAgICAqIEBtZW1iZXJvZiBTZHNTaWRlQmFyQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246ICdhbHdheXMnIHwgJ2F1dG8nID0gJ2F1dG8nO1xyXG4gICAgXHJcbiAgICAvKipcclxuICAgICAqIFB1bGwgb3V0IG1vZGUgd2lsbCBzaG93IHRoZSBzaWRlIGJhciBhcyB1c2VyIGhvdmVycyBvdmVyIHRoZSBsZWZ0IHNpZGUgb2YgdGhlIHNjcmVlblxyXG4gICAgICogV2hlbiBzaWRlIGJhciBpcyBpbiBwdWxsIG91dCBtb2RlIGl0IHdpbGwgYmUgcmVuZGVyZWQgb3ZlciB0aGUgbWFpbiBjb250ZW50cy5cclxuICAgICAqXHJcbiAgICAgKiBAdHlwZSB7Ym9vbGVhbn1cclxuICAgICAqIEBtZW1iZXJvZiBTZHNTaWRlQmFyQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBlbmFibGVQdWxsT3V0TW9kZTogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogRGVmaW5lIHRoZSB3aWR0aCBvZiB0aGUgc2lkZSBiYXIgaW4gcmVtLlxyXG4gICAgICpcclxuICAgICAqIEB0eXBlIHtudW1iZXJ9XHJcbiAgICAgKiBAbWVtYmVyb2YgU2RzU2lkZUJhckNvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgd2lkdGhSZW06IG51bWJlciA9IDE0O1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogUHJvZHVjdCBuYW1lIGRlZmluZXMgdGhlIGNvbG9yIHNjaGVtZSBvZiB0aGUgc2lkZSBiYXIuXHJcbiAgICAgKiBEZWZhdWx0IGlzICdhbGwtaG91cnMnLlxyXG4gICAgICogT3B0aW9uczogJ2FsbC1ob3VycycsICdkb29yLWNsb3VkJywgJ215LWhvdXJzJywgJ3RpbWUtYW5kLXNwYWNlJ1xyXG4gICAgICpcclxuICAgICAqIEB0eXBlIHtzdHJpbmd9XHJcbiAgICAgKiBAbWVtYmVyb2YgU2RzU2lkZUJhckNvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBwcm9kdWN0OiAnYWxsLWhvdXJzJyB8ICdkb29yLWNsb3VkJyB8ICdteS1ob3VycycgfCAndGltZS1hbmQtc3BhY2UnID0gJ2FsbC1ob3Vycyc7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBEZWZpbmUgdGhlIHdpZHRoIG9mIHRoZSBzY3JlZW4gdGhhdCB0cmlnZ2VycyBoaWRpbmcgb2YgdGhlIHNpZGUgYmFyLlxyXG4gICAgICogTm90ZSB0aGF0IHRoZSB3aWR0aCBpcyBjaGVja2VkIGF0IHRoZSBjb21wb25lbnQgY3JlYXRpb24gYW5kIG5vdCB3aGVuIHRoZSBzY3JlZW4gaXMgcmVzaXplZC5cclxuICAgICAqIElmIHVzZXIgcmVzaXplcyB0aGUgc2NyZWVuIGhlIG11c3QgbWFudWFsbHkgaGlkZSB0aGUgc2lkZSBiYXIuXHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUgeyhudW1iZXIgfCB1bmRlZmluZWQpfVxyXG4gICAgICogQG1lbWJlcm9mIFNkc1NpZGVCYXJDb21wb25lbnRcclxuICAgICAqL1xyXG4gICAgQElucHV0KCkgcHVibGljIGF1dG9IaWRlU2NyZWVuV2lkdGg6IG51bWJlciB8IHVuZGVmaW5lZCA9IDk5MjtcclxuXHJcbiAgICAvKipcclxuICAgICAqIERlZmluZSB0aGUgaGludCBvZiB0aGUgaGlkZSBidXR0b24uXHJcbiAgICAgKlxyXG4gICAgICogQHR5cGUge3N0cmluZ31cclxuICAgICAqIEBtZW1iZXJvZiBTZHNTaWRlQmFyQ29tcG9uZW50XHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBjbG9zZUJ1dHRvbkhpbnQ/OiBzdHJpbmc7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBEZWZpbmUgdGhlIGhpbnQgb2YgdGhlIHNob3cgYnV0dG9uLlxyXG4gICAgICpcclxuICAgICAqIEB0eXBlIHtzdHJpbmd9XHJcbiAgICAgKiBAbWVtYmVyb2YgU2RzU2lkZUJhckNvbXBvbmVudFxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgb3BlbkJ1dHRvbkhpbnQ/OiBzdHJpbmc7XHJcblxyXG5cclxuICAgIHB1YmxpYyBzaG93U2lkZUJhciA9IHRydWU7XHJcbiAgICBwdWJsaWMgcHVsbE91dFNpZGVCYXIgPSBmYWxzZTsgICAgXHJcbiAgICBwdWJsaWMgY2FyZXRJY29uOiBJY29uRGVmaW5pdGlvbiA9IGZhQW5nbGVMZWZ0O1xyXG4gICAgcHVibGljIGF1dG9IaWRlQWN0aXZlOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gICAgcHJpdmF0ZSBzY3JlZW5XaWR0aDogbnVtYmVyID0gMDtcclxuICAgIHByaXZhdGUgY29tcG9uZW50SW5pdGlhbGl6ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBwcml2YXRlIF9jaGVja0F1dG9IaWRlJCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcblxyXG4gICAgICAgIHRoaXMuX2NoZWNrQXV0b0hpZGUkLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgICAgICAgIGNvbnNvbGUubG9nKCdjaGVjayBhdXRvaGlkZScpO1xyXG4gICAgICAgICAgICBpZiAodGhpcy5jb21wb25lbnRJbml0aWFsaXplZCAmJiB0aGlzLmF1dG9IaWRlU2NyZWVuV2lkdGgpIHtcclxuICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKCd0aGlzLmF1dG9IaWRlU2NyZWVuV2lkdGhSZW0nLCB0aGlzLmF1dG9IaWRlU2NyZWVuV2lkdGgpO1xyXG5cclxuICAgICAgICAgICAgICAgIHRoaXMuYXV0b0hpZGVBY3RpdmUgPSB0aGlzLnNjcmVlbldpZHRoIDwgdGhpcy5hdXRvSGlkZVNjcmVlbldpZHRoO1xyXG5cclxuICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKCdoaWRlU2lkZUJhcicsIHRoaXMuYXV0b0hpZGVBY3RpdmUpO1xyXG5cclxuICAgICAgICAgICAgICAgIGlmICh0aGlzLmF1dG9IaWRlQWN0aXZlKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5zaG93U2lkZUJhciA9IGZhbHNlO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLl9jaGVja0F1dG9IaWRlJC51bnN1YnNjcmliZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgICAgICBpZiAoY2hhbmdlc1snYXV0b0hpZGVTY3JlZW5XaWR0aFJlbSddKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NoZWNrQXV0b0hpZGUkLm5leHQoKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7ICBcclxuICAgICAgICB0aGlzLmNvbXBvbmVudEluaXRpYWxpemVkID0gdHJ1ZTtcclxuICAgICAgICB0aGlzLnNjcmVlbldpZHRoID0gd2luZG93LmlubmVyV2lkdGg7IFxyXG4gICAgICAgIGNvbnNvbGUubG9nKCdzY3JlZW5XaWR0aCcsIHRoaXMuc2NyZWVuV2lkdGgpO1xyXG4gICAgICAgIHRoaXMuX2NoZWNrQXV0b0hpZGUkLm5leHQoKTtcclxuICAgIH0gIFxyXG5cclxuICAgIHB1YmxpYyB0b2dnbGVTaWRlQmFyKHN0YXRlPzogYm9vbGVhbikge1xyXG4gICAgICAgIGlmIChzdGF0ZSAhPT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuc2hvd1NpZGVCYXIgPSBzdGF0ZTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICB0aGlzLnNob3dTaWRlQmFyID0gIXRoaXMuc2hvd1NpZGVCYXI7XHJcbiAgICAgICAgfVxyXG4gICAgfSAgICBcclxufVxyXG4iLCI8ZGl2IFxyXG4gICAgY2xhc3M9XCJ2aC0xMDAgcG9zaXRpb24tcmVsYXRpdmUgc2RzLXNpZGUtYmFyLWNvbnRhaW5lclwiXHJcbiAgICBbY2xhc3Muc2RzLXNpZGUtYmFyLW9wZW5dPVwic2hvd1NpZGVCYXJcIiAgIFxyXG4gICAgPlxyXG5cclxuICAgIDwhLS0gQ0xPU0UgU0lERUJBUiAtLT5cclxuICAgIDxkaXYgXHJcbiAgICAgICAgKm5nSWY9XCIhcHVsbE91dFNpZGVCYXIgJiYgKHRydWUgfHwgc2hvd1NpZGVCYXIpXCJcclxuICAgICAgICBjbGFzcz1cInNkcy1zaWRlLWJhci1idXR0b24tY29udGFpbmVyIGNsb3NlLXNpZGUtYmFyLWJ1dHRvblwiXHJcbiAgICAgICAgW2NsYXNzLmhpZGRlbl09XCIhc2hvd1NpZGVCYXJcIlxyXG4gICAgICAgIFtjbGFzcy5hbHdheXMtc2hvd109XCJzaG93U2lkZUJhciAmJiBzaG93Q2xvc2VCdXR0b24gPT09ICdhbHdheXMnXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgXHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tb3V0bGluZS1wcmltYXJ5IHNoYWRvdy1zbVwiXHJcbiAgICAgICAgICAgIFt0aXRsZV09XCJjbG9zZUJ1dHRvbkhpbnRcIlxyXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlU2lkZUJhcigpXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICAgIDxmYS1pY29uIFxyXG4gICAgICAgICAgICAgICAgW2ljb25dPVwiY2FyZXRJY29uXCIgIFxyXG4gICAgICAgICAgICAgICAgc2l6ZT1cInhzXCJcclxuICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgPC9mYS1pY29uPlxyXG5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImhvdC1zcG90XCI+PC9kaXY+XHJcblxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPCEtLSBPUEVOIFNJREVCQVIgLS0+XHJcbiAgICA8ZGl2IFxyXG4gICAgICAgICpuZ0lmPVwiIXB1bGxPdXRTaWRlQmFyICYmICh0cnVlIHx8ICFzaG93U2lkZUJhcilcIiAgICBcclxuICAgICAgICBjbGFzcz1cInNkcy1zaWRlLWJhci1idXR0b24tY29udGFpbmVyIG9wZW4tc2lkZS1iYXItYnV0dG9uXCJcclxuICAgICAgICBbY2xhc3MuaGlkZGVuXT1cInNob3dTaWRlQmFyXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgXHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tb3V0bGluZS1wcmltYXJ5IHNoYWRvdy1zbVwiXHJcbiAgICAgICAgICAgIFt0aXRsZV09XCJvcGVuQnV0dG9uSGludFwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVTaWRlQmFyKClcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPGZhLWljb24gXHJcbiAgICAgICAgICAgICAgICBbaWNvbl09XCJjYXJldEljb25cIlxyXG4gICAgICAgICAgICAgICAgW3JvdGF0ZV09XCIxODBcIlxyXG4gICAgICAgICAgICAgICAgc2l6ZT1cInhzXCJcclxuICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgPC9mYS1pY29uPlxyXG5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImhvdC1zcG90XCI+PC9kaXY+XHJcblxyXG4gICAgICAgICA8L2J1dHRvbj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxhc2lkZVxyXG4gICAgICAgIGNsYXNzPVwic2RzLXNpZGUtYmFyIGgtMTAwIGJvcmRlci1lbmRcIlxyXG4gICAgICAgIFtjbGFzc109XCIocHJvZHVjdCA/ICdwcm9kdWN0LScgKyBwcm9kdWN0IDogbnVsbClcIlxyXG4gICAgICAgIFtjbGFzcy5zaGFkb3ddPVwicHVsbE91dFNpZGVCYXJcIlxyXG4gICAgICAgIFtjbGFzcy5zZHMtc2lkZS1iYXItb3Blbl09XCJzaG93U2lkZUJhclwiXHJcbiAgICAgICAgW3N0eWxlLndpZHRoLnJlbV09XCIoc2hvd1NpZGVCYXIgfHwgcHVsbE91dFNpZGVCYXIpID8gd2lkdGhSZW0gOiBlbmFibGVQdWxsT3V0TW9kZSA/IDAuNzUgOiAwXCJcclxuICAgICAgICBcclxuICAgICAgICAobW91c2VsZWF2ZSk9XCJwdWxsT3V0U2lkZUJhciA9IGZhbHNlXCJcclxuICAgID5cclxuICAgICAgICA8ZGl2IFxyXG4gICAgICAgICAgICAqbmdJZj1cImVuYWJsZVB1bGxPdXRNb2RlICYmICAhc2hvd1NpZGVCYXIgJiYgIXB1bGxPdXRTaWRlQmFyXCJcclxuICAgICAgICAgICAgY2xhc3M9XCJzZHMtc2lkZS1iYXItcHVsbC1vdXQgaC0xMDAgcG9zaXRpb24tYWJzb2x1dGVcIiBcclxuICAgICAgICAgICAgc3R5bGU9XCJ3aWR0aDogMC43NXJlbTtcIlxyXG4gICAgICAgICAgICAobW91c2VlbnRlcik9XCJwdWxsT3V0U2lkZUJhciA9IHRydWVcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggZmxleC1jb2x1bW4gZmxleC1ncm93LTAgaC0xMDBcIiBcclxuICAgICAgICAgICAgW3N0eWxlLndpZHRoLnJlbV09XCJ3aWR0aFJlbVwiPlxyXG5cclxuICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PiAgICAgICAgICAgICAgICBcclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICA8L2FzaWRlPlxyXG48L2Rpdj4iXX0=

package/fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs CHANGED Viewed

@@ -2,19 +2,90 @@ import * as i0 from '@angular/core';
 import { Component, Input, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
+import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons';
+import { Subject } from 'rxjs';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+// import { faSidebar } from '@fortawesome/pro-light-svg-icons';
+// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';
 class SdsSideBarComponent {
     constructor() {
-        this.showSideBar = false;
-        this.product = '';
-        this.isMainSideBar = false;
-        this.showSideBarToggleButton = false;
-        this.caretIcon = faChevronRight;
+        /**
+         * Define when the hide panel button is shown.
+         * Default is 'auto' which will only show the button when the users hovers over the panel.
+         * 'always' will always show the button.
+         *
+         * @type {('always' | 'auto')}
+         * @memberof SdsSideBarComponent
+         */
+        this.showCloseButton = 'auto';
+        /**
+         * Pull out mode will show the side bar as user hovers over the left side of the screen
+         * When side bar is in pull out mode it will be rendered over the main contents.
+         *
+         * @type {boolean}
+         * @memberof SdsSideBarComponent
+         */
+        this.enablePullOutMode = false;
+        /**
+         * Define the width of the side bar in rem.
+         *
+         * @type {number}
+         * @memberof SdsSideBarComponent
+         */
+        this.widthRem = 14;
+        /**
+         * Product name defines the color scheme of the side bar.
+         * Default is 'all-hours'.
+         * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'
+         *
+         * @type {string}
+         * @memberof SdsSideBarComponent
+         */
+        this.product = 'all-hours';
+        /**
+         * Define the width of the screen that triggers hiding of the side bar.
+         * Note that the width is checked at the component creation and not when the screen is resized.
+         * If user resizes the screen he must manually hide the side bar.
+         *
+         * @type {(number | undefined)}
+         * @memberof SdsSideBarComponent
+         */
+        this.autoHideScreenWidth = 992;
+        this.showSideBar = true;
+        this.pullOutSideBar = false;
+        this.caretIcon = faAngleLeft;
+        this.autoHideActive = false;
+        this.screenWidth = 0;
+        this.componentInitialized = false;
+        this._checkAutoHide$ = new Subject();
+        this._checkAutoHide$.subscribe(() => {
+            console.log('check autohide');
+            if (this.componentInitialized && this.autoHideScreenWidth) {
+                console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);
+                this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;
+                console.log('hideSideBar', this.autoHideActive);
+                if (this.autoHideActive) {
+                    this.showSideBar = false;
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._checkAutoHide$.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['autoHideScreenWidthRem']) {
+            this._checkAutoHide$.next();
+        }
+    }
+    ngOnInit() {
+        this.componentInitialized = true;
+        this.screenWidth = window.innerWidth;
+        console.log('screenWidth', this.screenWidth);
+        this._checkAutoHide$.next();
     }
-    ngOnInit() { }
     toggleSideBar(state) {
         if (state !== undefined) {
             this.showSideBar = state;
@@ -25,19 +96,23 @@ class SdsSideBarComponent {
     }
 }
 SdsSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { product: "product", isMainSideBar: "isMainSideBar", showSideBarToggleButton: "showSideBarToggleButton", hideSideBarText: "hideSideBarText", showSideBarText: "showSideBarText" }, ngImport: i0, template: "<aside\r\n    class=\"sds-side-bar \"\r\n    [class]=\"(product ? 'product-' + product : null)\"\r\n    [class.sds-main-side-bar] = \"isMainSideBar\"\r\n    [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n    <div class=\"d-flex flex-column h-100\">\r\n        <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n            <div\r\n                *ngIf=\"showSideBarToggleButton\"\r\n                class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n                [class.open]=\"showSideBar\"\r\n                [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n                (click)=\"toggleSideBar()\"\r\n            >\r\n                <div class=\"toggle-side-bar-icon\">\r\n                    <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n                </div>    \r\n            </div>\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </div>\r\n</aside>\r\n", styles: [".toggle-side-bar-button{transition:transform .2s linear}.toggle-side-bar-button.open .toggle-side-bar-icon{transform:rotate(-180deg)}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n    class=\"vh-100 position-relative sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"showSideBar\"   \r\n    >\r\n\r\n    <!-- CLOSE SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n        class=\"sds-side-bar-button-container close-side-bar-button\"\r\n        [class.hidden]=\"!showSideBar\"\r\n        [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"closeButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"  \r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n        </button>\r\n    </div>\r\n\r\n    <!-- OPEN SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || !showSideBar)\"    \r\n        class=\"sds-side-bar-button-container open-side-bar-button\"\r\n        [class.hidden]=\"showSideBar\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"openButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"\r\n                [rotate]=\"180\"\r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n         </button>\r\n    </div>\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.shadow]=\"pullOutSideBar\"\r\n        [class.sds-side-bar-open]=\"showSideBar\"\r\n        [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n        \r\n        (mouseleave)=\"pullOutSideBar = false\"\r\n    >\r\n        <div \r\n            *ngIf=\"enablePullOutMode &&  !showSideBar && !pullOutSideBar\"\r\n            class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n            style=\"width: 0.75rem;\"\r\n            (mouseenter)=\"pullOutSideBar = true\"\r\n            >\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n            [style.width.rem]=\"widthRem\">\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-side-bar', template: "<aside\r\n    class=\"sds-side-bar \"\r\n    [class]=\"(product ? 'product-' + product : null)\"\r\n    [class.sds-main-side-bar] = \"isMainSideBar\"\r\n    [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n    <div class=\"d-flex flex-column h-100\">\r\n        <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n            <div\r\n                *ngIf=\"showSideBarToggleButton\"\r\n                class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n                [class.open]=\"showSideBar\"\r\n                [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n                (click)=\"toggleSideBar()\"\r\n            >\r\n                <div class=\"toggle-side-bar-icon\">\r\n                    <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n                </div>    \r\n            </div>\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </div>\r\n</aside>\r\n", styles: [".toggle-side-bar-button{transition:transform .2s linear}.toggle-side-bar-button.open .toggle-side-bar-icon{transform:rotate(-180deg)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { product: [{
+            args: [{ selector: 'sds-side-bar', template: "<div \r\n    class=\"vh-100 position-relative sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"showSideBar\"   \r\n    >\r\n\r\n    <!-- CLOSE SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n        class=\"sds-side-bar-button-container close-side-bar-button\"\r\n        [class.hidden]=\"!showSideBar\"\r\n        [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"closeButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"  \r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n        </button>\r\n    </div>\r\n\r\n    <!-- OPEN SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || !showSideBar)\"    \r\n        class=\"sds-side-bar-button-container open-side-bar-button\"\r\n        [class.hidden]=\"showSideBar\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"openButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"\r\n                [rotate]=\"180\"\r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n         </button>\r\n    </div>\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.shadow]=\"pullOutSideBar\"\r\n        [class.sds-side-bar-open]=\"showSideBar\"\r\n        [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n        \r\n        (mouseleave)=\"pullOutSideBar = false\"\r\n    >\r\n        <div \r\n            *ngIf=\"enablePullOutMode &&  !showSideBar && !pullOutSideBar\"\r\n            class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n            style=\"width: 0.75rem;\"\r\n            (mouseenter)=\"pullOutSideBar = true\"\r\n            >\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n            [style.width.rem]=\"widthRem\">\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showCloseButton: [{
+                type: Input
+            }], enablePullOutMode: [{
+                type: Input
+            }], widthRem: [{
                 type: Input
-            }], isMainSideBar: [{
+            }], product: [{
                 type: Input
-            }], showSideBarToggleButton: [{
+            }], autoHideScreenWidth: [{
                 type: Input
-            }], hideSideBarText: [{
+            }], closeButtonHint: [{
                 type: Input
-            }], showSideBarText: [{
+            }], openButtonHint: [{
                 type: Input
             }] } });

package/fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\r\nimport { IconDefinition, faChevronRight } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n selector: 'sds-side-bar',\r\n templateUrl: './side-bar.component.html',\r\n styleUrls: ['./side-bar.component.scss'],\r\n})\r\nexport class SdsSideBarComponent implements OnInit {\r\n\r\n public showSideBar = false;\r\n\r\n @Input() product:string = '';\r\n @Input() isMainSideBar: boolean = false;\r\n @Input() showSideBarToggleButton: boolean = false;\r\n\r\n @Input() public hideSideBarText?: string;\r\n @Input() public showSideBarText?: string;\r\n\r\n\r\n public caretIcon: IconDefinition = faChevronRight;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<aside\r\n class=\"sds-side-bar \"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.sds-main-side-bar] = \"isMainSideBar\"\r\n [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n <div class=\"d-flex flex-column h-100\">\r\n <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n <div\r\n ngIf=\"showSideBarToggleButton\"\r\n class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n [class.open]=\"showSideBar\"\r\n [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <div class=\"toggle-side-bar-icon\">\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </div> \r\n </div>\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</aside>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { IconDefinition, faAngleLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\r\nimport { Subject } from 'rxjs';\r\n// import { faSidebar } from '@fortawesome/pro-light-svg-icons';\r\n// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n selector: 'sds-side-bar',\r\n templateUrl: './side-bar.component.html',\r\n styleUrls: ['./side-bar.component.scss'],\r\n})\r\nexport class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {\r\n\r\n /*\r\n Define when the hide panel button is shown. \r\n * Default is 'auto' which will only show the button when the users hovers over the panel.\r\n * 'always' will always show the button.\r\n \r\n @type {('always' \| 'auto')}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public showCloseButton: 'always' \| 'auto' = 'auto';\r\n \r\n /\r\n Pull out mode will show the side bar as user hovers over the left side of the screen\r\n * When side bar is in pull out mode it will be rendered over the main contents.\r\n \r\n @type {boolean}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public enablePullOutMode: boolean = false;\r\n\r\n /\r\n Define the width of the side bar in rem.\r\n \r\n @type {number}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public widthRem: number = 14;\r\n\r\n /\r\n Product name defines the color scheme of the side bar.\r\n * Default is 'all-hours'.\r\n * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'\r\n \r\n @type {string}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() product: 'all-hours' \| 'door-cloud' \| 'my-hours' \| 'time-and-space' = 'all-hours';\r\n\r\n /\r\n Define the width of the screen that triggers hiding of the side bar.\r\n * Note that the width is checked at the component creation and not when the screen is resized.\r\n * If user resizes the screen he must manually hide the side bar.\r\n \r\n @type {(number \| undefined)}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public autoHideScreenWidth: number \| undefined = 992;\r\n\r\n /\r\n Define the hint of the hide button.\r\n \r\n @type {string}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public closeButtonHint?: string;\r\n\r\n /\r\n Define the hint of the show button.\r\n \r\n @type {string}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public openButtonHint?: string;\r\n\r\n\r\n public showSideBar = true;\r\n public pullOutSideBar = false; \r\n public caretIcon: IconDefinition = faAngleLeft;\r\n public autoHideActive: boolean = false;\r\n\r\n private screenWidth: number = 0;\r\n private componentInitialized: boolean = false;\r\n\r\n private _checkAutoHide$ = new Subject<void>();\r\n\r\n constructor() {\r\n\r\n this._checkAutoHide$.subscribe(() => {\r\n console.log('check autohide');\r\n if (this.componentInitialized && this.autoHideScreenWidth) {\r\n console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);\r\n\r\n this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;\r\n\r\n console.log('hideSideBar', this.autoHideActive);\r\n\r\n if (this.autoHideActive) {\r\n this.showSideBar = false;\r\n }\r\n }\r\n });\r\n }\r\n ngOnDestroy(): void {\r\n this._checkAutoHide$.unsubscribe();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['autoHideScreenWidthRem']) {\r\n this._checkAutoHide$.next();\r\n }\r\n }\r\n\r\n ngOnInit() { \r\n this.componentInitialized = true;\r\n this.screenWidth = window.innerWidth; \r\n console.log('screenWidth', this.screenWidth);\r\n this._checkAutoHide$.next();\r\n } \r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n ngIf=\"!pullOutSideBar && (true \|\| showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n ngIf=\"!pullOutSideBar && (true \|\| !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar \|\| pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs CHANGED Viewed

@@ -2,19 +2,90 @@ import * as i0 from '@angular/core';
 import { Component, Input, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
+import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons';
+import { Subject } from 'rxjs';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+// import { faSidebar } from '@fortawesome/pro-light-svg-icons';
+// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';
 class SdsSideBarComponent {
     constructor() {
-        this.showSideBar = false;
-        this.product = '';
-        this.isMainSideBar = false;
-        this.showSideBarToggleButton = false;
-        this.caretIcon = faChevronRight;
+        /**
+         * Define when the hide panel button is shown.
+         * Default is 'auto' which will only show the button when the users hovers over the panel.
+         * 'always' will always show the button.
+         *
+         * @type {('always' | 'auto')}
+         * @memberof SdsSideBarComponent
+         */
+        this.showCloseButton = 'auto';
+        /**
+         * Pull out mode will show the side bar as user hovers over the left side of the screen
+         * When side bar is in pull out mode it will be rendered over the main contents.
+         *
+         * @type {boolean}
+         * @memberof SdsSideBarComponent
+         */
+        this.enablePullOutMode = false;
+        /**
+         * Define the width of the side bar in rem.
+         *
+         * @type {number}
+         * @memberof SdsSideBarComponent
+         */
+        this.widthRem = 14;
+        /**
+         * Product name defines the color scheme of the side bar.
+         * Default is 'all-hours'.
+         * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'
+         *
+         * @type {string}
+         * @memberof SdsSideBarComponent
+         */
+        this.product = 'all-hours';
+        /**
+         * Define the width of the screen that triggers hiding of the side bar.
+         * Note that the width is checked at the component creation and not when the screen is resized.
+         * If user resizes the screen he must manually hide the side bar.
+         *
+         * @type {(number | undefined)}
+         * @memberof SdsSideBarComponent
+         */
+        this.autoHideScreenWidth = 992;
+        this.showSideBar = true;
+        this.pullOutSideBar = false;
+        this.caretIcon = faAngleLeft;
+        this.autoHideActive = false;
+        this.screenWidth = 0;
+        this.componentInitialized = false;
+        this._checkAutoHide$ = new Subject();
+        this._checkAutoHide$.subscribe(() => {
+            console.log('check autohide');
+            if (this.componentInitialized && this.autoHideScreenWidth) {
+                console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);
+                this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;
+                console.log('hideSideBar', this.autoHideActive);
+                if (this.autoHideActive) {
+                    this.showSideBar = false;
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._checkAutoHide$.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['autoHideScreenWidthRem']) {
+            this._checkAutoHide$.next();
+        }
+    }
+    ngOnInit() {
+        this.componentInitialized = true;
+        this.screenWidth = window.innerWidth;
+        console.log('screenWidth', this.screenWidth);
+        this._checkAutoHide$.next();
     }
-    ngOnInit() { }
     toggleSideBar(state) {
         if (state !== undefined) {
             this.showSideBar = state;
@@ -25,19 +96,23 @@ class SdsSideBarComponent {
     }
 }
 SdsSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { product: "product", isMainSideBar: "isMainSideBar", showSideBarToggleButton: "showSideBarToggleButton", hideSideBarText: "hideSideBarText", showSideBarText: "showSideBarText" }, ngImport: i0, template: "<aside\r\n    class=\"sds-side-bar \"\r\n    [class]=\"(product ? 'product-' + product : null)\"\r\n    [class.sds-main-side-bar] = \"isMainSideBar\"\r\n    [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n    <div class=\"d-flex flex-column h-100\">\r\n        <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n            <div\r\n                *ngIf=\"showSideBarToggleButton\"\r\n                class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n                [class.open]=\"showSideBar\"\r\n                [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n                (click)=\"toggleSideBar()\"\r\n            >\r\n                <div class=\"toggle-side-bar-icon\">\r\n                    <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n                </div>    \r\n            </div>\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </div>\r\n</aside>\r\n", styles: [".toggle-side-bar-button{transition:transform .2s linear}.toggle-side-bar-button.open .toggle-side-bar-icon{transform:rotate(-180deg)}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n    class=\"vh-100 position-relative sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"showSideBar\"   \r\n    >\r\n\r\n    <!-- CLOSE SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n        class=\"sds-side-bar-button-container close-side-bar-button\"\r\n        [class.hidden]=\"!showSideBar\"\r\n        [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"closeButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"  \r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n        </button>\r\n    </div>\r\n\r\n    <!-- OPEN SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || !showSideBar)\"    \r\n        class=\"sds-side-bar-button-container open-side-bar-button\"\r\n        [class.hidden]=\"showSideBar\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"openButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"\r\n                [rotate]=\"180\"\r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n         </button>\r\n    </div>\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.shadow]=\"pullOutSideBar\"\r\n        [class.sds-side-bar-open]=\"showSideBar\"\r\n        [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n        \r\n        (mouseleave)=\"pullOutSideBar = false\"\r\n    >\r\n        <div \r\n            *ngIf=\"enablePullOutMode &&  !showSideBar && !pullOutSideBar\"\r\n            class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n            style=\"width: 0.75rem;\"\r\n            (mouseenter)=\"pullOutSideBar = true\"\r\n            >\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n            [style.width.rem]=\"widthRem\">\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-side-bar', template: "<aside\r\n    class=\"sds-side-bar \"\r\n    [class]=\"(product ? 'product-' + product : null)\"\r\n    [class.sds-main-side-bar] = \"isMainSideBar\"\r\n    [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n    <div class=\"d-flex flex-column h-100\">\r\n        <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n            <div\r\n                *ngIf=\"showSideBarToggleButton\"\r\n                class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n                [class.open]=\"showSideBar\"\r\n                [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n                (click)=\"toggleSideBar()\"\r\n            >\r\n                <div class=\"toggle-side-bar-icon\">\r\n                    <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n                </div>    \r\n            </div>\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </div>\r\n</aside>\r\n", styles: [".toggle-side-bar-button{transition:transform .2s linear}.toggle-side-bar-button.open .toggle-side-bar-icon{transform:rotate(-180deg)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { product: [{
+            args: [{ selector: 'sds-side-bar', template: "<div \r\n    class=\"vh-100 position-relative sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"showSideBar\"   \r\n    >\r\n\r\n    <!-- CLOSE SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n        class=\"sds-side-bar-button-container close-side-bar-button\"\r\n        [class.hidden]=\"!showSideBar\"\r\n        [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"closeButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"  \r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n        </button>\r\n    </div>\r\n\r\n    <!-- OPEN SIDEBAR -->\r\n    <div \r\n        *ngIf=\"!pullOutSideBar && (true || !showSideBar)\"    \r\n        class=\"sds-side-bar-button-container open-side-bar-button\"\r\n        [class.hidden]=\"showSideBar\"\r\n        >\r\n        \r\n        <button\r\n            class=\"btn btn-outline-primary shadow-sm\"\r\n            [title]=\"openButtonHint\"\r\n            (click)=\"toggleSideBar()\"\r\n        >\r\n            <fa-icon \r\n                [icon]=\"caretIcon\"\r\n                [rotate]=\"180\"\r\n                size=\"xs\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <div class=\"hot-spot\"></div>\r\n\r\n         </button>\r\n    </div>\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.shadow]=\"pullOutSideBar\"\r\n        [class.sds-side-bar-open]=\"showSideBar\"\r\n        [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n        \r\n        (mouseleave)=\"pullOutSideBar = false\"\r\n    >\r\n        <div \r\n            *ngIf=\"enablePullOutMode &&  !showSideBar && !pullOutSideBar\"\r\n            class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n            style=\"width: 0.75rem;\"\r\n            (mouseenter)=\"pullOutSideBar = true\"\r\n            >\r\n        </div>\r\n\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n            [style.width.rem]=\"widthRem\">\r\n\r\n            <ng-content></ng-content>                \r\n        </div>\r\n\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showCloseButton: [{
+                type: Input
+            }], enablePullOutMode: [{
+                type: Input
+            }], widthRem: [{
                 type: Input
-            }], isMainSideBar: [{
+            }], product: [{
                 type: Input
-            }], showSideBarToggleButton: [{
+            }], autoHideScreenWidth: [{
                 type: Input
-            }], hideSideBarText: [{
+            }], closeButtonHint: [{
                 type: Input
-            }], showSideBarText: [{
+            }], openButtonHint: [{
                 type: Input
             }] } });

package/fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\r\nimport { IconDefinition, faChevronRight } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n selector: 'sds-side-bar',\r\n templateUrl: './side-bar.component.html',\r\n styleUrls: ['./side-bar.component.scss'],\r\n})\r\nexport class SdsSideBarComponent implements OnInit {\r\n\r\n public showSideBar = false;\r\n\r\n @Input() product:string = '';\r\n @Input() isMainSideBar: boolean = false;\r\n @Input() showSideBarToggleButton: boolean = false;\r\n\r\n @Input() public hideSideBarText?: string;\r\n @Input() public showSideBarText?: string;\r\n\r\n\r\n public caretIcon: IconDefinition = faChevronRight;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<aside\r\n class=\"sds-side-bar \"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.sds-main-side-bar] = \"isMainSideBar\"\r\n [class.hide-sidebar]=\"!showSideBar\"\r\n>\r\n <div class=\"d-flex flex-column h-100\">\r\n <div class=\"d-flex flex-column flex-grow-0 w-100 h-100\">\r\n <div\r\n ngIf=\"showSideBarToggleButton\"\r\n class=\"toggle-side-bar-button position-absolute d-md-none rounded-circle toggleSideBar d-flex justify-content-center justify-content-center align-items-center\"\r\n [class.open]=\"showSideBar\"\r\n [title]=\"showSideBar ? hideSideBarText : showSideBarText\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <div class=\"toggle-side-bar-icon\">\r\n <fa-icon [icon]=\"caretIcon\"></fa-icon>\r\n </div> \r\n </div>\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n </div>\r\n</aside>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { IconDefinition, faAngleLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\r\nimport { Subject } from 'rxjs';\r\n// import { faSidebar } from '@fortawesome/pro-light-svg-icons';\r\n// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n selector: 'sds-side-bar',\r\n templateUrl: './side-bar.component.html',\r\n styleUrls: ['./side-bar.component.scss'],\r\n})\r\nexport class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {\r\n\r\n /*\r\n Define when the hide panel button is shown. \r\n * Default is 'auto' which will only show the button when the users hovers over the panel.\r\n * 'always' will always show the button.\r\n \r\n @type {('always' \| 'auto')}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public showCloseButton: 'always' \| 'auto' = 'auto';\r\n \r\n /\r\n Pull out mode will show the side bar as user hovers over the left side of the screen\r\n * When side bar is in pull out mode it will be rendered over the main contents.\r\n \r\n @type {boolean}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public enablePullOutMode: boolean = false;\r\n\r\n /\r\n Define the width of the side bar in rem.\r\n \r\n @type {number}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public widthRem: number = 14;\r\n\r\n /\r\n Product name defines the color scheme of the side bar.\r\n * Default is 'all-hours'.\r\n * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'\r\n \r\n @type {string}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() product: 'all-hours' \| 'door-cloud' \| 'my-hours' \| 'time-and-space' = 'all-hours';\r\n\r\n /\r\n Define the width of the screen that triggers hiding of the side bar.\r\n * Note that the width is checked at the component creation and not when the screen is resized.\r\n * If user resizes the screen he must manually hide the side bar.\r\n \r\n @type {(number \| undefined)}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public autoHideScreenWidth: number \| undefined = 992;\r\n\r\n /\r\n Define the hint of the hide button.\r\n \r\n @type {string}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public closeButtonHint?: string;\r\n\r\n /\r\n Define the hint of the show button.\r\n \r\n @type {string}\r\n * @memberof SdsSideBarComponent\r\n /\r\n @Input() public openButtonHint?: string;\r\n\r\n\r\n public showSideBar = true;\r\n public pullOutSideBar = false; \r\n public caretIcon: IconDefinition = faAngleLeft;\r\n public autoHideActive: boolean = false;\r\n\r\n private screenWidth: number = 0;\r\n private componentInitialized: boolean = false;\r\n\r\n private _checkAutoHide$ = new Subject<void>();\r\n\r\n constructor() {\r\n\r\n this._checkAutoHide$.subscribe(() => {\r\n console.log('check autohide');\r\n if (this.componentInitialized && this.autoHideScreenWidth) {\r\n console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);\r\n\r\n this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;\r\n\r\n console.log('hideSideBar', this.autoHideActive);\r\n\r\n if (this.autoHideActive) {\r\n this.showSideBar = false;\r\n }\r\n }\r\n });\r\n }\r\n ngOnDestroy(): void {\r\n this._checkAutoHide$.unsubscribe();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['autoHideScreenWidthRem']) {\r\n this._checkAutoHide$.next();\r\n }\r\n }\r\n\r\n ngOnInit() { \r\n this.componentInitialized = true;\r\n this.screenWidth = window.innerWidth; \r\n console.log('screenWidth', this.screenWidth);\r\n this._checkAutoHide$.next();\r\n } \r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n ngIf=\"!pullOutSideBar && (true \|\| showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n ngIf=\"!pullOutSideBar && (true \|\| !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar \|\| pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@spicainternational/ngx-sds-components",
-  "version": "5.12.3",
+  "version": "5.13.0-beta.0",
   "description": "Spica design system angular components.",
   "peerDependencies": {
     "@angular/common": ">=13.3.0",

package/src/lib/side-bar/side-bar.component.d.ts CHANGED Viewed

@@ -1,17 +1,75 @@
-import { OnInit } from '@angular/core';
-import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { IconDefinition } from '@fortawesome/pro-solid-svg-icons';
 import * as i0 from "@angular/core";
-export declare class SdsSideBarComponent implements OnInit {
+export declare class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {
+    /**
+     * Define when the hide panel button is shown.
+     * Default is 'auto' which will only show the button when the users hovers over the panel.
+     * 'always' will always show the button.
+     *
+     * @type {('always' | 'auto')}
+     * @memberof SdsSideBarComponent
+     */
+    showCloseButton: 'always' | 'auto';
+    /**
+     * Pull out mode will show the side bar as user hovers over the left side of the screen
+     * When side bar is in pull out mode it will be rendered over the main contents.
+     *
+     * @type {boolean}
+     * @memberof SdsSideBarComponent
+     */
+    enablePullOutMode: boolean;
+    /**
+     * Define the width of the side bar in rem.
+     *
+     * @type {number}
+     * @memberof SdsSideBarComponent
+     */
+    widthRem: number;
+    /**
+     * Product name defines the color scheme of the side bar.
+     * Default is 'all-hours'.
+     * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'
+     *
+     * @type {string}
+     * @memberof SdsSideBarComponent
+     */
+    product: 'all-hours' | 'door-cloud' | 'my-hours' | 'time-and-space';
+    /**
+     * Define the width of the screen that triggers hiding of the side bar.
+     * Note that the width is checked at the component creation and not when the screen is resized.
+     * If user resizes the screen he must manually hide the side bar.
+     *
+     * @type {(number | undefined)}
+     * @memberof SdsSideBarComponent
+     */
+    autoHideScreenWidth: number | undefined;
+    /**
+     * Define the hint of the hide button.
+     *
+     * @type {string}
+     * @memberof SdsSideBarComponent
+     */
+    closeButtonHint?: string;
+    /**
+     * Define the hint of the show button.
+     *
+     * @type {string}
+     * @memberof SdsSideBarComponent
+     */
+    openButtonHint?: string;
     showSideBar: boolean;
-    product: string;
-    isMainSideBar: boolean;
-    showSideBarToggleButton: boolean;
-    hideSideBarText?: string;
-    showSideBarText?: string;
+    pullOutSideBar: boolean;
     caretIcon: IconDefinition;
+    autoHideActive: boolean;
+    private screenWidth;
+    private componentInitialized;
+    private _checkAutoHide$;
     constructor();
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     toggleSideBar(state?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsSideBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdsSideBarComponent, "sds-side-bar", never, { "product": "product"; "isMainSideBar": "isMainSideBar"; "showSideBarToggleButton": "showSideBarToggleButton"; "hideSideBarText": "hideSideBarText"; "showSideBarText": "showSideBarText"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsSideBarComponent, "sds-side-bar", never, { "showCloseButton": "showCloseButton"; "enablePullOutMode": "enablePullOutMode"; "widthRem": "widthRem"; "product": "product"; "autoHideScreenWidth": "autoHideScreenWidth"; "closeButtonHint": "closeButtonHint"; "openButtonHint": "openButtonHint"; }, {}, never, ["*"]>;
 }