npm - @spicainternational/ngx-sds-components - Versions diffs - 8.0.0 → 8.1.1 - Mend

@spicainternational/ngx-sds-components 8.0.0 → 8.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/fesm2022/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs CHANGED Viewed

@@ -44,11 +44,11 @@ class SdsExpansionPanelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsExpansionPanelComponent, isStandalone: true, selector: "sds-expansion-panel", inputs: { headerIcon: "headerIcon", headerText: "headerText", headerSideText: "headerSideText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", hoverColor: "hoverColor", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{line-height:1rem;height:fit-content;transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header .header-side-text{font-size:1.06rem;font-weight:500}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsExpansionPanelComponent, isStandalone: true, selector: "sds-expansion-panel", inputs: { headerIcon: "headerIcon", headerText: "headerText", headerSideText: "headerSideText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", hoverColor: "hoverColor", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{line-height:1rem;height:fit-content;transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s ease-out}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header .header-side-text{font-size:1.06rem;font-weight:500}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, FaIconComponent], template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{line-height:1rem;height:fit-content;transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s linear}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header .header-side-text{font-size:1.06rem;font-weight:500}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
+            args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, FaIconComponent], template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{line-height:1rem;height:fit-content;transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s ease-out}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header .header-side-text{font-size:1.06rem;font-weight:500}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
         }], propDecorators: { headerIcon: [{
                 type: Input
             }], headerText: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { faChevronDown } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement, HeaderSize } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sds-expansion-panel',\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [NgIf, FaIconComponent],\r\n})\r\nexport class SdsExpansionPanelComponent {\r\n @Input() headerIcon?: IconDefinition;\r\n @Input() headerText?: string;\r\n @Input() headerSideText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = true;\r\n @Input() animatePanel = true;\r\n\r\n @Input() hoverColor?: string;\r\n\r\n\r\n /*\r\n toggles greyish background\r\n \r\n @memberof SdsExpansionPanelComponent\r\n /\r\n @Input() showBackground = true;\r\n\r\n /\r\n Background color of the panel. Gray-100 by default\r\n \r\n @memberof SdsExpansionPanelComponent\r\n /\r\n @Input() backgroundColor = 'var(--bs-gray-100)';\r\n\r\n /\r\n position caret next to header of on the far end of the component\r\n \r\n @type {('nextToHeader' \| 'farEnd')}\r\n * @memberof SdsExpansionPanelComponent\r\n /\r\n @Input() caretPlacement: CaretPlacement = 'nextToHeader';\r\n\r\n /\r\n 'descriptionText' - text displayed when component is \"closed\".\r\n \r\n Note: Use ng-content 'contentOnClosed' if more complex use-case is needed\r\n \r\n @type {string}\r\n * @memberof ExpansionPanelComponent\r\n /\r\n @Input() descriptionText?: string;\r\n\r\n @Input() isOpen: boolean = false;\r\n @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();\r\n\r\n @Input() expandPanelText?: string;\r\n @Input() collapsePanelText?: string;\r\n\r\n @Input() headerSize: HeaderSize = 'default';\r\n\r\n public caretIcon: IconDefinition = faChevronDown;\r\n \r\n\r\n public onToggleIsOpenClick(event: MouseEvent): void {\r\n this.isOpen = !this.isOpen;\r\n this.isOpenChange.emit(this.isOpen);\r\n event.stopImmediatePropagation();\r\n }\r\n\r\n public openPanel() {\r\n if (!this.isOpen) {\r\n this.isOpen = true;\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n}\r\n","\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-center\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n <small \r\n ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n ngIf=\"!isOpen\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\r\n >\r\n <div \r\n ngIf=\"isOpen\"\r\n class=\"mt-2\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;MAqBa,0BAA0B,CAAA;AARvC,IAAA,WAAA,GAAA;QAea,IAAY,CAAA,YAAA,GAAG,IAAI;QACnB,IAAY,CAAA,YAAA,GAAG,IAAI;AAK5B;;;;AAIG;QACM,IAAc,CAAA,cAAA,GAAG,IAAI;AAE9B;;;;AAIG;QACM,IAAe,CAAA,eAAA,GAAG,oBAAoB;AAE/C;;;;;AAKG;QACM,IAAc,CAAA,cAAA,GAAmB,cAAc;QAY/C,IAAM,CAAA,MAAA,GAAY,KAAK;AACtB,QAAA,IAAA,CAAA,YAAY,GAA0B,IAAI,YAAY,EAAE;QAKzD,IAAU,CAAA,UAAA,GAAe,SAAS;QAEpC,IAAS,CAAA,SAAA,GAAmB,aAAa;AAenD;AAZU,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AACxC,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACnC,KAAK,CAAC,wBAAwB,EAAE;;IAG7B,SAAS,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACd,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;;+GAjElC,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,ECrBvC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,QAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,8lFAsEA,EDnDc,MAAA,EAAA,CAAA,~~8qCAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,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,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEtB,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBARtC,SAAS;+BACI,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,8lFAAA,EAAA,MAAA,EAAA,CAAA,~~8qCAAA~~,CAAA,EAAA;8BAGvB,UAAU,EAAA,CAAA;sBAAlB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBAEQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBAEQ,UAAU,EAAA,CAAA;sBAAlB;gBAQQ,cAAc,EAAA,CAAA;sBAAtB;gBAOQ,eAAe,EAAA,CAAA;sBAAvB;gBAQQ,cAAc,EAAA,CAAA;sBAAtB;gBAUQ,eAAe,EAAA,CAAA;sBAAvB;gBAEQ,MAAM,EAAA,CAAA;sBAAd;gBACS,YAAY,EAAA,CAAA;sBAArB;gBAEQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBAEQ,UAAU,EAAA,CAAA;sBAAlB;;;AExEL;;AAEG;;;;"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { faChevronDown } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement, HeaderSize } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sds-expansion-panel',\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [NgIf, FaIconComponent],\r\n})\r\nexport class SdsExpansionPanelComponent {\r\n @Input() headerIcon?: IconDefinition;\r\n @Input() headerText?: string;\r\n @Input() headerSideText?: string;\r\n @Input() hideHeader?: boolean;\r\n @Input() headerId?: string;\r\n\r\n @Input() animateCaret = true;\r\n @Input() animatePanel = true;\r\n\r\n @Input() hoverColor?: string;\r\n\r\n\r\n /*\r\n toggles greyish background\r\n \r\n @memberof SdsExpansionPanelComponent\r\n /\r\n @Input() showBackground = true;\r\n\r\n /\r\n Background color of the panel. Gray-100 by default\r\n \r\n @memberof SdsExpansionPanelComponent\r\n /\r\n @Input() backgroundColor = 'var(--bs-gray-100)';\r\n\r\n /\r\n position caret next to header of on the far end of the component\r\n \r\n @type {('nextToHeader' \| 'farEnd')}\r\n * @memberof SdsExpansionPanelComponent\r\n /\r\n @Input() caretPlacement: CaretPlacement = 'nextToHeader';\r\n\r\n /\r\n 'descriptionText' - text displayed when component is \"closed\".\r\n \r\n Note: Use ng-content 'contentOnClosed' if more complex use-case is needed\r\n \r\n @type {string}\r\n * @memberof ExpansionPanelComponent\r\n /\r\n @Input() descriptionText?: string;\r\n\r\n @Input() isOpen: boolean = false;\r\n @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();\r\n\r\n @Input() expandPanelText?: string;\r\n @Input() collapsePanelText?: string;\r\n\r\n @Input() headerSize: HeaderSize = 'default';\r\n\r\n public caretIcon: IconDefinition = faChevronDown;\r\n \r\n\r\n public onToggleIsOpenClick(event: MouseEvent): void {\r\n this.isOpen = !this.isOpen;\r\n this.isOpenChange.emit(this.isOpen);\r\n event.stopImmediatePropagation();\r\n }\r\n\r\n public openPanel() {\r\n if (!this.isOpen) {\r\n this.isOpen = true;\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n}\r\n","\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n class=\"rounded expansion-panel\"\r\n [class.background]=\"showBackground\"\r\n [class.closed]=\"!isOpen\"\r\n [class.show-hover]=\"!isOpen && hoverColor\"\r\n [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n (click)=\"openPanel()\"\r\n>\r\n <ng-container ngIf=\"!hideHeader\">\r\n <div\r\n class=\"expansion-panel-header sds-flex-row-center\"\r\n (click)=\"onToggleIsOpenClick($event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-link\"\r\n [id]=\"headerId\"\r\n [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n >\r\n <fa-icon class=\"me-1\" ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n <span \r\n class=\"header-text\"\r\n [class.sds-fs-93]=\"headerSize == 'small'\"\r\n >\r\n {{ headerText }}\r\n </span>\r\n <small \r\n ngIf=\"headerSideText\"\r\n class=\"header-side-text text-muted\"\r\n [class.sds-fs-90]=\"headerSize == 'small'\"\r\n >\r\n {{ headerSideText }}\r\n </small>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link caret px-1\"\r\n [class.rotate]=\"animateCaret\"\r\n [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n >\r\n <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div \r\n ngIf=\"!isOpen\"\r\n >\r\n {{ descriptionText }}\r\n <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n </div>\r\n\r\n <div \r\n class=\"panel-contents\" \r\n [class.open]=\"isOpen\"\r\n [class.animate]=\"animatePanel\"\r\n >\r\n <div \r\n ngIf=\"isOpen\"\r\n class=\"mt-2\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-modal.mjs CHANGED Viewed

@@ -18,11 +18,11 @@ class SdsModalComponent {
         this.closeOnEscape = false;
         this.downSizing = 'discrete';
         /**
-         * Allow the modal to be draggable by the user. Default is false.
+         * Allow the modal to be draggable by the user. Default is true.
          *
          * @memberof SdsModalComponent
          */
-        this.isDraggable = false;
+        this.isDraggable = true;
         /**
          * Constrain modal to the viewport. Default is true.
          *
@@ -163,11 +163,11 @@ class SdsDialogComponent {
         this.closeText = 'close';
         this.size = 'md';
         this.primaryButtonText = 'Ok';
-        this.primaryButtonClass = 'btn-primary';
+        this.primaryButtonClass = 'sds-btn-primary';
         this.primaryButtonType = 'button';
         this.primaryButtonDisabled = false;
         this.secondaryButtonText = 'Cancel';
-        this.secondaryButtonClass = 'btn-secondary';
+        this.secondaryButtonClass = 'sds-btn-secondary';
         this.secondaryButtonType = 'button';
         this.secondaryButtonDisabled = false;
         this.closeOnEscape = true;

package/fesm2022/spicainternational-ngx-sds-components-src-lib-modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.ts","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.html","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n Component,\r\n ElementRef,\r\n Input,\r\n OnInit,\r\n Output,\r\n ViewChild,\r\n EventEmitter,\r\n ContentChild,\r\n OnChanges,\r\n SimpleChanges\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { ModalTranslations } from './modal.model';\r\nimport { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';\r\nimport { NgClass, NgIf } from '@angular/common';\r\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\r\n\r\n@Component({\r\n selector: 'sds-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrls: ['./modal.component.scss'],\r\n standalone: true,\r\n imports: [\r\n CdkTrapFocus,\r\n NgClass,\r\n CdkDrag,\r\n NgIf,\r\n CdkDragHandle,\r\n ],\r\n})\r\nexport class SdsModalComponent implements OnInit, OnChanges {\r\n @ContentChild('header') headerContent: ElementRef = { nativeElement: undefined };\r\n\r\n @Input() public modalTitle?: string;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showFooter: boolean = true;\r\n @Input() public size: 'sm' \| 'md' \| 'lg' \| 'xl' \| '820' \| 'xxl' = 'md';\r\n @Input() public modalDialogId?: string;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public autoFocusCloseButton: boolean = false;\r\n\r\n @Input() public translations: ModalTranslations;\r\n @Input() public isScrollable = true;\r\n @Input() public isVerticallyCentered = true;\r\n @Input() public closeOnEscape = false;\r\n\r\n @Input() public downSizing: 'discrete' \| 'continuous' = 'discrete';\r\n\r\n /*\r\n Allow the modal to be draggable by the user. Default is false.\r\n \r\n @memberof SdsModalComponent\r\n /\r\n @Input() public isDraggable = false;\r\n\r\n /\r\n Constrain modal to the viewport. Default is true.\r\n \r\n @memberof SdsModalComponent\r\n /\r\n @Input() public isDragConstrained = true;\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public closeEscapeKeypress: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n public closeIcon = faXmark;\r\n\r\n // public isOpen: boolean = false;\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @ViewChild('modal', { static: false }) private _modal: ElementRef \| undefined;\r\n @ViewChild('closeButton', { static: false }) private _closeButton: ElementRef \| undefined;\r\n \r\n\r\n constructor() {\r\n this.translations = {\r\n close: undefined\r\n }\r\n }\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['isOpen']) {\r\n if (this.isOpen) {\r\n this.open();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public open(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'block';\r\n this.isOpen = true;\r\n if(this.autoFocusCloseButton)\r\n this._closeButton?.nativeElement.focus();\r\n this.modalOpen.emit();\r\n }\r\n }\r\n\r\n public close(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'none';\r\n this.isOpen = false;\r\n this.modalClose.emit();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onCloseButtonClick(){\r\n this.closeClick.emit();\r\n this.close();\r\n }\r\n\r\n onKeydown(event: KeyboardEvent){\r\n if (\r\n event.code === 'Escape' &&\r\n this.closeOnEscape && \r\n this._modal != undefined && \r\n this._modal.nativeElement.style.display === 'block'){\r\n // console.log(`${this.constructor.name} got event: ${event.code}`);\r\n this.closeEscapeKeypress.emit();\r\n this.close();\r\n }\r\n }\r\n}\r\n","<div \r\n #modal \r\n class=\"modal modal-backdrop\" \r\n (keydown)=\"onKeydown($event)\" \r\n [cdkTrapFocus]=\"isOpen\" \r\n [cdkTrapFocusAutoCapture]=\"true\" \r\n >\r\n <div\r\n class=\"modal-dialog\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [class.downsize-continuous] = \"downSizing === 'continuous'\"\r\n [class.modal-dialog-centered] = \"isVerticallyCentered\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div \r\n class=\"modal-content\" \r\n cdkDrag [cdkDragDisabled]=\"!isDraggable\" [cdkDragBoundary]=\"isDragConstrained ? '.modal-backdrop' : ''\"\r\n >\r\n\r\n <div ngIf=\"isDraggable\" class=\"modal-drag-handle\" cdkDragHandle></div>\r\n\r\n <div \r\n ngIf=\"showHeader && headerContent\" \r\n class=\"modal-header\" \r\n >\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>","import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { SdsModalComponent } from '../modal.component';\r\nimport { ButtonType } from './dialog.types';\r\nimport { NgIf } from '@angular/common';\r\n\r\ntype modalButton = 'primary' \| 'secondary' \| 'close';\r\n\r\n@Component({\r\n selector: 'sds-dialog',\r\n templateUrl: './dialog.component.html',\r\n styleUrls: ['./dialog.component.scss'],\r\n standalone: true,\r\n imports: [SdsModalComponent, NgIf],\r\n})\r\nexport class SdsDialogComponent implements OnInit {\r\n /*\r\n @deprecated Use dialogTitle instead\r\n /\r\n @Input() public title: string = '';\r\n @Input() public dialogTitle: string = '';\r\n \r\n @Input() public closeText?: string = 'close';\r\n @Input() public size: 'sm' \| 'md' \| 'lg' \| 'xl' = 'md';\r\n\r\n @Input() public primaryButtonText: string = 'Ok';\r\n @Input() public primaryButtonClass: string = 'btn-primary';\r\n @Input() public primaryButtonType: ButtonType = 'button';\r\n @Input() public primaryButtonId?: string;\r\n @Input() public primaryButtonDisabled: boolean = false;\r\n \r\n @Input() public secondaryButtonText: string = 'Cancel'; \r\n @Input() public secondaryButtonClass: string = 'btn-secondary';\r\n @Input() public secondaryButtonType: ButtonType = 'button';\r\n @Input() public secondaryButtonId?: string;\r\n @Input() public secondaryButtonDisabled: boolean = false;\r\n\r\n @Input() public closeOnEscape: boolean = true;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public showPrimaryButton: boolean = true;\r\n @Input() public showSecondaryButton: boolean = true;\r\n @Input() public autofocusElement: 'primary' \| 'secondary' \| 'close' \| 'content' = 'primary';\r\n\r\n @Input() public modalDialogId?: string;\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public dialogOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public dialogClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @Output() public primaryButtonClick: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public secondaryButtonClick: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @ViewChild('modal', { static: true }) private _modal: SdsModalComponent \| undefined;\r\n @ViewChild('content', { read: ElementRef, static: true }) private _content?: ElementRef;\r\n @ViewChild('primaryButton', { read: ElementRef, static: false }) private _primaryButton?: ElementRef;\r\n @ViewChild('secondaryButton', { read: ElementRef, static: false }) private _secondaryButton?: ElementRef;\r\n\r\n private _callback?: Function;\r\n private _callbackData: any;\r\n\r\n // public isOpen: boolean = false;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {\r\n if (this.autofocusElement == 'primary' && !this.showPrimaryButton) {\r\n this.autofocusElement = 'secondary';\r\n }\r\n if (this.autofocusElement == 'secondary' && !this.showSecondaryButton) {\r\n this.autofocusElement = 'close';\r\n }\r\n if (this.autofocusElement == 'close' && !this.showCloseButton) {\r\n this.autofocusElement = 'content';\r\n }\r\n }\r\n\r\n public open(callback?: (button: modalButton, data: any) => void, data?: any): void{\r\n this._callback = callback;\r\n this._callbackData = data;\r\n\r\n if (this._modal != undefined) {\r\n this.isOpen = true;\r\n // this._modal.open();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n private close(): void {\r\n if (this._modal != undefined) {\r\n this.isOpen = false;\r\n // this._modal.close();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onSecondaryClick(): void {\r\n if (this._callback) {\r\n this._callback('secondary', this._callbackData);\r\n }\r\n this.secondaryButtonClick.emit();\r\n this.close();\r\n }\r\n\r\n public onPrimaryClick(): void {\r\n if (this._callback) {\r\n this._callback('primary', this._callbackData);\r\n }\r\n this.primaryButtonClick.emit();\r\n this.close();\r\n }\r\n\r\n public onCloseClick(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onCloseEscapeKeypress(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onModalClose(): void {\r\n this.dialogClose.emit();\r\n }\r\n\r\n public onModalOpen(): void {\r\n this.dialogOpen.emit();\r\n switch (this.autofocusElement) {\r\n case 'primary':\r\n this._primaryButton?.nativeElement.focus();\r\n break;\r\n case 'secondary':\r\n this._secondaryButton?.nativeElement.focus();\r\n break;\r\n case 'content':\r\n this._content?.nativeElement.focus();\r\n break;\r\n default:\r\n break;\r\n }\r\n } \r\n\r\n}\r\n\r\n\r\n\r\n","<sds-modal\r\n #modal\r\n [modalTitle]=\"dialogTitle \|\| title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.ts","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.html","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n Component,\r\n ElementRef,\r\n Input,\r\n OnInit,\r\n Output,\r\n ViewChild,\r\n EventEmitter,\r\n ContentChild,\r\n OnChanges,\r\n SimpleChanges\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { ModalTranslations } from './modal.model';\r\nimport { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';\r\nimport { NgClass, NgIf } from '@angular/common';\r\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\r\n\r\n@Component({\r\n selector: 'sds-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrls: ['./modal.component.scss'],\r\n standalone: true,\r\n imports: [\r\n CdkTrapFocus,\r\n NgClass,\r\n CdkDrag,\r\n NgIf,\r\n CdkDragHandle,\r\n ],\r\n})\r\nexport class SdsModalComponent implements OnInit, OnChanges {\r\n @ContentChild('header') headerContent: ElementRef = { nativeElement: undefined };\r\n\r\n @Input() public modalTitle?: string;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showFooter: boolean = true;\r\n @Input() public size: 'sm' \| 'md' \| 'lg' \| 'xl' \| '820' \| 'xxl' = 'md';\r\n @Input() public modalDialogId?: string;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public autoFocusCloseButton: boolean = false;\r\n\r\n @Input() public translations: ModalTranslations;\r\n @Input() public isScrollable = true;\r\n @Input() public isVerticallyCentered = true;\r\n @Input() public closeOnEscape = false;\r\n\r\n @Input() public downSizing: 'discrete' \| 'continuous' = 'discrete';\r\n\r\n /*\r\n Allow the modal to be draggable by the user. Default is true.\r\n \r\n @memberof SdsModalComponent\r\n /\r\n @Input() public isDraggable = true;\r\n\r\n /\r\n Constrain modal to the viewport. Default is true.\r\n \r\n @memberof SdsModalComponent\r\n /\r\n @Input() public isDragConstrained = true;\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public closeEscapeKeypress: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n public closeIcon = faXmark;\r\n\r\n // public isOpen: boolean = false;\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @ViewChild('modal', { static: false }) private _modal: ElementRef \| undefined;\r\n @ViewChild('closeButton', { static: false }) private _closeButton: ElementRef \| undefined;\r\n \r\n\r\n constructor() {\r\n this.translations = {\r\n close: undefined\r\n }\r\n }\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['isOpen']) {\r\n if (this.isOpen) {\r\n this.open();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public open(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'block';\r\n this.isOpen = true;\r\n if(this.autoFocusCloseButton)\r\n this._closeButton?.nativeElement.focus();\r\n this.modalOpen.emit();\r\n }\r\n }\r\n\r\n public close(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'none';\r\n this.isOpen = false;\r\n this.modalClose.emit();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onCloseButtonClick(){\r\n this.closeClick.emit();\r\n this.close();\r\n }\r\n\r\n onKeydown(event: KeyboardEvent){\r\n if (\r\n event.code === 'Escape' &&\r\n this.closeOnEscape && \r\n this._modal != undefined && \r\n this._modal.nativeElement.style.display === 'block'){\r\n // console.log(`${this.constructor.name} got event: ${event.code}`);\r\n this.closeEscapeKeypress.emit();\r\n this.close();\r\n }\r\n }\r\n}\r\n","<div \r\n #modal \r\n class=\"modal modal-backdrop\" \r\n (keydown)=\"onKeydown($event)\" \r\n [cdkTrapFocus]=\"isOpen\" \r\n [cdkTrapFocusAutoCapture]=\"true\" \r\n >\r\n <div\r\n class=\"modal-dialog\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [class.downsize-continuous] = \"downSizing === 'continuous'\"\r\n [class.modal-dialog-centered] = \"isVerticallyCentered\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div \r\n class=\"modal-content\" \r\n cdkDrag [cdkDragDisabled]=\"!isDraggable\" [cdkDragBoundary]=\"isDragConstrained ? '.modal-backdrop' : ''\"\r\n >\r\n\r\n <div ngIf=\"isDraggable\" class=\"modal-drag-handle\" cdkDragHandle></div>\r\n\r\n <div \r\n ngIf=\"showHeader && headerContent\" \r\n class=\"modal-header\" \r\n >\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>","import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { SdsModalComponent } from '../modal.component';\r\nimport { ButtonType } from './dialog.types';\r\nimport { NgIf } from '@angular/common';\r\n\r\ntype modalButton = 'primary' \| 'secondary' \| 'close';\r\n\r\n@Component({\r\n selector: 'sds-dialog',\r\n templateUrl: './dialog.component.html',\r\n styleUrls: ['./dialog.component.scss'],\r\n standalone: true,\r\n imports: [SdsModalComponent, NgIf],\r\n})\r\nexport class SdsDialogComponent implements OnInit {\r\n /*\r\n @deprecated Use dialogTitle instead\r\n /\r\n @Input() public title: string = '';\r\n @Input() public dialogTitle: string = '';\r\n \r\n @Input() public closeText?: string = 'close';\r\n @Input() public size: 'sm' \| 'md' \| 'lg' \| 'xl' = 'md';\r\n\r\n @Input() public primaryButtonText: string = 'Ok';\r\n @Input() public primaryButtonClass: string = 'sds-btn-primary';\r\n @Input() public primaryButtonType: ButtonType = 'button';\r\n @Input() public primaryButtonId?: string;\r\n @Input() public primaryButtonDisabled: boolean = false;\r\n \r\n @Input() public secondaryButtonText: string = 'Cancel'; \r\n @Input() public secondaryButtonClass: string = 'sds-btn-secondary';\r\n @Input() public secondaryButtonType: ButtonType = 'button';\r\n @Input() public secondaryButtonId?: string;\r\n @Input() public secondaryButtonDisabled: boolean = false;\r\n\r\n @Input() public closeOnEscape: boolean = true;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public showPrimaryButton: boolean = true;\r\n @Input() public showSecondaryButton: boolean = true;\r\n @Input() public autofocusElement: 'primary' \| 'secondary' \| 'close' \| 'content' = 'primary';\r\n\r\n @Input() public modalDialogId?: string;\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public dialogOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /\r\n @deprecated Use isOpenChange instead\r\n /\r\n @Output() public dialogClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @Output() public primaryButtonClick: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public secondaryButtonClick: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @ViewChild('modal', { static: true }) private _modal: SdsModalComponent \| undefined;\r\n @ViewChild('content', { read: ElementRef, static: true }) private _content?: ElementRef;\r\n @ViewChild('primaryButton', { read: ElementRef, static: false }) private _primaryButton?: ElementRef;\r\n @ViewChild('secondaryButton', { read: ElementRef, static: false }) private _secondaryButton?: ElementRef;\r\n\r\n private _callback?: Function;\r\n private _callbackData: any;\r\n\r\n // public isOpen: boolean = false;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {\r\n if (this.autofocusElement == 'primary' && !this.showPrimaryButton) {\r\n this.autofocusElement = 'secondary';\r\n }\r\n if (this.autofocusElement == 'secondary' && !this.showSecondaryButton) {\r\n this.autofocusElement = 'close';\r\n }\r\n if (this.autofocusElement == 'close' && !this.showCloseButton) {\r\n this.autofocusElement = 'content';\r\n }\r\n }\r\n\r\n public open(callback?: (button: modalButton, data: any) => void, data?: any): void{\r\n this._callback = callback;\r\n this._callbackData = data;\r\n\r\n if (this._modal != undefined) {\r\n this.isOpen = true;\r\n // this._modal.open();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n private close(): void {\r\n if (this._modal != undefined) {\r\n this.isOpen = false;\r\n // this._modal.close();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onSecondaryClick(): void {\r\n if (this._callback) {\r\n this._callback('secondary', this._callbackData);\r\n }\r\n this.secondaryButtonClick.emit();\r\n this.close();\r\n }\r\n\r\n public onPrimaryClick(): void {\r\n if (this._callback) {\r\n this._callback('primary', this._callbackData);\r\n }\r\n this.primaryButtonClick.emit();\r\n this.close();\r\n }\r\n\r\n public onCloseClick(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onCloseEscapeKeypress(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onModalClose(): void {\r\n this.dialogClose.emit();\r\n }\r\n\r\n public onModalOpen(): void {\r\n this.dialogOpen.emit();\r\n switch (this.autofocusElement) {\r\n case 'primary':\r\n this._primaryButton?.nativeElement.focus();\r\n break;\r\n case 'secondary':\r\n this._secondaryButton?.nativeElement.focus();\r\n break;\r\n case 'content':\r\n this._content?.nativeElement.focus();\r\n break;\r\n default:\r\n break;\r\n }\r\n } \r\n\r\n}\r\n\r\n\r\n\r\n","<sds-modal\r\n #modal\r\n [modalTitle]=\"dialogTitle \|\| title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-navigation.mjs CHANGED Viewed

@@ -141,9 +141,19 @@ class SdsNavigationGroupComponent {
                 const route = activeRoute.split('/').filter(item => item.length > 0);
                 this.currentUrl = route;
                 this.isGroupActive = isUrlPartOfNavigationGroup(this.currentUrl, this.navigationGroupNestedRoutes, this.defaultRouterLink);
+                console.debug(`Nav group [${this.text}] active check (NavigationEnd): isGroupActive = ${this.isGroupActive} for route ${this.currentUrl}, navigationGroupNestedRoutes = ${this.navigationGroupNestedRoutes}, defaultRouterLink = ${this.defaultRouterLink}`);
             }
         });
     }
+    ngOnChanges(changes) {
+        if (changes['navigationGroupNestedRoutes'] || changes['defaultRouterLink']) {
+            const activeRoute = this.ignoreQueryParamsInActiveRoute ? removeQueryParams(this._router.url) : this._router.url;
+            const route = activeRoute.split('/').filter(item => item.length > 0);
+            this.currentUrl = route;
+            this.isGroupActive = isUrlPartOfNavigationGroup(this.currentUrl, this.navigationGroupNestedRoutes, this.defaultRouterLink);
+            console.debug(`Nav group [${this.text}] active check (onChanges): isGroupActive = ${this.isGroupActive} for route ${this.currentUrl}, navigationGroupNestedRoutes = ${this.navigationGroupNestedRoutes}, defaultRouterLink = ${this.defaultRouterLink}`);
+        }
+    }
     ngOnDestroy() {
         this._unsubscribe.next();
         this._unsubscribe.complete();
@@ -158,7 +168,7 @@ class SdsNavigationGroupComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], ngImport: i0, template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n        [class.collapsed]=\"isCollapsed()\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <div class=\"text-right\">\r\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </a>\r\n\r\n    <div \r\n        class=\"sub-menu\" \r\n        *ngIf=\"!isCollapsed()\">\r\n\r\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n    <dx-popover\r\n        [target]=\"navigationGroup\"\r\n        [showEvent]=\"{ name: 'dxhoverstart', delay: 100 }\"\r\n        [hideEvent]=\"{ name: 'dxhoverend', delay: 100 }\"\r\n        (onHiding)=\"onHiding($event)\"\r\n        width=\"15rem\"\r\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2' }\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        [hideOnParentScroll]=\"true\"\r\n        [animation]=\"{}\"\r\n    >\r\n\r\n        <dxo-position\r\n            my=\"top left\"\r\n            at=\"top right\"\r\n            [of]=\"navigationGroup\"\r\n            offset=\"-12 0\"\r\n            >\r\n        </dxo-position>\r\n\r\n        <div *ngIf=\"showPopoverHeader\" class=\"group-header user-select-none\">\r\n            {{ text }}\r\n        </div>\r\n        <div \r\n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\r\n            >\r\n            <div class=\"sds-navigation-group-items\">\r\n                <ng-content select=\"[popoverContent]\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>\r\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.5rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-in-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], usesOnChanges: true, ngImport: i0, template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n        [class.collapsed]=\"isCollapsed()\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"isCollapsed() ? undefined : [defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <div class=\"text-right\">\r\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </a>\r\n\r\n    <div \r\n        class=\"sub-menu\" \r\n        *ngIf=\"!isCollapsed()\">\r\n\r\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n    <dx-popover\r\n        [target]=\"navigationGroup\"\r\n        [showEvent]=\"{ name: 'dxhoverstart', delay: 100 }\"\r\n        [hideEvent]=\"{ name: 'dxhoverend', delay: 100 }\"\r\n        (onHiding)=\"onHiding($event)\"\r\n        width=\"15rem\"\r\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2' }\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        [hideOnParentScroll]=\"true\"\r\n        [animation]=\"{}\"\r\n    >\r\n\r\n        <dxo-position\r\n            my=\"top left\"\r\n            at=\"top right\"\r\n            [of]=\"navigationGroup\"\r\n            offset=\"-12 0\"\r\n            >\r\n        </dxo-position>\r\n\r\n        <div *ngIf=\"showPopoverHeader\" class=\"group-header user-select-none\">\r\n            {{ text }}\r\n        </div>\r\n        <div \r\n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\r\n            >\r\n            <div class=\"sds-navigation-group-items\">\r\n                <ng-content select=\"[popoverContent]\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>\r\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.5rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
             type: Component,
@@ -168,7 +178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FaIconComponent,
                         DxPopoverModule,
                         DxoPositionModule,
-                    ], template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n        [class.collapsed]=\"isCollapsed()\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <div class=\"text-right\">\r\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </a>\r\n\r\n    <div \r\n        class=\"sub-menu\" \r\n        *ngIf=\"!isCollapsed()\">\r\n\r\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n    <dx-popover\r\n        [target]=\"navigationGroup\"\r\n        [showEvent]=\"{ name: 'dxhoverstart', delay: 100 }\"\r\n        [hideEvent]=\"{ name: 'dxhoverend', delay: 100 }\"\r\n        (onHiding)=\"onHiding($event)\"\r\n        width=\"15rem\"\r\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2' }\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        [hideOnParentScroll]=\"true\"\r\n        [animation]=\"{}\"\r\n    >\r\n\r\n        <dxo-position\r\n            my=\"top left\"\r\n            at=\"top right\"\r\n            [of]=\"navigationGroup\"\r\n            offset=\"-12 0\"\r\n            >\r\n        </dxo-position>\r\n\r\n        <div *ngIf=\"showPopoverHeader\" class=\"group-header user-select-none\">\r\n            {{ text }}\r\n        </div>\r\n        <div \r\n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\r\n            >\r\n            <div class=\"sds-navigation-group-items\">\r\n                <ng-content select=\"[popoverContent]\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>\r\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.5rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-in-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"] }]
+                    ], template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n        [class.collapsed]=\"isCollapsed()\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"isCollapsed() ? undefined : [defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <div class=\"text-right\">\r\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </a>\r\n\r\n    <div \r\n        class=\"sub-menu\" \r\n        *ngIf=\"!isCollapsed()\">\r\n\r\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n    <dx-popover\r\n        [target]=\"navigationGroup\"\r\n        [showEvent]=\"{ name: 'dxhoverstart', delay: 100 }\"\r\n        [hideEvent]=\"{ name: 'dxhoverend', delay: 100 }\"\r\n        (onHiding)=\"onHiding($event)\"\r\n        width=\"15rem\"\r\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2' }\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        [hideOnParentScroll]=\"true\"\r\n        [animation]=\"{}\"\r\n    >\r\n\r\n        <dxo-position\r\n            my=\"top left\"\r\n            at=\"top right\"\r\n            [of]=\"navigationGroup\"\r\n            offset=\"-12 0\"\r\n            >\r\n        </dxo-position>\r\n\r\n        <div *ngIf=\"showPopoverHeader\" class=\"group-header user-select-none\">\r\n            {{ text }}\r\n        </div>\r\n        <div \r\n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\r\n            >\r\n            <div class=\"sds-navigation-group-items\">\r\n                <ng-content select=\"[popoverContent]\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>\r\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.5rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { navigationGroupNestedRoutes: [{
                 type: Input
             }], text: [{
@@ -356,7 +366,7 @@ class SdsNavigationUserProfileComponent {
         this.notificationBadgeClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"\r\n        d-flex\r\n        flex-row\r\n        align-items-center\r\n        gap-2\r\n        sds-navigation-user-profile-container\r\n        user-select-none\r\n        mb-1 ms-1 me-1 mt-2\r\n        pt-1 pb-1 ps-2\r\n        sds-hoverable\r\n        sds-rounded-2\r\n    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"\r\n            position-relative\r\n\r\n        \">\r\n        <sds-avatar\r\n            [text]=\"profile?.name\"\r\n            [colorKey]=\"profile?.id\"\r\n            [pictureUri]=\"profile?.pictureUri\"\r\n        >\r\n        </sds-avatar>\r\n\r\n        <span\r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"\r\n                position-absolute\r\n                notification-badge\r\n                translate-middle\r\n                bg-danger\r\n                border border-light\r\n                rounded-circle\r\n            \"\r\n            (click)=\"onNotificationBadgeClick($event)\"\r\n        >\r\n            <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\r\n        </span>\r\n    </div>\r\n\r\n    @if(!isCollapsed()) {\r\n        <div class=\"sds-flex-column\">\r\n            <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\r\n                {{ profile?.name }}\r\n            </span>\r\n\r\n            <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n                {{ profileInfo }}\r\n            </span>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<dx-popover\r\n    [target]=\"popoverTarget\"\r\n    [position]=\"{ my: 'left bottom', at: 'left top' }\"\r\n    collision=\"fit none\"\r\n    minWidth=\"20rem\"\r\n    maxWidth=\"20rem\"\r\n    [(visible)]=\"showOptions\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\r\n    }\"\r\n>\r\n    <div class=\"py-2 pb-3 main-profile-container border-bottom\">\r\n\r\n        <div class=\"sds-flex-column align-items-center\">\r\n            <sds-avatar\r\n                [text]=\"profile?.name\"\r\n                [colorKey]=\"profile?.id\"\r\n                [pictureUri]=\"profile?.pictureUri\"\r\n                [size]=\"7\"\r\n            >\r\n            </sds-avatar>\r\n\r\n            <h5 class=\"text-center mt-2 px-3\">\r\n                {{profile?.name}}\r\n            </h5>\r\n\r\n            <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\r\n                {{profile?.info}}\r\n            </div>\r\n        \r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n\r\n    <ul\r\n        class=\"\r\n            list-unstyled\r\n            sds-navigation-user-profile-actions\r\n            mb-0\r\n            sds-ul-gap-1\r\n            mx-2\r\n            mb-2\r\n        \"\r\n    >\r\n        <li *ngIf=\"showProfile\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"profileText\"\r\n                [icon]=\"userProfileIcon\"\r\n                (actionClick)=\"onProfileClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n\r\n        <li *ngIf=\"showSignOut\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"signOutText\"\r\n                [icon]=\"signOutIcon\"\r\n                (actionClick)=\"onSignOutClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n    </ul>\r\n</dx-popover>\r\n", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.main-profile-container{margin:.5rem}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:0!important;font-size:1rem}\n"], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"\r\n        d-flex\r\n        flex-row\r\n        align-items-center\r\n        gap-2\r\n        sds-navigation-user-profile-container\r\n        user-select-none\r\n        mb-1 ms-1 me-1 mt-2\r\n        pt-1 pb-1 ps-2\r\n        sds-hoverable\r\n        sds-rounded-2\r\n    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"\r\n            position-relative\r\n\r\n        \">\r\n        <sds-avatar\r\n            [text]=\"profile?.name\"\r\n            [colorKey]=\"profile?.id\"\r\n            [pictureUri]=\"profile?.pictureUri\"\r\n        >\r\n        </sds-avatar>\r\n\r\n        <span\r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"\r\n                position-absolute\r\n                notification-badge\r\n                translate-middle\r\n                bg-danger\r\n                border border-light\r\n                rounded-circle\r\n            \"\r\n            (click)=\"onNotificationBadgeClick($event)\"\r\n        >\r\n            <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\r\n        </span>\r\n    </div>\r\n\r\n    @if(!isCollapsed()) {\r\n        <div class=\"sds-flex-column\">\r\n            <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\r\n                {{ profile?.name }}\r\n            </span>\r\n\r\n            <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n                {{ profileInfo }}\r\n            </span>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<dx-popover\r\n    [target]=\"popoverTarget\"\r\n    [position]=\"{ my: 'left bottom', at: 'left top' }\"\r\n    collision=\"fit none\"\r\n    minWidth=\"20rem\"\r\n    maxWidth=\"20rem\"\r\n    [(visible)]=\"showOptions\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\r\n    }\"\r\n>\r\n    <div class=\"py-2 pb-3 main-profile-container border-bottom\">\r\n\r\n        <div class=\"sds-flex-column align-items-center\">\r\n            <sds-avatar\r\n                [text]=\"profile?.name\"\r\n                [colorKey]=\"profile?.id\"\r\n                [pictureUri]=\"profile?.pictureUri\"\r\n                [size]=\"7\"\r\n            >\r\n            </sds-avatar>\r\n\r\n            <h5 class=\"text-center mt-2 px-3\">\r\n                {{profile?.name}}\r\n            </h5>\r\n\r\n            <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\r\n                {{profile?.info}}\r\n            </div>\r\n        \r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n\r\n    <ul\r\n        class=\"\r\n            list-unstyled\r\n            sds-navigation-user-profile-actions\r\n            mb-0\r\n            sds-ul-gap-1\r\n            mx-2\r\n            mb-2\r\n        \"\r\n    >\r\n        <li *ngIf=\"showProfile\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"profileText\"\r\n                [icon]=\"userProfileIcon\"\r\n                (actionClick)=\"onProfileClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n\r\n        <li *ngIf=\"showSignOut\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"signOutText\"\r\n                [icon]=\"signOutIcon\"\r\n                (actionClick)=\"onSignOutClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n    </ul>\r\n</dx-popover>\r\n", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.main-profile-container{margin:.5rem}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:0!important;font-size:1rem}\n"], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
@@ -453,7 +463,7 @@ class SdsUserProfileTileComponent {
         this.size = 'medium';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileTileComponent, isStandalone: true, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n    <sds-avatar\r\n        [text]=\"profile?.name\"\r\n        [colorKey]=\"profile?.id\"\r\n        [pictureUri]=\"profile?.pictureUri\"\r\n        [size]=\"size === 'small' ? 2 : 3\"\r\n        borderColor=\"white\"\r\n        borderWidth=\"2\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <div \r\n        class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n        [style.minWidth.px]=\"1\"\r\n        >\r\n        <span \r\n            class=\"sds-fs-100 text-truncate\"\r\n            [class.sds-fs-100]=\"size === 'medium'\"\r\n            [class.sds-fs-95]=\"size === 'small'\"\r\n            [class.sds-fw-500]=\"emphasizeName\"\r\n            >\r\n            {{profile?.name}}\r\n        </span>\r\n        <div \r\n            class=\"sds-fw-400 text-truncate text-gray-800\"\r\n            [class.sds-fs-75]=\"size === 'medium'\"\r\n            [class.sds-fs-75]=\"size === 'small'\"\r\n        >\r\n            {{profile?.info}}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileTileComponent, isStandalone: true, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n    <sds-avatar\r\n        [text]=\"profile?.name\"\r\n        [colorKey]=\"profile?.id\"\r\n        [pictureUri]=\"profile?.pictureUri\"\r\n        [size]=\"size === 'small' ? 2 : 3\"\r\n        borderColor=\"white\"\r\n        borderWidth=\"2\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <div \r\n        class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n        [style.minWidth.px]=\"1\"\r\n        >\r\n        <span \r\n            class=\"sds-fs-100 text-truncate\"\r\n            [class.sds-fs-100]=\"size === 'medium'\"\r\n            [class.sds-fs-95]=\"size === 'small'\"\r\n            [class.sds-fw-500]=\"emphasizeName\"\r\n            >\r\n            {{profile?.name}}\r\n        </span>\r\n        <div \r\n            class=\"sds-fw-400 text-truncate text-gray-800\"\r\n            [class.sds-fs-75]=\"size === 'medium'\"\r\n            [class.sds-fs-75]=\"size === 'small'\"\r\n        >\r\n            {{profile?.info}}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
             type: Component,