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

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

@@ -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, 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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"}
+{"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/fesm2015/spicainternational-ngx-sds-components-src-lib-static-value.mjs

@@ -0,0 +1,59 @@
+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 * as i1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+class SdsStaticValueComponent {
+    constructor() {
+        this.label = '';
+        this.showColon = true;
+    }
+    ngOnInit() {
+    }
+}
+SdsStaticValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsStaticValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsStaticValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsStaticValueComponent, selector: "sds-static-value", inputs: { icon: "icon", label: "label", showColon: "showColon" }, ngImport: i0, template: "<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], 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: SdsStaticValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-static-value', template: "<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], showColon: [{
+                type: Input
+            }] } });
+
+class SdsStaticValueModule {
+}
+SdsStaticValueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsStaticValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsStaticValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsStaticValueModule, declarations: [SdsStaticValueComponent], imports: [CommonModule,
+        FontAwesomeModule], exports: [SdsStaticValueComponent] });
+SdsStaticValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsStaticValueModule, imports: [[
+            CommonModule,
+            FontAwesomeModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsStaticValueModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SdsStaticValueComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule
+                    ],
+                    exports: [
+                        SdsStaticValueComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsStaticValueComponent, SdsStaticValueModule };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-static-value.mjs.map

package/fesm2015/spicainternational-ngx-sds-components-src-lib-static-value.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-static-value.mjs","sources":["../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.ts","../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.html","../../../projects/ngx-sds-components/src/lib/static-value/static-value.module.ts","../../../projects/ngx-sds-components/src/lib/static-value/spicainternational-ngx-sds-components-src-lib-static-value.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n  selector: 'sds-static-value',\r\n  templateUrl: './static-value.component.html',\r\n  styleUrls: ['./static-value.component.scss']\r\n})\r\nexport class SdsStaticValueComponent implements OnInit {\r\n\r\n    @Input() public icon: IconProp | undefined;\r\n    @Input() public label: string = '';\r\n    @Input() public showColon: boolean = true;\r\n\r\n\r\n\r\n    constructor() { }\r\n\r\n    ngOnInit(): void {\r\n    }\r\n\r\n}\r\n","<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsStaticValueComponent } from './static-value.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n@NgModule({\r\n    declarations: [\r\n        SdsStaticValueComponent\r\n    ],\r\n    imports: [\r\n        CommonModule, \r\n        FontAwesomeModule\r\n    ],\r\n    exports: [\r\n        SdsStaticValueComponent\r\n    ]\r\n})\r\nexport class SdsStaticValueModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAQa,uBAAuB,CAAA;AAQhC,IAAA,WAAA,GAAA;AALgB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE,CAAC;AACnB,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI,CAAC;KAIzB;IAEjB,QAAQ,GAAA;KACP;;oHAXQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,0HCRpC,oTAOM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDCO,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBALnC,SAAS;+BACE,kBAAkB,EAAA,QAAA,EAAA,oTAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAMV,IAAI,EAAA,CAAA;sBAAnB,KAAK;gBACU,KAAK,EAAA,CAAA;sBAApB,KAAK;gBACU,SAAS,EAAA,CAAA;sBAAxB,KAAK;;;MEKG,oBAAoB,CAAA;;iHAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kHAApB,oBAAoB,EAAA,YAAA,EAAA,CAVzB,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAGvB,YAAY;QACZ,iBAAiB,aAGjB,uBAAuB,CAAA,EAAA,CAAA,CAAA;AAGlB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,EARpB,OAAA,EAAA,CAAA;YACL,YAAY;YACZ,iBAAiB;SACpB,CAAA,EAAA,CAAA,CAAA;2FAKQ,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAZhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE;wBACV,uBAAuB;AAC1B,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,iBAAiB;AACpB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,uBAAuB;AAC1B,qBAAA;iBACJ,CAAA;;;AChBD;;AAEG;;;;"}

package/fesm2015/spicainternational-ngx-sds-components.mjs

@@ -18,6 +18,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/pane';
 export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';
