npm - @spicainternational/ngx-sds-components - Versions diffs - 7.0.0-beta.1 → 7.1.0-beta.10 - Mend

@spicainternational/ngx-sds-components 7.0.0-beta.1 → 7.1.0-beta.10

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 (43) hide show

package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-date-pipes.mjs","sources":["../../../projects/ngx-sds-components/src/lib/date-pipes/date-period-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-pipes.module.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/spicainternational-ngx-sds-components-src-lib-date-pipes.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\nimport { isSameDay, isSameYear } from 'date-fns';\r\n\r\n@Pipe({\r\n name: 'sdsDatePeriodFormat',\r\n})\r\nexport class SdsDatePeriodFormatPipe implements PipeTransform {\r\n transform(\r\n from: Date,\r\n to: Date,\r\n locales: string \| Array<string>,\r\n options?: Intl.DateTimeFormatOptions,\r\n omitRedundantSegments: boolean = false,\r\n periodSeparator: string = '-',\r\n omitCurrentYear: boolean = false\r\n ): string {\r\n if (!from) {\r\n return '';\r\n }\r\n\r\n if (!to) {\r\n return from.toLocaleDateString(locales, options);\r\n }\r\n\r\n\r\n if (isSameDay(from, to)) {\r\n return from.toLocaleDateString(locales, options);\r\n } else {\r\n let fromOptions = {...options};\r\n let toOptions = {...options};\r\n\r\n if (omitRedundantSegments && fromOptions && toOptions) {\r\n\r\n // if both dates are in current year -> remove it from format\r\n const now = new Date();\r\n if (omitCurrentYear && isSameYear(from, now) && isSameYear(to, now)) {\r\n fromOptions.year = undefined;\r\n toOptions.year = undefined;\r\n } \r\n\r\n if (isSameYear(from, to)) {\r\n // if both dates have same year -> remove it from start data\r\n fromOptions.year = undefined;\r\n }\r\n }\r\n\r\n const fromString = from.toLocaleDateString(locales, fromOptions);\r\n const toString = to.toLocaleDateString(locales, toOptions);\r\n\r\n return `${fromString} ${periodSeparator} ${toString}`;\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateFormat',\r\n})\r\nexport class SdsDateFormatPipe implements PipeTransform {\r\n\r\n /*\r\n Formats date in given locale.\r\n \r\n @param date Date to be formatted.\r\n * @param locale A locale code for the locale format rules to use.\r\n * @param options An optional Intl.DateTimeFormatOptions parameter that can be used to fine-tune the output.\r\n * @returns A string with formatted date\r\n * @see [Intl docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n \r\n @publicApi\r\n /\r\n public transform(\r\n date: Date \| number \| string \| undefined,\r\n locales: string \| Array<string>,\r\n options?: Intl.DateTimeFormatOptions \| 'time' \| 'date' \| 'date-medium' \| 'date-long' \| 'date-time'\r\n ): string {\r\n if (date === null \|\| date === undefined) {\r\n return ''\r\n }\r\n\r\n const formatDate = new Date(date);\r\n if (formatDate.toString() == 'Invalid Date') {\r\n return ''\r\n } \r\n\r\n if (options === 'time'){\r\n return formatDate.toLocaleTimeString(locales, {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else if (options === 'date'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: 'numeric', \r\n month: 'numeric', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-medium'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: '2-digit', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-long'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: 'short', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-time'){\r\n return formatDate.toLocaleDateString(locales, {\r\n weekday: 'short', \r\n day: 'numeric', \r\n month: 'short', \r\n year:'numeric', \r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else {\r\n return formatDate.toLocaleDateString(locales, options as Intl.DateTimeFormatOptions \| undefined);\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDatePeriodFormatPipe } from './date-period-format.pipe';\r\nimport { SdsDateFormatPipe } from './date-format.pipe';\r\n\r\n\r\nconst pipes = [SdsDatePeriodFormatPipe, SdsDateFormatPipe];\r\n\r\n@NgModule({\r\n declarations: [\r\n ...pipes,\r\n ],\r\n imports: [\r\n CommonModule,\r\n ],\r\n exports:[\r\n ...pipes\r\n ]\r\n})\r\nexport class SdsDatePipesModule { }\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-date-pipes.mjs","sources":["../../../projects/ngx-sds-components/src/lib/date-pipes/date-period-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-time-range-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-pipes.module.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/date-time-formats.constants.ts","../../../projects/ngx-sds-components/src/lib/date-pipes/spicainternational-ngx-sds-components-src-lib-date-pipes.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\nimport { isSameDay, isSameYear } from 'date-fns';\r\n\r\n@Pipe({\r\n name: 'sdsDatePeriodFormat',\r\n})\r\nexport class SdsDatePeriodFormatPipe implements PipeTransform {\r\n transform(\r\n from: Date,\r\n to: Date,\r\n locales: string \| Array<string>,\r\n options?: Intl.DateTimeFormatOptions,\r\n omitRedundantSegments: boolean = false,\r\n periodSeparator: string = '-',\r\n omitCurrentYear: boolean = false\r\n ): string {\r\n if (!from) {\r\n return '';\r\n }\r\n\r\n if (!to) {\r\n return from.toLocaleDateString(locales, options);\r\n }\r\n\r\n\r\n if (isSameDay(from, to)) {\r\n return from.toLocaleDateString(locales, options);\r\n } else {\r\n let fromOptions = {...options};\r\n let toOptions = {...options};\r\n\r\n if (omitRedundantSegments && fromOptions && toOptions) {\r\n\r\n // if both dates are in current year -> remove it from format\r\n const now = new Date();\r\n if (omitCurrentYear && isSameYear(from, now) && isSameYear(to, now)) {\r\n fromOptions.year = undefined;\r\n toOptions.year = undefined;\r\n } \r\n\r\n if (isSameYear(from, to)) {\r\n // if both dates have same year -> remove it from start data\r\n fromOptions.year = undefined;\r\n }\r\n }\r\n\r\n const fromString = from.toLocaleDateString(locales, fromOptions);\r\n const toString = to.toLocaleDateString(locales, toOptions);\r\n\r\n return `${fromString} ${periodSeparator} ${toString}`;\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'sdsDateFormat',\r\n})\r\nexport class SdsDateFormatPipe implements PipeTransform {\r\n\r\n /*\r\n Formats date in given locale.\r\n \r\n @param date Date to be formatted.\r\n * @param locale A locale code for the locale format rules to use.\r\n * @param options An optional Intl.DateTimeFormatOptions parameter that can be used to fine-tune the output.\r\n * @returns A string with formatted date\r\n * @see [Intl docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n \r\n @publicApi\r\n /\r\n public transform(\r\n date: Date \| number \| string \| undefined,\r\n locales: string \| Array<string>,\r\n options?: Intl.DateTimeFormatOptions \| 'time' \| 'date' \| 'date-medium' \| 'date-long' \| 'date-time'\r\n ): string {\r\n if (date === null \|\| date === undefined) {\r\n return ''\r\n }\r\n\r\n const formatDate = new Date(date);\r\n if (formatDate.toString() == 'Invalid Date') {\r\n return ''\r\n } \r\n\r\n if (options === 'time'){\r\n return formatDate.toLocaleTimeString(locales, {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else if (options === 'date'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: 'numeric', \r\n month: 'numeric', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-medium'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: '2-digit', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-long'){\r\n return formatDate.toLocaleDateString(locales, {\r\n day: '2-digit', \r\n month: 'short', \r\n year:'numeric'\r\n }); \r\n } else if (options === 'date-time'){\r\n return formatDate.toLocaleDateString(locales, {\r\n weekday: 'short', \r\n day: 'numeric', \r\n month: 'short', \r\n year:'numeric', \r\n hour: 'numeric',\r\n minute: '2-digit'\r\n }); \r\n } else {\r\n return formatDate.toLocaleDateString(locales, options as Intl.DateTimeFormatOptions \| undefined);\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'sdsDateTimeRangeFormat',\n})\nexport class DateTimeRangeFormatPipe implements PipeTransform {\n /\n Formats a date range using Intl.DateTimeFormat.formatRange\n * @param startDate - The start date of the range\n * @param endDate - The end date of the range\n * @param locales - Locale(s) to use for formatting (optional, defaults to browser locale)\n * @param options - Intl.DateTimeFormatOptions for customizing the format\n * @returns Formatted date range string\n /\n transform(\n startDate: Date \| string \| number,\n endDate: Date \| string \| number,\n locales: string \| string[],\n options: Intl.DateTimeFormatOptions\n ): string {\n if (!startDate \|\| !endDate) {\n return '';\n }\n\n try {\n const start = new Date(startDate);\n const end = new Date(endDate);\n\n if (!options \|\| isNaN(start.getTime()) \|\| isNaN(end.getTime())) {\n return '';\n }\n\n const formatter = new Intl.DateTimeFormat(locales, options);\n const formatterWithRange = formatter as any;\n\n if (typeof formatterWithRange.formatRange === 'function') {\n return formatterWithRange.formatRange(start, end);\n } else {\n return `${formatter.format(start)} - ${formatter.format(end)}`;\n }\n } catch (error) {\n return '';\n }\n }\n}\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDatePeriodFormatPipe } from './date-period-format.pipe';\r\nimport { SdsDateFormatPipe } from './date-format.pipe';\r\nimport { DateTimeRangeFormatPipe } from './date-time-range-format.pipe';\r\n\r\n\r\nconst pipes = [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe];\r\n\r\n@NgModule({\r\n declarations: [\r\n ...pipes\r\n ],\r\n imports: [\r\n CommonModule,\r\n ],\r\n exports:[\r\n ...pipes\r\n ]\r\n})\r\nexport class SdsDatePipesModule { }\r\n","/\r\n Common Intl.DateTimeFormatOptions constants for consistent date/time formatting\r\n /\r\n\r\n// Date formats\r\nexport const DATE_NUMERIC_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'numeric',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_SHORT_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'short',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_LONG_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric'\r\n};\r\n\r\nexport const DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n weekday: 'long',\r\n ...DATE_LONG_MONTH_OPTIONS,\r\n};\r\n\r\nexport const DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n weekday: 'short',\r\n ...DATE_LONG_MONTH_OPTIONS,\r\n};\r\n\r\n\r\n// export const SHORT_DATE_WITH_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'short',\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// // Long date formats\r\n// export const LONG_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long',\r\n// year: 'numeric',\r\n// month: 'long',\r\n// day: 'numeric'\r\n// };\r\n\r\n\r\n\r\n\r\n\r\n// Time formats\r\nexport const TIME_HOUR_NUMERIC_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: 'numeric',\r\n minute: '2-digit'\r\n};\r\n\r\nexport const TIME_HOUR_2DIGIT_OPTION: Intl.DateTimeFormatOptions = {\r\n hour: '2-digit',\r\n minute: '2-digit'\r\n};\r\n\r\n// export const TIME_24H_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// export const TIME_WITH_SECONDS_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// second: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// Date and time combinations\r\n// export const SHORT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const LONG_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long',\r\n// year: 'numeric',\r\n// month: 'long',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const COMPACT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: '2-digit',\r\n// day: '2-digit',\r\n// hour: '2-digit',\r\n// minute: '2-digit',\r\n// hour12: false\r\n// };\r\n\r\n// Time range specific formats (optimized for ranges)\r\n\r\n\r\n// export const TIME_RANGE_WITH_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// month: 'short',\r\n// day: 'numeric',\r\n// hour: 'numeric',\r\n// minute: '2-digit',\r\n// hour12: true\r\n// };\r\n\r\n// export const DATE_RANGE_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// export const DATE_RANGE_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'long'\r\n// };\r\n\r\n// Special formats\r\n// export const RELATIVE_DATE_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'short',\r\n// month: 'short',\r\n// day: 'numeric'\r\n// };\r\n\r\n// export const MONTH_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric',\r\n// month: 'long'\r\n// };\r\n\r\n// export const WEEKDAY_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// weekday: 'long'\r\n// };\r\n\r\n// export const YEAR_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {\r\n// year: 'numeric'\r\n// };\r\n\r\n// Utility object for easy access\r\nexport const DATE_TIME_FORMAT_OPTIONS = {\r\n\r\n DATE_NUMERIC_MONTH: DATE_NUMERIC_MONTH_OPTIONS,\r\n DATE_SHORT_MONTH: DATE_SHORT_MONTH_OPTIONS,\r\n DATE_LONG_MONTH: DATE_LONG_MONTH_OPTIONS,\r\n\r\n DATE_LONG_MONTH_LONG_WEEKDAY: DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS,\r\n DATE_LONG_MONTH_SHORT_WEEKDAY: DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS,\r\n\r\n TIME_HOUR_NUMERIC: TIME_HOUR_NUMERIC_OPTION,\r\n TIME_HOUR_2DIGIT: TIME_HOUR_2DIGIT_OPTION,\r\n\r\n // SHORT_DATE_WITH_WEEKDAY: SHORT_DATE_WITH_WEEKDAY_OPTIONS,\r\n \r\n // Long formats\r\n// LONG_DATE_WITH_WEEKDAY: LONG_DATE_WITH_WEEKDAY_OPTIONS,\r\n\r\n // Time formats\r\n// TIME_12H: TIME_12H_OPTIONS,\r\n// TIME_24H: TIME_24H_OPTIONS,\r\n// TIME_WITH_SECONDS: TIME_WITH_SECONDS_OPTIONS,\r\n \r\n // DateTime combinations\r\n// SHORT_DATETIME: SHORT_DATETIME_OPTIONS,\r\n// LONG_DATETIME: LONG_DATETIME_OPTIONS,\r\n// COMPACT_DATETIME: COMPACT_DATETIME_OPTIONS,\r\n \r\n // Range specific\r\n \r\n// TIME_RANGE_WITH_DATE: TIME_RANGE_WITH_DATE_OPTIONS,\r\n// DATE_RANGE_MONTH: DATE_RANGE_MONTH_OPTIONS,\r\n// DATE_RANGE_YEAR: DATE_RANGE_YEAR_OPTIONS,\r\n \r\n // Special\r\n// RELATIVE_DATE: RELATIVE_DATE_OPTIONS,\r\n// MONTH_YEAR: MONTH_YEAR_OPTIONS,\r\n// WEEKDAY_ONLY: WEEKDAY_ONLY_OPTIONS,\r\n// YEAR_ONLY: YEAR_ONLY_OPTIONS\r\n} as const;\r\nexport type DateTimeFormatOptionKeys = keyof typeof DATE_TIME_FORMAT_OPTIONS;\r\n\r\n\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -4,21 +4,21 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i3 from '@fortawesome/angular-fontawesome';
+import * as i2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut } from '@fortawesome/pro-regular-svg-icons';
+import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faEyeSlash } from '@fortawesome/pro-regular-svg-icons';
 import { Subject, filter, takeUntil } from 'rxjs';
 import * as i4 from 'devextreme-angular/ui/popover';
 import { DxPopoverModule } from 'devextreme-angular/ui/popover';
 import * as i5 from 'devextreme-angular/ui/nested';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i3$1 from '@spicainternational/ngx-sds-components/src/lib/avatar';
+import * as i2$1 from '@spicainternational/ngx-sds-components/src/lib/avatar';
 import { SdsAvatarModule } from '@spicainternational/ngx-sds-components/src/lib/avatar';
-import * as i2$1 from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
+import * as i2$2 from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
 import { SdsAppSwitcherModule } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
 import { DxScrollViewModule } from 'devextreme-angular';
 import { SdsTooltipModule } from '@spicainternational/ngx-sds-components/src/lib/tooltip';
+import { FormsModule } from '@angular/forms';
+import { A11yModule } from '@angular/cdk/a11y';
 class SdsNavigationSeparatorComponent {
     constructor() { }
@@ -184,7 +184,7 @@ class SdsNavigationGroupComponent {
     }
 }
 SdsNavigationGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationGroupComponent, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: "navigationGroupNestedRoutes", text: "text", icon: "icon", defaultRouterLink: "defaultRouterLink", reverse: "reverse", ignoreQueryParamsInActiveRoute: "ignoreQueryParamsInActiveRoute", disabled: "disabled", showPopover: "showPopover", showPopoverHeader: "showPopoverHeader" }, 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.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n\r\n    <div *ngIf=\"isGroupActive\" class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"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: [".sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}::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 .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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i5.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
+SdsNavigationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationGroupComponent, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: "navigationGroupNestedRoutes", text: "text", icon: "icon", defaultRouterLink: "defaultRouterLink", reverse: "reverse", ignoreQueryParamsInActiveRoute: "ignoreQueryParamsInActiveRoute", disabled: "disabled", showPopover: "showPopover", showPopoverHeader: "showPopoverHeader" }, 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.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n\r\n    <div *ngIf=\"isGroupActive\" class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"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: [".sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}::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 .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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i5.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-navigation-group', template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\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    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n\r\n    <div *ngIf=\"isGroupActive\" class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"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: [".sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}::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 .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"] }]
@@ -242,7 +242,7 @@ class SdsNavigationExternalLinkComponent {
     }
 }
 SdsNavigationExternalLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationExternalLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationExternalLinkComponent, selector: "sds-navigation-external-link", inputs: { link: "link", text: "text", tabName: "tabName", externalLinkHint: "externalLinkHint", showExternalLinkIcon: "showExternalLinkIcon" }, ngImport: i0, template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center position-relative\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <div class=\"sds-navigation-text\">\r\n                <span>{{ text }}</span>\r\n            </div>\r\n\r\n            <div \r\n                class=\"sds-navigation-external-link-info-container\">\r\n                <fa-icon \r\n                    class=\"sds-navigation-external-link-info-icon\"\r\n                    *ngIf=\"showExternalLinkIcon\"\r\n\r\n                    [icon]=\"externalLinkIcon\"\r\n                    [size]=\"'xs'\"\r\n                    [title]=\"externalLinkHint\"\r\n                    >\r\n                </fa-icon>\r\n            </div> \r\n            \r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+SdsNavigationExternalLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationExternalLinkComponent, selector: "sds-navigation-external-link", inputs: { link: "link", text: "text", tabName: "tabName", externalLinkHint: "externalLinkHint", showExternalLinkIcon: "showExternalLinkIcon" }, ngImport: i0, template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center position-relative\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <div class=\"sds-navigation-text\">\r\n                <span>{{ text }}</span>\r\n            </div>\r\n\r\n            <div \r\n                class=\"sds-navigation-external-link-info-container\">\r\n                <fa-icon \r\n                    class=\"sds-navigation-external-link-info-icon\"\r\n                    *ngIf=\"showExternalLinkIcon\"\r\n\r\n                    [icon]=\"externalLinkIcon\"\r\n                    [size]=\"'xs'\"\r\n                    [title]=\"externalLinkHint\"\r\n                    >\r\n                </fa-icon>\r\n            </div> \r\n            \r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-navigation-external-link', template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center position-relative\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <div class=\"sds-navigation-text\">\r\n                <span>{{ text }}</span>\r\n            </div>\r\n\r\n            <div \r\n                class=\"sds-navigation-external-link-info-container\">\r\n                <fa-icon \r\n                    class=\"sds-navigation-external-link-info-icon\"\r\n                    *ngIf=\"showExternalLinkIcon\"\r\n\r\n                    [icon]=\"externalLinkIcon\"\r\n                    [size]=\"'xs'\"\r\n                    [title]=\"externalLinkHint\"\r\n                    >\r\n                </fa-icon>\r\n            </div> \r\n            \r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}\n"] }]
