@spicainternational/ngx-sds-components 7.1.0-beta.9 → 7.1.0

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

@@ -115,17 +115,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-const pipes = [SdsDatePeriodFormatPipe, SdsDateFormatPipe];
+class DateTimeRangeFormatPipe {
+    /**
+     * Formats a date range using Intl.DateTimeFormat.formatRange
+     * @param startDate - The start date of the range
+     * @param endDate - The end date of the range
+     * @param locales - Locale(s) to use for formatting (optional, defaults to browser locale)
+     * @param options - Intl.DateTimeFormatOptions for customizing the format
+     * @returns Formatted date range string
+     */
+    transform(startDate, endDate, locales, options) {
+        if (!startDate || !endDate) {
+            return '';
+        }
+        try {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            if (!options || isNaN(start.getTime()) || isNaN(end.getTime())) {
+                return '';
+            }
+            const formatter = new Intl.DateTimeFormat(locales, options);
+            const formatterWithRange = formatter;
+            if (typeof formatterWithRange.formatRange === 'function') {
+                return formatterWithRange.formatRange(start, end);
+            }
+            else {
+                return `${formatter.format(start)} - ${formatter.format(end)}`;
+            }
+        }
+        catch (error) {
+            return '';
+        }
+    }
+}
+DateTimeRangeFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimeRangeFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateTimeRangeFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateTimeRangeFormatPipe, name: "sdsDateTimeRangeFormat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimeRangeFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sdsDateTimeRangeFormat',
+                }]
+        }] });
+
+const pipes = [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe];
 class SdsDatePipesModule {
 }
 SdsDatePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsDatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, declarations: [SdsDatePeriodFormatPipe, SdsDateFormatPipe], imports: [CommonModule], exports: [SdsDatePeriodFormatPipe, SdsDateFormatPipe] });
+SdsDatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, declarations: [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe], imports: [CommonModule], exports: [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe] });
 SdsDatePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        ...pipes,