+export * from '@spicainternational/ngx-sds-components/src/lib/static-value';
 export * from '@spicainternational/ngx-sds-components/src/lib/tooltip';
 
 /*

package/fesm2015/spicainternational-ngx-sds-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/badge';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/message';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/badge';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/message';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/static-value';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { faGrid } from '@fortawesome/pro-solid-svg-icons';
-import * as i1 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i2 from 'devextreme-angular/ui/popover';
+import * as i1 from 'devextreme-angular/ui/popover';
 import { DxPopoverModule } from 'devextreme-angular/ui/popover';
-import * as i3 from 'devextreme-angular/ui/scroll-view';
+import * as i2 from 'devextreme-angular/ui/scroll-view';
 import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 class SdsAppSwitcherComponent {
     constructor() {
@@ -51,14 +50,14 @@ class SdsAppSwitcherComponent {
         this.productClick.emit(product);
     }
     onDropdownClicked() {
-        this.showDropdown = true;
+        this.showDropdown = !this.showDropdown;
     }
 }
 SdsAppSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAppSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsAppSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: { productCode: "productCode", userProductCodes: "userProductCodes", tenantProducts: "tenantProducts", switchText: "switchText", discoverText: "discoverText" }, outputs: { productClick: "productClick" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div \r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group app-switcher\">\r\n    <button \r\n        type=\"button\" \r\n        class=\"btn btn-link rounded p-0 text-dark switcher-button\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"onDropdownClicked()\">\r\n        <fa-icon \r\n            [icon]=\"selectorIcon\" \r\n            [fixedWidth]=\"true\">\r\n        </fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    >\r\n    <dx-scroll-view \r\n        showScrollbar=\"always\">\r\n    \r\n        <div class=\"app-switcher-menu\">\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n  ", styles: [""], 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"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SdsAppSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: { productCode: "productCode", userProductCodes: "userProductCodes", tenantProducts: "tenantProducts", switchText: "switchText", discoverText: "discoverText" }, outputs: { productClick: "productClick" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div \r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group app-switcher\">\r\n    <button \r\n        type=\"button\" \r\n        class=\"btn btn-link rounded p-0 text-dark switcher-button d-flex align-items-center justify-content-center\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"onDropdownClicked()\">\r\n        \r\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <!-- Row 1 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\r\n            \r\n            <!-- Row 2 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\r\n            \r\n            <!-- Row 3 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\r\n          </svg>\r\n        \r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover' }\"\r\n    >\r\n    <dx-scroll-view \r\n        showScrollbar=\"always\">\r\n    \r\n        <div class=\"app-switcher-menu\">\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n  ", styles: [".switcher-button{width:1.5rem!important;height:1.5rem!important;border:none!important;border-radius:0!important}.switcher-button rect{fill:#375d75}::ng-deep .sds-app-switcher-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], components: [{ type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsAppSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-app-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div \r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group app-switcher\">\r\n    <button \r\n        type=\"button\" \r\n        class=\"btn btn-link rounded p-0 text-dark switcher-button\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"onDropdownClicked()\">\r\n        <fa-icon \r\n            [icon]=\"selectorIcon\" \r\n            [fixedWidth]=\"true\">\r\n        </fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    >\r\n    <dx-scroll-view \r\n        showScrollbar=\"always\">\r\n    \r\n        <div class=\"app-switcher-menu\">\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n  ", styles: [""] }]
+            args: [{ selector: 'sds-app-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div \r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group app-switcher\">\r\n    <button \r\n        type=\"button\" \r\n        class=\"btn btn-link rounded p-0 text-dark switcher-button d-flex align-items-center justify-content-center\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"onDropdownClicked()\">\r\n        \r\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <!-- Row 1 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\r\n            \r\n            <!-- Row 2 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\r\n            \r\n            <!-- Row 3 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\r\n          </svg>\r\n        \r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover' }\"\r\n    >\r\n    <dx-scroll-view \r\n        showScrollbar=\"always\">\r\n    \r\n        <div class=\"app-switcher-menu\">\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n  ", styles: [".switcher-button{width:1.5rem!important;height:1.5rem!important;border:none!important;border-radius:0!important}.switcher-button rect{fill:#375d75}::ng-deep .sds-app-switcher-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: ['popover', { static: false }]

package/fesm2020/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-app-switcher.mjs","sources":["../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.ts","../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.html","../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.module.ts","../../../projects/ngx-sds-components/src/lib/app-switcher/spicainternational-ngx-sds-components-src-lib-app-switcher.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { faGrid } from '@fortawesome/pro-solid-svg-icons';\r\nimport { DxPopoverComponent } from 'devextreme-angular';\r\n\r\nimport { ProductModel } from './app-switcher.model';\r\n\r\n@Component({\r\n    selector: 'sds-app-switcher',\r\n    templateUrl: './app-switcher.component.html',\r\n    styleUrls: ['./app-switcher.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdsAppSwitcherComponent implements OnInit, OnChanges {\r\n    @ViewChild('popover', {static: false}) private popover?: DxPopoverComponent;\r\n    \r\n    @Input() public productCode: Number | undefined;\r\n    @Input() public userProductCodes: Number[] | undefined;\r\n    @Input() public tenantProducts: ProductModel[] | undefined;\r\n\r\n    @Input() public switchText: string = '';\r\n    @Input() public discoverText: string = '';\r\n\r\n    @Output() public productClick: EventEmitter<ProductModel> = new EventEmitter();\r\n\r\n\r\n    public activatedProducts: ProductModel[];\r\n    public discoverProducts: ProductModel[];\r\n    \r\n    public showSkeleton: boolean;\r\n    public selectorIcon = faGrid;\r\n\r\n    public elementUUID = 'sds-as-' + crypto.randomUUID();\r\n    public showDropdown = false;\r\n   \r\n    constructor() {\r\n        this.showSkeleton = true;\r\n        this.activatedProducts = new Array<ProductModel>();\r\n        this.discoverProducts = new Array<ProductModel>();        \r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (changes['userProductCodes'] || changes['tenantProducts'] || changes['productCode']) {\r\n            if (this.userProductCodes !== undefined && this.tenantProducts !== undefined && this.productCode !== undefined) {\r\n                this.activatedProducts = [];\r\n                this.discoverProducts = [];\r\n\r\n                this.tenantProducts.forEach(product => {\r\n                    if ((this.userProductCodes as Number[]).includes(product.code)) {\r\n                        // exclude current product from the list\r\n                        if (product.code != this.productCode) {\r\n                            this.activatedProducts.push(product);\r\n                        }\r\n                    } else {\r\n                        this.discoverProducts.push(product);\r\n                    }\r\n                });\r\n                this.showSkeleton = false;\r\n            } else {\r\n                this.showSkeleton = true;\r\n            }\r\n            this.popover?.instance.repaint();\r\n        }\r\n    }\r\n\r\n    public emitProductClick(product: ProductModel): void {\r\n        this.productClick.emit(product);\r\n    }\r\n\r\n    public onDropdownClicked(){\r\n        this.showDropdown = true;\r\n    }\r\n\r\n}\r\n","<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div \r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group app-switcher\">\r\n    <button \r\n        type=\"button\" \r\n        class=\"btn btn-link rounded p-0 text-dark switcher-button\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"onDropdownClicked()\">\r\n        <fa-icon \r\n            [icon]=\"selectorIcon\" \r\n            [fixedWidth]=\"true\">\r\n        </fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    >\r\n    <dx-scroll-view \r\n        showScrollbar=\"always\">\r\n    \r\n        <div class=\"app-switcher-menu\">\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n  ","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsAppSwitcherComponent } from './app-switcher.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SdsAppSwitcherComponent\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule\r\n  ],\r\n  exports: [\r\n      SdsAppSwitcherComponent\r\n  ]\r\n})\r\nexport class SdsAppSwitcherModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-app-switcher.mjs","sources":["../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.ts","../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.component.html","../../../projects/ngx-sds-components/src/lib/app-switcher/app-switcher.module.ts","../../../projects/ngx-sds-components/src/lib/app-switcher/spicainternational-ngx-sds-components-src-lib-app-switcher.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { faGrid } from '@fortawesome/pro-solid-svg-icons';\r\nimport { DxPopoverComponent } from 'devextreme-angular';\r\n\r\nimport { ProductModel } from './app-switcher.model';\r\n\r\n@Component({\r\n    selector: 'sds-app-switcher',\r\n    templateUrl: './app-switcher.component.html',\r\n    styleUrls: ['./app-switcher.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdsAppSwitcherComponent implements OnInit, OnChanges {\r\n    @ViewChild('popover', {static: false}) private popover?: DxPopoverComponent;\r\n    \r\n    @Input() public productCode: Number | undefined;\r\n    @Input() public userProductCodes: Number[] | undefined;\r\n    @Input() public tenantProducts: ProductModel[] | undefined;\r\n\r\n    @Input() public switchText: string = '';\r\n    @Input() public discoverText: string = '';\r\n\r\n    @Output() public productClick: EventEmitter<ProductModel> = new EventEmitter();\r\n\r\n\r\n    public activatedProducts: ProductModel[];\r\n    public discoverProducts: ProductModel[];\r\n    \r\n    public showSkeleton: boolean;\r\n    public selectorIcon = faGrid;\r\n\r\n    public elementUUID = 'sds-as-' + crypto.randomUUID();\r\n    public showDropdown = false;\r\n   \r\n    constructor() {\r\n        this.showSkeleton = true;\r\n        this.activatedProducts = new Array<ProductModel>();\r\n        this.discoverProducts = new Array<ProductModel>();        \r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        if (changes['userProductCodes'] || changes['tenantProducts'] || changes['productCode']) {\r\n            if (this.userProductCodes !== undefined && this.tenantProducts !== undefined && this.productCode !== undefined) {\r\n                this.activatedProducts = [];\r\n                this.discoverProducts = [];\r\n\r\n                this.tenantProducts.forEach(product => {\r\n                    if ((this.userProductCodes as Number[]).includes(product.code)) {\r\n                        // exclude current product from the list\r\n                        if (product.code != this.productCode) {\r\n                            this.activatedProducts.push(product);\r\n                        }\r\n                    } else {\r\n                        this.discoverProducts.push(product);\r\n                    }\r\n                });\r\n                this.showSkeleton = false;\r\n            } else {\r\n                this.showSkeleton = true;\r\n            }\r\n            this.popover?.instance.repaint();\r\n        }\r\n    }\r\n\r\n    public emitProductClick(product: ProductModel): void {\r\n        this.productClick.emit(product);\r\n    }\r\n\r\n    public onDropdownClicked(){\r\n        this.showDropdown = !this.showDropdown;\r\n    }\r\n\r\n}\r\n","<ng-template #productTemplate let-product=\"product\">\r\n    <div class=\"product-logo\">\r\n        <img [src]=\"product.logoUri\" alt=\"{{ product.Name }}\">\r\n    </div>\r\n    <div class=\"product-title d-flex align-items-center\">\r\n        {{product.name}}\r\n    </div>\r\n    <div class=\"product-description\">\r\n        {{product.description}}\r\n    </div>\r\n</ng-template>\r\n\r\n<div \r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group app-switcher\">\r\n    <button \r\n        type=\"button\" \r\n        class=\"btn btn-link rounded p-0 text-dark switcher-button d-flex align-items-center justify-content-center\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"onDropdownClicked()\">\r\n        \r\n        <svg width=\"0.86rem\" height=\"0.86rem\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <!-- Row 1 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0\" fill=\"black\" />\r\n            \r\n            <!-- Row 2 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.33rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.33rem\" fill=\"black\" />\r\n            \r\n            <!-- Row 3 -->\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.33rem\" y=\"0.66rem\" fill=\"black\" />\r\n            <rect width=\"0.2rem\" height=\"0.2rem\" x=\"0.66rem\" y=\"0.66rem\" fill=\"black\" />\r\n          </svg>\r\n        \r\n    </button>\r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showDropdown\"\r\n    [wrapperAttr]=\"{ class: 'sds-app-switcher-popover' }\"\r\n    >\r\n    <dx-scroll-view \r\n        showScrollbar=\"always\">\r\n    \r\n        <div class=\"app-switcher-menu\">\r\n            <ng-container *ngIf=\"showSkeleton\">\r\n                <div class=\"header skeleton skeleton-height-1 w-50 \"></div>\r\n                <div class=\"product mt-2 skeleton skeleton-height-2\"></div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && activatedProducts.length > 0\">\r\n                <h6 class=\"header\">{{ switchText }}</h6>\r\n                <div *ngFor=\"let activatedProduct of activatedProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(activatedProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: activatedProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!showSkeleton && discoverProducts.length > 0\">\r\n                <h6 class=\"header\">{{ discoverText }}</h6>\r\n\r\n                <div *ngFor=\"let discoverProduct of discoverProducts\" \r\n                    class=\"product\"\r\n                    (click)=\"emitProductClick(discoverProduct)\">\r\n                    <ng-container \r\n                        [ngTemplateOutlet]=\"productTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ product: discoverProduct }\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </dx-scroll-view>\r\n</dx-popover>\r\n\r\n  ","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsAppSwitcherComponent } from './app-switcher.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SdsAppSwitcherComponent\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule,\r\n    DxPopoverModule,\r\n    DxScrollViewModule\r\n  ],\r\n  exports: [\r\n      SdsAppSwitcherComponent\r\n  ]\r\n})\r\nexport class SdsAppSwitcherModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAYa,uBAAuB,CAAA;AAsBhC,IAAA,WAAA,GAAA;QAfgB,IAAU,CAAA,UAAA,GAAW,EAAE,CAAC;QACxB,IAAY,CAAA,YAAA,GAAW,EAAE,CAAC;AAEzB,QAAA,IAAA,CAAA,YAAY,GAA+B,IAAI,YAAY,EAAE,CAAC;QAOxE,IAAY,CAAA,YAAA,GAAG,MAAM,CAAC;AAEtB,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;QAC9C,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;AAGxB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,KAAK,EAAgB,CAAC;AACnD,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,KAAK,EAAgB,CAAC;KACrD;AAED,IAAA,QAAQ,MAAW;AAEnB,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,gBAAgB,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,EAAE;AACpF,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;AAC5G,gBAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;AAC5B,gBAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;AAE3B,gBAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,IAAG;oBAClC,IAAK,IAAI,CAAC,gBAA6B,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;;AAE5D,wBAAA,IAAI,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE;AAClC,4BAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACxC,yBAAA;AACJ,qBAAA;AAAM,yBAAA;AACH,wBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACvC,qBAAA;AACL,iBAAC,CAAC,CAAC;AACH,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;AAC7B,aAAA;AAAM,iBAAA;AACH,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;AAC5B,aAAA;AACD,YAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC;AACpC,SAAA;KACJ;AAEM,IAAA,gBAAgB,CAAC,OAAqB,EAAA;AACzC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;IAEM,iBAAiB,GAAA;AACpB,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KAC1C;;oHA5DQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,oYCZpC,irHAoFE,EAAA,MAAA,EAAA,CAAA,0OAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,cAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,gCAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,WAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,UAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDxEW,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBANnC,SAAS;+BACI,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,irHAAA,EAAA,MAAA,EAAA,CAAA,0OAAA,CAAA,EAAA,CAAA;0EAGA,OAAO,EAAA,CAAA;sBAArD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,SAAS,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,CAAA;gBAErB,WAAW,EAAA,CAAA;sBAA1B,KAAK;gBACU,gBAAgB,EAAA,CAAA;sBAA/B,KAAK;gBACU,cAAc,EAAA,CAAA;sBAA7B,KAAK;gBAEU,UAAU,EAAA,CAAA;sBAAzB,KAAK;gBACU,YAAY,EAAA,CAAA;sBAA3B,KAAK;gBAEW,YAAY,EAAA,CAAA;sBAA5B,MAAM;;;MEAE,oBAAoB,CAAA;;iHAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kHAApB,oBAAoB,EAAA,YAAA,EAAA,CAZ7B,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAGvB,YAAY;QACZ,iBAAiB;QACjB,eAAe;AACf,QAAA,kBAAkB,aAGhB,uBAAuB,CAAA,EAAA,CAAA,CAAA;AAGhB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,EAVtB,OAAA,EAAA,CAAA;YACP,YAAY;YACZ,iBAAiB;YACjB,eAAe;YACf,kBAAkB;AACnB,SAAA,CAAA,EAAA,CAAA,CAAA;2FAKU,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAdhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,uBAAuB;AACxB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,iBAAiB;wBACjB,eAAe;wBACf,kBAAkB;AACnB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,uBAAuB;AAC1B,qBAAA;AACF,iBAAA,CAAA;;;ACrBD;;AAEG;;;;"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs

@@ -12,6 +12,8 @@ import * as i1$1 from '@spicainternational/ngx-sds-components/src/lib/avatar';
 import { SdsAvatarModule } from '@spicainternational/ngx-sds-components/src/lib/avatar';
 import * as i2$2 from 'devextreme-angular/ui/popover';
 import { DxPopoverModule } from 'devextreme-angular/ui/popover';
+import * as i1$2 from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
+import { SdsAppSwitcherModule } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
 
 class SdsNavigationSeparatorComponent {
     constructor() { }
@@ -209,6 +211,7 @@ class SdsNavigationUserProfileComponent {
     constructor() {
         this.name = 'name';
         this.id = 'id';
+        this.email = '';
         this.showSignOut = true;
         this.showProfile = true;
         this.signOutText = 'Sign out';
@@ -228,14 +231,16 @@ class SdsNavigationUserProfileComponent {
     }
 }
 SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <sds-avatar\r\n        [text]=\"name\"\r\n        [colorKey]=\"id\">    \r\n    </sds-avatar>\r\n    \r\n    \r\n    <span class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    target=\".sds-navigation-user-profile-container\"\r\n    width=\"12.5rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"d-flex flex-row gap-2 align-items-center p-2 mb-1\">\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [size]=\"2\">    \r\n        </sds-avatar>\r\n        \r\n        <span class=\"truncate-two-lines font-weight-500\">\r\n            {{name}}\r\n        </span>\r\n    </div>\r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:#e9ecef;cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.25rem;font-size:1rem}\n"], components: [{ type: i1$1.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { type: i2$2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <sds-avatar\r\n        [text]=\"name\"\r\n        [colorKey]=\"id\">    \r\n    </sds-avatar>\r\n    \r\n    <span class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    target=\".sds-navigation-user-profile-container\"\r\n    minWidth=\"12.5rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1\">\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [size]=\"3\">    \r\n            </sds-avatar>\r\n            \r\n            <div class=\"me-2\">\r\n                <h5 class=\"m-0\">\r\n                    {{name}}\r\n                </h5>\r\n                <span class=\"font-size-3\">{{email}}</span>\r\n            </div>\r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:#e9ecef;cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], components: [{ type: i1$1.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { type: i2$2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-user-profile', template: "\r\n\r\n\r\n<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <sds-avatar\r\n        [text]=\"name\"\r\n        [colorKey]=\"id\">    \r\n    </sds-avatar>\r\n    \r\n    \r\n    <span class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    target=\".sds-navigation-user-profile-container\"\r\n    width=\"12.5rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"d-flex flex-row gap-2 align-items-center p-2 mb-1\">\r\n        <sds-avatar\r\n            [text]=\"name\"\r\n            [colorKey]=\"id\"\r\n            [size]=\"2\">    \r\n        </sds-avatar>\r\n        \r\n        <span class=\"truncate-two-lines font-weight-500\">\r\n            {{name}}\r\n        </span>\r\n    </div>\r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:#e9ecef;cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.25rem;font-size:1rem}\n"] }]
+            args: [{ selector: 'sds-navigation-user-profile', template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <sds-avatar\r\n        [text]=\"name\"\r\n        [colorKey]=\"id\">    \r\n    </sds-avatar>\r\n    \r\n    <span class=\"truncate-two-lines\">\r\n        {{name}}\r\n    </span>    \r\n\r\n</div> \r\n\r\n<dx-popover\r\n    target=\".sds-navigation-user-profile-container\"\r\n    minWidth=\"12.5rem\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n    [(visible)]=\"showOptions\"\r\n    >\r\n\r\n    <div class=\"border-bottom\">\r\n        <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1\">\r\n            <sds-avatar\r\n                [text]=\"name\"\r\n                [colorKey]=\"id\"\r\n                [size]=\"3\">    \r\n            </sds-avatar>\r\n            \r\n            <div class=\"me-2\">\r\n                <h5 class=\"m-0\">\r\n                    {{name}}\r\n                </h5>\r\n                <span class=\"font-size-3\">{{email}}</span>\r\n            </div>\r\n        </div>\r\n        \r\n    </div>\r\n    \r\n\r\n    <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n                class=\"d-block text-black\"\r\n                (click)=\"onProfileClick()\" \r\n            >\r\n                {{profileText}}\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                {{signOutText}}\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:#e9ecef;cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { name: [{
                 type: Input
             }], id: [{
                 type: Input
+            }], email: [{
+                type: Input
             }], showSignOut: [{
                 type: Input
             }], showProfile: [{
@@ -250,6 +255,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Output
             }] } });
 
+class SdsProductHomeComponent {
+    constructor() {
+        this.showAppSwitcher = false;
+        this.appSwitcherSwitchText = '';
+        this.appSwitcherDiscoverText = '';
+    }
+    ngOnInit() { }
+}
+SdsProductHomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsProductHomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsProductHomeComponent, selector: "sds-product-home", inputs: { logoUrl: "logoUrl", logoAltText: "logoAltText", moduleTitle: "moduleTitle", showAppSwitcher: "showAppSwitcher", appSwitcherProductCode: "appSwitcherProductCode", appSwitcherUserProductCodes: "appSwitcherUserProductCodes", appSwitcherTenantProducts: "appSwitcherTenantProducts", appSwitcherSwitchText: "appSwitcherSwitchText", appSwitcherDiscoverText: "appSwitcherDiscoverText" }, ngImport: i0, template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\r\n        [productCode]=\"appSwitcherProductCode\"\r\n        [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n        [tenantProducts]=\"appSwitcherTenantProducts\"\r\n        [switchText]=\"appSwitcherSwitchText\"\r\n        [discoverText]=\"appSwitcherDiscoverText\"\r\n        >\r\n    </sds-app-switcher>\r\n\r\n    <div class=\"ms-2\">\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{text-transform:uppercase;font-size:.8rem}\n"], components: [{ type: i1$2.SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText"], outputs: ["productClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-product-home', template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\r\n        [productCode]=\"appSwitcherProductCode\"\r\n        [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n        [tenantProducts]=\"appSwitcherTenantProducts\"\r\n        [switchText]=\"appSwitcherSwitchText\"\r\n        [discoverText]=\"appSwitcherDiscoverText\"\r\n        >\r\n    </sds-app-switcher>\r\n\r\n    <div class=\"ms-2\">\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{text-transform:uppercase;font-size:.8rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { logoUrl: [{
+                type: Input
+            }], logoAltText: [{
+                type: Input
+            }], moduleTitle: [{
+                type: Input
+            }], showAppSwitcher: [{
+                type: Input
+            }], appSwitcherProductCode: [{
+                type: Input
+            }], appSwitcherUserProductCodes: [{
+                type: Input
+            }], appSwitcherTenantProducts: [{
+                type: Input
+            }], appSwitcherSwitchText: [{
+                type: Input
+            }], appSwitcherDiscoverText: [{
+                type: Input
+            }] } });
+
 // import { NavigationGroupComponent } from './navigation-group/navigation-group.component';
 // import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';
 // import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';
@@ -261,7 +299,8 @@ const components = [
     SdsNavigationHeaderComponent,
     SdsNavigationContainerComponent,
     SdsNavigationExternalLinkComponent,
-    SdsNavigationUserProfileComponent
+    SdsNavigationUserProfileComponent,
+    SdsProductHomeComponent
 ];
 class SdsNavigationModule {
 }
@@ -272,10 +311,12 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SdsNavigationHeaderComponent,
         SdsNavigationContainerComponent,
         SdsNavigationExternalLinkComponent,
-        SdsNavigationUserProfileComponent, NavigationRouteActivePipe,
+        SdsNavigationUserProfileComponent,
+        SdsProductHomeComponent, NavigationRouteActivePipe,
         SdsNavigationUserProfileComponent], imports: [CommonModule,
         RouterModule,
         SdsAvatarModule,
+        SdsAppSwitcherModule,
         FontAwesomeModule,
         DxPopoverModule], exports: [SdsNavigationGroupComponent,
         SdsNavigationRouteLinkComponent,
@@ -283,11 +324,13 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         SdsNavigationHeaderComponent,
         SdsNavigationContainerComponent,
         SdsNavigationExternalLinkComponent,
-        SdsNavigationUserProfileComponent] });
+        SdsNavigationUserProfileComponent,
+        SdsProductHomeComponent] });
 SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsNavigationModule, imports: [[
             CommonModule,
             RouterModule,
             SdsAvatarModule,
+            SdsAppSwitcherModule,
             FontAwesomeModule,
             DxPopoverModule
         ]] });
@@ -297,12 +340,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                     declarations: [
                         ...components,
                         NavigationRouteActivePipe,
-                        SdsNavigationUserProfileComponent
+                        SdsNavigationUserProfileComponent,
                     ],
                     imports: [
                         CommonModule,
                         RouterModule,
                         SdsAvatarModule,
+                        SdsAppSwitcherModule,
                         FontAwesomeModule,
                         DxPopoverModule
                     ],
@@ -316,5 +360,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent };
+export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map