@@ -285,16 +285,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
+class SdsUserProfileActionButtonComponent {
+    constructor() {
+        this.text = '';
+        this.actionClick = new EventEmitter();
+    }
+    onActionClick() {
+        this.actionClick.emit();
+    }
+}
+SdsUserProfileActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsUserProfileActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \n    class=\"d-block text-black sds-navigation-user-profile-action-button sds-hoverable-150 sds-fs-93\"\n    (click)=\"onActionClick()\" \n>\n    <fa-icon\n        *ngIf=\"icon\"\n        class=\"me-2\"\n        [fixedWidth]=\"true\"\n        [size]=\"'sm'\"\n        [icon]=\"icon\">\n    </fa-icon>\n\n    <span>{{text}}</span>\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-profile-action-button', template: "<a \n    class=\"d-block text-black sds-navigation-user-profile-action-button sds-hoverable-150 sds-fs-93\"\n    (click)=\"onActionClick()\" \n>\n    <fa-icon\n        *ngIf=\"icon\"\n        class=\"me-2\"\n        [fixedWidth]=\"true\"\n        [size]=\"'sm'\"\n        [icon]=\"icon\">\n    </fa-icon>\n\n    <span>{{text}}</span>\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
 class SdsNavigationUserProfileComponent {
     constructor() {
         this.profile = null;
-        this.additionalProfiles = [];
-        this.activeProfileId = null;
-        this.activeProfileIdChange = new EventEmitter();
-        this.activeProfileInfo = '';
+        this.profileInfo = '';
         this.showSignOut = true;
         this.showProfile = true;
-        this.showTopBorder = false;
         this.signOutText = 'Sign out';
         this.profileText = 'Profile';
         this.showNotificationBadge = false;
@@ -303,65 +321,64 @@ class SdsNavigationUserProfileComponent {
         this.signOutClick = new EventEmitter();
         this.notificationBadgeClick = new EventEmitter();
         this.showOptions = false;
-        this.activeProfile = null;
+        this.showOptionsChange = new EventEmitter();
         this.userProfileIcon = faUser;
         this.signOutIcon = faSignOut;
     }
     ngOnInit() { }
     ngOnChanges(changes) {
-        var _a;
-        if (changes['activeProfileId'] || changes['profile'] || changes['additionalProfiles']) {
-            if (this.activeProfileId === null) {
-                this.activeProfile = this.profile;
-            }
-            else if (this.activeProfileId === ((_a = this.profile) === null || _a === void 0 ? void 0 : _a.id)) {
-                this.activeProfile = this.profile;
-            }
-            else {
-                this.activeProfile = this.additionalProfiles.find(profile => profile.id === this.activeProfileId) || null;
-            }
-        }
+        // if (changes['activeProfileId'] || changes['profile'] || changes['additionalProfiles']) {
+        //     if (this.activeProfileId === null) {
+        //         this.activeProfile = this.profile;
+        //     } else if (this.activeProfileId === this.profile?.id) {
+        //         this.activeProfile = this.profile;
+        //     } else {
+        //         this.activeProfile = this.additionalProfiles.find(profile => profile.id === this.activeProfileId) || null;
+        //     }
+        // }
     }
     onProfileClick() {
         this.showOptions = false;
+        this.showOptionsChange.emit(this.showOptions);
         this.profileClick.emit();
     }
     onSignOutClick() {
         this.showOptions = false;
+        this.showOptionsChange.emit(this.showOptions);
         this.signOutClick.emit();
     }
+    closeOptions() {
+        this.showOptions = false;
+        this.showOptionsChange.emit(this.showOptions);
+    }
+    openOptions() {
+        this.showOptions = true;
+        this.showOptionsChange.emit(this.showOptions);
+    }
+    toggleOptions(event) {
+        event.stopPropagation();
+        this.showOptions = !this.showOptions;
+        // console.log(this.showOptions);
+        this.showOptionsChange.emit(this.showOptions);
+    }
     onNotificationBadgeClick(event) {
         event.stopPropagation();
         this.notificationBadgeClick.emit();
     }
-    onActiveProfileIdChange(id) {
-        this.activeProfileIdChange.emit(id);
-        setTimeout(() => {
-            this.showOptions = false;
-        }, 100);
-    }
 }
 SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { profile: "profile", additionalProfiles: "additionalProfiles", activeProfileId: "activeProfileId", activeProfileInfo: "activeProfileInfo", showSignOut: "showSignOut", showProfile: "showProfile", showTopBorder: "showTopBorder", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText" }, outputs: { activeProfileIdChange: "activeProfileIdChange", profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"activeProfile?.name\"\r\n            [colorKey]=\"activeProfile?.id\"\r\n            [pictureUri]=\"activeProfile?.pictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n        </span>\r\n    </div>\r\n\r\n\r\n    <div class=\"sds-flex-column\">\r\n        <span\r\n            #nameElement \r\n            class=\"truncate-two-lines\">\r\n            {{activeProfile?.name}}\r\n        </span>    \r\n\r\n        <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n            {{activeProfileInfo}}\r\n        </span>\r\n    </div>\r\n\r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [(visible)]=\"showOptions\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-1' }\"\r\n    >\r\n    <div>\r\n        <ng-container \r\n            [ngTemplateOutlet]=\"profileTemplate\"\r\n            [ngTemplateOutletContext]=\"{ profile: profile, showRadio: additionalProfiles && additionalProfiles.length > 1 }\">\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let profile of additionalProfiles\">\r\n            <ng-container \r\n                [ngTemplateOutlet]=\"profileTemplate\"\r\n                [ngTemplateOutletContext]=\"{ profile: profile, showRadio: additionalProfiles && additionalProfiles.length > 1 }\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"border-top\"></div>\r\n\r\n    <ul \r\n        class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\" \r\n    >\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n            class=\"d-block text-black\"\r\n            (click)=\"onProfileClick()\" \r\n            >\r\n                <fa-icon class=\"me-2\" [size]=\"'sm'\" [icon]=\"userProfileIcon\"></fa-icon>\r\n                <span>{{profileText}}</span>\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                <fa-icon class=\"me-2\" [size]=\"'sm'\" [icon]=\"signOutIcon\"></fa-icon>\r\n                <span>{{signOutText}}</span>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>\r\n\r\n\r\n<ng-template #profileTemplate let-profile=\"profile\" let-showRadio=\"showRadio\">\r\n\r\n    <label class=\"d-flex flex-row gap-3 align-items-center p-2 ps-2 pe-3 rounded-1\">\r\n        <sds-avatar\r\n            [text]=\"profile.name\"\r\n            [colorKey]=\"profile.id\"\r\n            [pictureUri]=\"profile.pictureUri\"\r\n            [size]=\"2.4\"\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 class=\"sds-fw-500 sds-fs-100 text-truncate\">\r\n                {{profile.name}}\r\n            </span>\r\n            <div class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n                {{profile.info}}\r\n            </div>\r\n        </div>\r\n\r\n        <input \r\n            *ngIf=\"showRadio\"\r\n            class=\"mx-1\" type=\"radio\" name=\"profile\" value=\"{{profile.id}}\" \r\n            [ngModel]=\"activeProfileId\" \r\n            (ngModelChange)=\"onActiveProfileIdChange($event)\" />\r\n    </label>\r\n</ng-template>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { profile: "profile", profileInfo: "profileInfo", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText", showOptions: "showOptions" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange" }, 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    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"position-relative\">\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    <div class=\"sds-flex-column\">\r\n        <span class=\"truncate-two-lines\">\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</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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-user-profile', template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container user-select-none\"\r\n    (click)=\"showOptions = !showOptions\">\r\n\r\n    <div class=\"position-relative\">\r\n\r\n        <sds-avatar\r\n            [text]=\"activeProfile?.name\"\r\n            [colorKey]=\"activeProfile?.id\"\r\n            [pictureUri]=\"activeProfile?.pictureUri\"\r\n            >    \r\n        </sds-avatar>\r\n\r\n        <span \r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n            (click)=\"onNotificationBadgeClick($event)\">\r\n            <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n        </span>\r\n    </div>\r\n\r\n\r\n    <div class=\"sds-flex-column\">\r\n        <span\r\n            #nameElement \r\n            class=\"truncate-two-lines\">\r\n            {{activeProfile?.name}}\r\n        </span>    \r\n\r\n        <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n            {{activeProfileInfo}}\r\n        </span>\r\n    </div>\r\n\r\n\r\n</div> \r\n\r\n<dx-popover\r\n    [target]=\"nameElement\"\r\n    minWidth=\"12.5rem\"\r\n    maxWidth=\"20rem\"\r\n    [(visible)]=\"showOptions\"\r\n    [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-1' }\"\r\n    >\r\n    <div>\r\n        <ng-container \r\n            [ngTemplateOutlet]=\"profileTemplate\"\r\n            [ngTemplateOutletContext]=\"{ profile: profile, showRadio: additionalProfiles && additionalProfiles.length > 1 }\">\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let profile of additionalProfiles\">\r\n            <ng-container \r\n                [ngTemplateOutlet]=\"profileTemplate\"\r\n                [ngTemplateOutletContext]=\"{ profile: profile, showRadio: additionalProfiles && additionalProfiles.length > 1 }\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"border-top\"></div>\r\n\r\n    <ul \r\n        class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\" \r\n    >\r\n        <li *ngIf=\"showProfile\">\r\n            <a \r\n            class=\"d-block text-black\"\r\n            (click)=\"onProfileClick()\" \r\n            >\r\n                <fa-icon class=\"me-2\" [size]=\"'sm'\" [icon]=\"userProfileIcon\"></fa-icon>\r\n                <span>{{profileText}}</span>\r\n            </a>\r\n        </li>\r\n\r\n        <li>\r\n            <a \r\n                *ngIf=\"showSignOut\"\r\n                class=\"d-block text-black\"\r\n                (click)=\"onSignOutClick()\"      \r\n            >\r\n                <fa-icon class=\"me-2\" [size]=\"'sm'\" [icon]=\"signOutIcon\"></fa-icon>\r\n                <span>{{signOutText}}</span>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n\r\n</dx-popover>\r\n\r\n\r\n<ng-template #profileTemplate let-profile=\"profile\" let-showRadio=\"showRadio\">\r\n\r\n    <label class=\"d-flex flex-row gap-3 align-items-center p-2 ps-2 pe-3 rounded-1\">\r\n        <sds-avatar\r\n            [text]=\"profile.name\"\r\n            [colorKey]=\"profile.id\"\r\n            [pictureUri]=\"profile.pictureUri\"\r\n            [size]=\"2.4\"\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 class=\"sds-fw-500 sds-fs-100 text-truncate\">\r\n                {{profile.name}}\r\n            </span>\r\n            <div class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n                {{profile.info}}\r\n            </div>\r\n        </div>\r\n\r\n        <input \r\n            *ngIf=\"showRadio\"\r\n            class=\"mx-1\" type=\"radio\" name=\"profile\" value=\"{{profile.id}}\" \r\n            [ngModel]=\"activeProfileId\" \r\n            (ngModelChange)=\"onActiveProfileIdChange($event)\" />\r\n    </label>\r\n</ng-template>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"] }]