+                        ...pipes
                     ],
                     imports: [
                         CommonModule,
@@ -136,9 +178,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+/**
+ * Common Intl.DateTimeFormatOptions constants for consistent date/time formatting
+ */
+// Date formats
+const DATE_NUMERIC_MONTH_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+};
+const DATE_SHORT_MONTH_OPTIONS = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+};
+const DATE_LONG_MONTH_OPTIONS = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+};
+const DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS = Object.assign({ weekday: 'long' }, DATE_LONG_MONTH_OPTIONS);
+const DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS = Object.assign({ weekday: 'short' }, DATE_LONG_MONTH_OPTIONS);
+// export const SHORT_DATE_WITH_WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = {
+//   weekday: 'short',
+//   year: 'numeric',
+//   month: 'short',
+//   day: 'numeric'
+// };
+// // Long date formats
+// export const LONG_DATE_OPTIONS: Intl.DateTimeFormatOptions = {
+//   weekday: 'long',
+//   year: 'numeric',
+//   month: 'long',
+//   day: 'numeric'
+// };
+// Time formats
+const TIME_HOUR_NUMERIC_OPTION = {
+    hour: 'numeric',
+    minute: '2-digit'
+};
+const TIME_HOUR_2DIGIT_OPTION = {
+    hour: '2-digit',
+    minute: '2-digit'
+};
+const TIME_HOUR_NUMERIC_SECONDS_OPTION = {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit'
+};
+// export const TIME_24H_OPTIONS: Intl.DateTimeFormatOptions = {
+//   hour: '2-digit',
+//   minute: '2-digit',
+//   hour12: false
+// };
+// export const TIME_WITH_SECONDS_OPTIONS: Intl.DateTimeFormatOptions = {
+//   hour: '2-digit',
+//   minute: '2-digit',
+//   second: '2-digit',
+//   hour12: false
+// };
+// Date and time combinations
+// export const SHORT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {
+//   year: 'numeric',
+//   month: 'short',
+//   day: 'numeric',
+//   hour: 'numeric',
+//   minute: '2-digit',
+//   hour12: true
+// };
+// export const LONG_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {
+//   weekday: 'long',
+//   year: 'numeric',
+//   month: 'long',
+//   day: 'numeric',
+//   hour: 'numeric',
+//   minute: '2-digit',
+//   hour12: true
+// };
+// export const COMPACT_DATETIME_OPTIONS: Intl.DateTimeFormatOptions = {
+//   year: 'numeric',
+//   month: '2-digit',
+//   day: '2-digit',
+//   hour: '2-digit',
+//   minute: '2-digit',
+//   hour12: false
+// };
+// Time range specific formats (optimized for ranges)
+// export const TIME_RANGE_WITH_DATE_OPTIONS: Intl.DateTimeFormatOptions = {
+//   month: 'short',
+//   day: 'numeric',
+//   hour: 'numeric',
+//   minute: '2-digit',
+//   hour12: true
+// };
+// export const DATE_RANGE_MONTH_OPTIONS: Intl.DateTimeFormatOptions = {
+//   year: 'numeric',
+//   month: 'short',
+//   day: 'numeric'
+// };
+// export const DATE_RANGE_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {
+//   year: 'numeric',
+//   month: 'long'
+// };
+// Special formats
+// export const RELATIVE_DATE_OPTIONS: Intl.DateTimeFormatOptions = {
+//   weekday: 'short',
+//   month: 'short',
+//   day: 'numeric'
+// };
+// export const MONTH_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {
+//   year: 'numeric',
+//   month: 'long'
+// };
+// export const WEEKDAY_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {
+//   weekday: 'long'
+// };
+// export const YEAR_ONLY_OPTIONS: Intl.DateTimeFormatOptions = {
+//   year: 'numeric'
+// };
+// Utility object for easy access
+const DATE_TIME_FORMAT_OPTIONS = {
+    DATE_NUMERIC_MONTH: DATE_NUMERIC_MONTH_OPTIONS,
+    DATE_SHORT_MONTH: DATE_SHORT_MONTH_OPTIONS,
+    DATE_LONG_MONTH: DATE_LONG_MONTH_OPTIONS,
+    DATE_LONG_MONTH_LONG_WEEKDAY: DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS,
+    DATE_LONG_MONTH_SHORT_WEEKDAY: DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS,
+    TIME_HOUR_NUMERIC: TIME_HOUR_NUMERIC_OPTION,
+    TIME_HOUR_2DIGIT: TIME_HOUR_2DIGIT_OPTION,
+    TIME_HOUR_NUMERIC_SECONDS: TIME_HOUR_NUMERIC_SECONDS_OPTION,
+    //   SHORT_DATE_WITH_WEEKDAY: SHORT_DATE_WITH_WEEKDAY_OPTIONS,
+    // Long formats
+    //   LONG_DATE_WITH_WEEKDAY: LONG_DATE_WITH_WEEKDAY_OPTIONS,
+    // Time formats
+    //   TIME_12H: TIME_12H_OPTIONS,
+    //   TIME_24H: TIME_24H_OPTIONS,
+    //   TIME_WITH_SECONDS: TIME_WITH_SECONDS_OPTIONS,
+    // DateTime combinations
+    //   SHORT_DATETIME: SHORT_DATETIME_OPTIONS,
+    //   LONG_DATETIME: LONG_DATETIME_OPTIONS,
+    //   COMPACT_DATETIME: COMPACT_DATETIME_OPTIONS,
+    // Range specific
+    //   TIME_RANGE_WITH_DATE: TIME_RANGE_WITH_DATE_OPTIONS,
+    //   DATE_RANGE_MONTH: DATE_RANGE_MONTH_OPTIONS,
+    //   DATE_RANGE_YEAR: DATE_RANGE_YEAR_OPTIONS,
+    // Special
+    //   RELATIVE_DATE: RELATIVE_DATE_OPTIONS,
+    //   MONTH_YEAR: MONTH_YEAR_OPTIONS,
+    //   WEEKDAY_ONLY: WEEKDAY_ONLY_OPTIONS,
+    //   YEAR_ONLY: YEAR_ONLY_OPTIONS
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SdsDateFormatPipe, SdsDatePeriodFormatPipe, SdsDatePipesModule };
+export { DATE_LONG_MONTH_LONG_WEEKDAY_OPTIONS, DATE_LONG_MONTH_OPTIONS, DATE_LONG_MONTH_SHORT_WEEKDAY_OPTIONS, DATE_NUMERIC_MONTH_OPTIONS, DATE_SHORT_MONTH_OPTIONS, DATE_TIME_FORMAT_OPTIONS, DateTimeRangeFormatPipe, SdsDateFormatPipe, SdsDatePeriodFormatPipe, SdsDatePipesModule, TIME_HOUR_2DIGIT_OPTION, TIME_HOUR_NUMERIC_OPTION, TIME_HOUR_NUMERIC_SECONDS_OPTION };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map

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