+            args: [{ selector: 'sds-navigation-user-profile', 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    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"position-relative\">\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    <div class=\"sds-flex-column\">\r\n        <span class=\"truncate-two-lines\">\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</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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { profile: [{
                 type: Input
-            }], additionalProfiles: [{
-                type: Input
-            }], activeProfileId: [{
-                type: Input
-            }], activeProfileIdChange: [{
-                type: Output
-            }], activeProfileInfo: [{
+            }], profileInfo: [{
                 type: Input
             }], showSignOut: [{
                 type: Input
             }], showProfile: [{
                 type: Input
-            }], showTopBorder: [{
-                type: Input
             }], signOutText: [{
                 type: Input
             }], profileText: [{
@@ -376,6 +393,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], notificationBadgeClick: [{
                 type: Output
+            }], showOptions: [{
+                type: Input
+            }], showOptionsChange: [{
+                type: Output
             }] } });
 class SdsProductHomeComponent {
@@ -398,7 +419,7 @@ class SdsProductHomeComponent {
     }
 }
 SdsProductHomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsProductHomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsProductHomeComponent, selector: "sds-product-home", inputs: { logoUrl: "logoUrl", logoAltText: "logoAltText", moduleTitle: "moduleTitle", showAppSwitcher: "showAppSwitcher", appSwitcherProductCode: "appSwitcherProductCode", appSwitcherUserProductCodes: "appSwitcherUserProductCodes", appSwitcherTenantProducts: "appSwitcherTenantProducts", appSwitcherSwitchText: "appSwitcherSwitchText", appSwitcherDiscoverText: "appSwitcherDiscoverText", allowHeaderClick: "allowHeaderClick" }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick" }, ngImport: i0, template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\r\n        [productCode]=\"appSwitcherProductCode\"\r\n        [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n        [tenantProducts]=\"appSwitcherTenantProducts\"\r\n        [switchText]=\"appSwitcherSwitchText\"\r\n        [discoverText]=\"appSwitcherDiscoverText\"\r\n        (productClick)=\"onProductClick($event)\"\r\n        >\r\n    </sds-app-switcher>\r\n\r\n    <div \r\n        class=\"ms-2\"\r\n        (click)=\"onHeaderClick()\"\r\n        [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n        >\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText"], outputs: ["productClick"] }] });
+SdsProductHomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsProductHomeComponent, selector: "sds-product-home", inputs: { logoUrl: "logoUrl", logoAltText: "logoAltText", moduleTitle: "moduleTitle", showAppSwitcher: "showAppSwitcher", appSwitcherProductCode: "appSwitcherProductCode", appSwitcherUserProductCodes: "appSwitcherUserProductCodes", appSwitcherTenantProducts: "appSwitcherTenantProducts", appSwitcherSwitchText: "appSwitcherSwitchText", appSwitcherDiscoverText: "appSwitcherDiscoverText", allowHeaderClick: "allowHeaderClick" }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick" }, ngImport: i0, template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\r\n        [productCode]=\"appSwitcherProductCode\"\r\n        [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n        [tenantProducts]=\"appSwitcherTenantProducts\"\r\n        [switchText]=\"appSwitcherSwitchText\"\r\n        [discoverText]=\"appSwitcherDiscoverText\"\r\n        (productClick)=\"onProductClick($event)\"\r\n        >\r\n    </sds-app-switcher>\r\n\r\n    <div \r\n        class=\"ms-2\"\r\n        (click)=\"onHeaderClick()\"\r\n        [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n        >\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText"], outputs: ["productClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-product-home', template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\r\n        [productCode]=\"appSwitcherProductCode\"\r\n        [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n        [tenantProducts]=\"appSwitcherTenantProducts\"\r\n        [switchText]=\"appSwitcherSwitchText\"\r\n        [discoverText]=\"appSwitcherDiscoverText\"\r\n        (productClick)=\"onProductClick($event)\"\r\n        >\r\n    </sds-app-switcher>\r\n\r\n    <div \r\n        class=\"ms-2\"\r\n        (click)=\"onHeaderClick()\"\r\n        [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n        >\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}\n"] }]
@@ -428,6 +449,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
+class SdsUserProfileTileComponent {
+    constructor() {
+        this.profile = null;
+        this.emphasizeName = true;
+        this.size = 'medium';
+    }
+}
+SdsUserProfileTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsUserProfileTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsUserProfileTileComponent, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\n<div class=\"sds-flex-row-center gap-3\">\n    <sds-avatar\n        [text]=\"profile?.name\"\n        [colorKey]=\"profile?.id\"\n        [pictureUri]=\"profile?.pictureUri\"\n        [size]=\"size === 'small' ? 2 : 3\"\n        borderColor=\"white\"\n        borderWidth=\"2\"\n    >\n    </sds-avatar>\n\n    <div \n        class=\"flex-grow-1 flex-shrink-1 text-body\"\n        [style.minWidth.px]=\"1\"\n        >\n        <span \n            class=\"sds-fs-100 text-truncate\"\n            [class.sds-fs-100]=\"size === 'medium'\"\n            [class.sds-fs-95]=\"size === 'small'\"\n            [class.sds-fw-500]=\"emphasizeName\"\n            >\n            {{profile?.name}}\n        </span>\n        <div \n            class=\"sds-fw-400 text-truncate text-gray-800\"\n            [class.sds-fs-75]=\"size === 'medium'\"\n            [class.sds-fs-75]=\"size === 'small'\"\n        >\n            {{profile?.info}}\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-profile-tile', template: "\n<div class=\"sds-flex-row-center gap-3\">\n    <sds-avatar\n        [text]=\"profile?.name\"\n        [colorKey]=\"profile?.id\"\n        [pictureUri]=\"profile?.pictureUri\"\n        [size]=\"size === 'small' ? 2 : 3\"\n        borderColor=\"white\"\n        borderWidth=\"2\"\n    >\n    </sds-avatar>\n\n    <div \n        class=\"flex-grow-1 flex-shrink-1 text-body\"\n        [style.minWidth.px]=\"1\"\n        >\n        <span \n            class=\"sds-fs-100 text-truncate\"\n            [class.sds-fs-100]=\"size === 'medium'\"\n            [class.sds-fs-95]=\"size === 'small'\"\n            [class.sds-fw-500]=\"emphasizeName\"\n            >\n            {{profile?.name}}\n        </span>\n        <div \n            class=\"sds-fw-400 text-truncate text-gray-800\"\n            [class.sds-fs-75]=\"size === 'medium'\"\n            [class.sds-fs-75]=\"size === 'small'\"\n        >\n            {{profile?.info}}\n        </div>\n    </div>\n</div>\n" }]
+        }], propDecorators: { profile: [{
+                type: Input
+            }], emphasizeName: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+class SdsUserProfileSelectorComponent {
+    constructor() {
+        this.profiles = [];
+        this.selectedProfileId = null;
+        this.selectDefaultProfileText = 'Stop Impersonation';
+        this.switchText = 'Switch to';
+        this.profileIdChange = new EventEmitter();
+        this.isSelectedOneOfProfiles = false;
+        this.SELECT_DEFAULT_PROFILE_ICON = faEyeSlash;
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedProfileId']) {
+            this.isSelectedOneOfProfiles = this.profiles.some(profile => profile.id === this.selectedProfileId);
+        }
+    }
+    selectProfile(profileId) {
+        this.profileIdChange.emit(profileId);
+    }
+    selectDefaultProfile() {
+        this.profileIdChange.emit('');
+    }
+}
+SdsUserProfileSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsUserProfileSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsUserProfileSelectorComponent, selector: "sds-user-profile-selector", inputs: { profiles: "profiles", selectedProfileId: "selectedProfileId", selectDefaultProfileText: "selectDefaultProfileText", switchText: "switchText" }, outputs: { profileIdChange: "profileIdChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"profiles && profiles.length > 0\" class=\"mx-2\">  \n    <div \n        *ngIf=\"!isSelectedOneOfProfiles\"    \n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\n\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\n\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\n            <li\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\n                *ngFor=\"let profile of profiles\"\n            >\n                <sds-user-profile-tile\n                    class=\"sds-cursor-pointer\"\n                    [profile]=\"profile\"\n                    [size]=\"'small'\"\n                    [emphasizeName]=\"false\"\n                    (click)=\"selectProfile(profile.id)\"\n                    >\n                </sds-user-profile-tile>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"isSelectedOneOfProfiles\"\n        class=\"mt-2 mb-1\">\n        <sds-user-profile-action-button\n            [text]=\"selectDefaultProfileText\"\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\n            (click)=\"selectDefaultProfile()\"\n            >\n        </sds-user-profile-action-button>\n    </div>\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SdsUserProfileTileComponent, selector: "sds-user-profile-tile", inputs: ["profile", "emphasizeName", "size"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-profile-selector', template: "<div *ngIf=\"profiles && profiles.length > 0\" class=\"mx-2\">  \n    <div \n        *ngIf=\"!isSelectedOneOfProfiles\"    \n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\n\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\n\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\n            <li\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\n                *ngFor=\"let profile of profiles\"\n            >\n                <sds-user-profile-tile\n                    class=\"sds-cursor-pointer\"\n                    [profile]=\"profile\"\n                    [size]=\"'small'\"\n                    [emphasizeName]=\"false\"\n                    (click)=\"selectProfile(profile.id)\"\n                    >\n                </sds-user-profile-tile>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"isSelectedOneOfProfiles\"\n        class=\"mt-2 mb-1\">\n        <sds-user-profile-action-button\n            [text]=\"selectDefaultProfileText\"\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\n            (click)=\"selectDefaultProfile()\"\n            >\n        </sds-user-profile-action-button>\n    </div>\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"] }]
+        }], propDecorators: { profiles: [{
+                type: Input
+            }], selectedProfileId: [{
+                type: Input
+            }], selectDefaultProfileText: [{
+                type: Input
+            }], switchText: [{
+                type: Input
+            }], profileIdChange: [{
+                type: Output
+            }] } });
 // import { NavigationGroupComponent } from './navigation-group/navigation-group.component';
 // import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';
 // import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';