@@ -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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"}
+{"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';\r\n\r\n@Pipe({\r\n    name: 'sdsDateTimeRangeFormat',\r\n})\r\nexport class DateTimeRangeFormatPipe implements PipeTransform {\r\n    /**\r\n     * Formats a date range using Intl.DateTimeFormat.formatRange\r\n     * @param startDate - The start date of the range\r\n     * @param endDate - The end date of the range\r\n     * @param locales - Locale(s) to use for formatting (optional, defaults to browser locale)\r\n     * @param options - Intl.DateTimeFormatOptions for customizing the format\r\n     * @returns Formatted date range string\r\n     */\r\n    transform(\r\n        startDate: Date | string | number,\r\n        endDate: Date | string | number,\r\n        locales: string | string[],\r\n        options: Intl.DateTimeFormatOptions\r\n    ): string {\r\n        if (!startDate || !endDate) {\r\n            return '';\r\n        }\r\n\r\n        try {\r\n            const start = new Date(startDate);\r\n            const end = new Date(endDate);\r\n\r\n            if (!options || isNaN(start.getTime()) || isNaN(end.getTime())) {\r\n                return '';\r\n            }\r\n\r\n            const formatter = new Intl.DateTimeFormat(locales, options);\r\n            const formatterWithRange = formatter as any;\r\n\r\n            if (typeof formatterWithRange.formatRange === 'function') {\r\n                return formatterWithRange.formatRange(start, end);\r\n            } else {\r\n                return `${formatter.format(start)} - ${formatter.format(end)}`;\r\n            }\r\n        } catch (error) {\r\n            return '';\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\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\nexport const TIME_HOUR_NUMERIC_SECONDS_OPTION: Intl.DateTimeFormatOptions = {\r\n  hour: 'numeric',\r\n  minute: '2-digit',\r\n  second: '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    TIME_HOUR_NUMERIC_SECONDS: TIME_HOUR_NUMERIC_SECONDS_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

@@ -295,10 +295,10 @@ class SdsUserProfileActionButtonComponent {
     }
 }
 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"] }] });
+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 \r\n    class=\"d-block text-black sds-navigation-user-profile-action-button sds-hoverable-150 sds-fs-93\"\r\n    (click)=\"onActionClick()\" \r\n>\r\n    <fa-icon\r\n        *ngIf=\"icon\"\r\n        class=\"me-2\"\r\n        [fixedWidth]=\"true\"\r\n        [size]=\"'sm'\"\r\n        [icon]=\"icon\">\r\n    </fa-icon>\r\n\r\n    <span>{{text}}</span>\r\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"] }]
+            args: [{ selector: 'sds-user-profile-action-button', template: "<a \r\n    class=\"d-block text-black sds-navigation-user-profile-action-button sds-hoverable-150 sds-fs-93\"\r\n    (click)=\"onActionClick()\" \r\n>\r\n    <fa-icon\r\n        *ngIf=\"icon\"\r\n        class=\"me-2\"\r\n        [fixedWidth]=\"true\"\r\n        [size]=\"'sm'\"\r\n        [icon]=\"icon\">\r\n    </fa-icon>\r\n\r\n    <span>{{text}}</span>\r\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: [{
@@ -355,9 +355,10 @@ class SdsNavigationUserProfileComponent {
         this.showOptions = true;
         this.showOptionsChange.emit(this.showOptions);
     }
-    toggleOptions() {
+    toggleOptions(event) {
+        event.stopPropagation();
         this.showOptions = !this.showOptions;
-        console.log(this.showOptions);
+        // console.log(this.showOptions);
         this.showOptionsChange.emit(this.showOptions);
     }
     onNotificationBadgeClick(event) {
@@ -366,10 +367,10 @@ class SdsNavigationUserProfileComponent {
     }
 }
 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", 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()\"\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"] }] });
+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\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()\"\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"] }]
+            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
             }], profileInfo: [{
@@ -418,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$2.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", "ariaLabel"], 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"] }]
@@ -456,10 +457,10 @@ class SdsUserProfileTileComponent {
     }
 }
 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"] }] });