@@ -440,6 +520,7 @@ const components = [
     SdsNavigationContainerComponent,
     SdsNavigationExternalLinkComponent,
     SdsNavigationUserProfileComponent,
+    SdsUserProfileSelectorComponent,
     SdsProductHomeComponent
 ];
 class SdsNavigationModule {
@@ -452,8 +533,10 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         SdsNavigationContainerComponent,
         SdsNavigationExternalLinkComponent,
         SdsNavigationUserProfileComponent,
+        SdsUserProfileSelectorComponent,
         SdsProductHomeComponent, NavigationRouteActivePipe,
-        SdsNavigationUserProfileComponent], imports: [CommonModule,
+        SdsUserProfileTileComponent,
+        SdsUserProfileActionButtonComponent], imports: [CommonModule,
         FormsModule,
         RouterModule,
         SdsAvatarModule,
@@ -461,13 +544,15 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         FontAwesomeModule,
         DxPopoverModule,
         DxScrollViewModule,
-        SdsTooltipModule], exports: [SdsNavigationGroupComponent,
+        SdsTooltipModule,
+        A11yModule], exports: [SdsNavigationGroupComponent,
         SdsNavigationRouteLinkComponent,
         SdsNavigationSeparatorComponent,
         SdsNavigationHeaderComponent,
         SdsNavigationContainerComponent,
         SdsNavigationExternalLinkComponent,
         SdsNavigationUserProfileComponent,
+        SdsUserProfileSelectorComponent,
         SdsProductHomeComponent] });
 SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, imports: [CommonModule,
         FormsModule,
@@ -477,14 +562,16 @@ SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         FontAwesomeModule,
         DxPopoverModule,
         DxScrollViewModule,
-        SdsTooltipModule] });
+        SdsTooltipModule,
+        A11yModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         ...components,
                         NavigationRouteActivePipe,
-                        SdsNavigationUserProfileComponent,
+                        SdsUserProfileTileComponent,
+                        SdsUserProfileActionButtonComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -495,7 +582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         FontAwesomeModule,
                         DxPopoverModule,
                         DxScrollViewModule,
-                        SdsTooltipModule
+                        SdsTooltipModule,
+                        A11yModule
                     ],
                     exports: [
                         ...components
@@ -507,5 +595,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent };
+export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map