+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: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n    <sds-avatar\r\n        [text]=\"profile?.name\"\r\n        [colorKey]=\"profile?.id\"\r\n        [pictureUri]=\"profile?.pictureUri\"\r\n        [size]=\"size === 'small' ? 2 : 3\"\r\n        borderColor=\"white\"\r\n        borderWidth=\"2\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <div \r\n        class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n        [style.minWidth.px]=\"1\"\r\n        >\r\n        <span \r\n            class=\"sds-fs-100 text-truncate\"\r\n            [class.sds-fs-100]=\"size === 'medium'\"\r\n            [class.sds-fs-95]=\"size === 'small'\"\r\n            [class.sds-fw-500]=\"emphasizeName\"\r\n            >\r\n            {{profile?.name}}\r\n        </span>\r\n        <div \r\n            class=\"sds-fw-400 text-truncate text-gray-800\"\r\n            [class.sds-fs-75]=\"size === 'medium'\"\r\n            [class.sds-fs-75]=\"size === 'small'\"\r\n        >\r\n            {{profile?.info}}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: 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" }]
+            args: [{ selector: 'sds-user-profile-tile', template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n    <sds-avatar\r\n        [text]=\"profile?.name\"\r\n        [colorKey]=\"profile?.id\"\r\n        [pictureUri]=\"profile?.pictureUri\"\r\n        [size]=\"size === 'small' ? 2 : 3\"\r\n        borderColor=\"white\"\r\n        borderWidth=\"2\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <div \r\n        class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n        [style.minWidth.px]=\"1\"\r\n        >\r\n        <span \r\n            class=\"sds-fs-100 text-truncate\"\r\n            [class.sds-fs-100]=\"size === 'medium'\"\r\n            [class.sds-fs-95]=\"size === 'small'\"\r\n            [class.sds-fw-500]=\"emphasizeName\"\r\n            >\r\n            {{profile?.name}}\r\n        </span>\r\n        <div \r\n            class=\"sds-fw-400 text-truncate text-gray-800\"\r\n            [class.sds-fs-75]=\"size === 'medium'\"\r\n            [class.sds-fs-75]=\"size === 'small'\"\r\n        >\r\n            {{profile?.info}}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], propDecorators: { profile: [{
                 type: Input
             }], emphasizeName: [{
@@ -491,10 +492,10 @@ class SdsUserProfileSelectorComponent {
     }
 }
 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"] }] });
+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\">  \r\n    <div \r\n        *ngIf=\"!isSelectedOneOfProfiles\"    \r\n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\r\n\r\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\r\n\r\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\r\n            <li\r\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\r\n                *ngFor=\"let profile of profiles\"\r\n            >\r\n                <sds-user-profile-tile\r\n                    class=\"sds-cursor-pointer\"\r\n                    [profile]=\"profile\"\r\n                    [size]=\"'small'\"\r\n                    [emphasizeName]=\"false\"\r\n                    (click)=\"selectProfile(profile.id)\"\r\n                    >\r\n                </sds-user-profile-tile>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <div \r\n        *ngIf=\"isSelectedOneOfProfiles\"\r\n        class=\"mt-2 mb-1\">\r\n        <sds-user-profile-action-button\r\n            [text]=\"selectDefaultProfileText\"\r\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\r\n            (click)=\"selectDefaultProfile()\"\r\n            >\r\n        </sds-user-profile-action-button>\r\n    </div>\r\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"] }]
+            args: [{ selector: 'sds-user-profile-selector', template: "<div *ngIf=\"profiles && profiles.length > 0\" class=\"mx-2\">  \r\n    <div \r\n        *ngIf=\"!isSelectedOneOfProfiles\"    \r\n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\r\n\r\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\r\n\r\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\r\n            <li\r\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\r\n                *ngFor=\"let profile of profiles\"\r\n            >\r\n                <sds-user-profile-tile\r\n                    class=\"sds-cursor-pointer\"\r\n                    [profile]=\"profile\"\r\n                    [size]=\"'small'\"\r\n                    [emphasizeName]=\"false\"\r\n                    (click)=\"selectProfile(profile.id)\"\r\n                    >\r\n                </sds-user-profile-tile>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <div \r\n        *ngIf=\"isSelectedOneOfProfiles\"\r\n        class=\"mt-2 mb-1\">\r\n        <sds-user-profile-action-button\r\n            [text]=\"selectDefaultProfileText\"\r\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\r\n            (click)=\"selectDefaultProfile()\"\r\n            >\r\n        </sds-user-profile-action-button>\r\n    </div>\r\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"] }]
         }], propDecorators: { profiles: [{
                 type: Input
             }], selectedProfileId: [{