@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
  1. package/esm2020/src/lib/date-pipes/date-pipes.module.mjs +5 -4
  2. package/esm2020/src/lib/date-pipes/date-time-formats.constants.mjs +150 -0
  3. package/esm2020/src/lib/date-pipes/date-time-range-format.pipe.mjs +44 -0
  4. package/esm2020/src/lib/date-pipes/public-api.mjs +3 -1
  5. package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-action-button/user-profile-action-button.component.mjs +26 -0
  6. package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-selector/user-profile-selector.component.mjs +45 -0
  7. package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-tile/user-profile-tile.component.mjs +23 -0
  8. package/esm2020/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.mjs +38 -39
  9. package/esm2020/src/lib/navigation/navigation.module.mjs +18 -6
  10. package/esm2020/src/lib/navigation/public-api.mjs +2 -1
  11. package/esm2020/src/lib/quick-info/quick-info.component.mjs +5 -3
  12. package/esm2020/src/lib/timeline/components/timeline.component.mjs +28 -8
  13. package/esm2020/src/lib/timeline/services/timeline.service.mjs +3 -3
  14. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs +190 -4
  15. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
  16. package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs +138 -50
  17. package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
  18. package/fesm2015/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +4 -2
  19. package/fesm2015/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
  20. package/fesm2015/spicainternational-ngx-sds-components-src-lib-timeline.mjs +38 -18
  21. package/fesm2015/spicainternational-ngx-sds-components-src-lib-timeline.mjs.map +1 -1
  22. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs +196 -4
  23. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
  24. package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs +138 -49
  25. package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
  26. package/fesm2020/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +4 -2
  27. package/fesm2020/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
  28. package/fesm2020/spicainternational-ngx-sds-components-src-lib-timeline.mjs +29 -9
  29. package/fesm2020/spicainternational-ngx-sds-components-src-lib-timeline.mjs.map +1 -1
  30. package/package.json +1 -1
  31. package/src/lib/date-pipes/date-pipes.module.d.ts +3 -2
  32. package/src/lib/date-pipes/date-time-formats.constants.d.ts +20 -0
  33. package/src/lib/date-pipes/date-time-range-format.pipe.d.ts +15 -0
  34. package/src/lib/date-pipes/public-api.d.ts +2 -0
  35. package/src/lib/navigation/navigation-user-profile/components/user-profile-action-button/user-profile-action-button.component.d.ts +11 -0
  36. package/src/lib/navigation/navigation-user-profile/components/user-profile-selector/user-profile-selector.component.d.ts +17 -0
  37. package/src/lib/navigation/navigation-user-profile/components/user-profile-tile/user-profile-tile.component.d.ts +9 -0
  38. package/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.d.ts +6 -8
  39. package/src/lib/navigation/navigation.module.d.ts +16 -12
  40. package/src/lib/navigation/public-api.d.ts +1 -0
  41. package/src/lib/quick-info/quick-info.component.d.ts +2 -1
  42. package/src/lib/timeline/components/timeline.component.d.ts +22 -1
  43. package/src/lib/timeline/services/timeline.service.d.ts +1 -1
@@ -4,21 +4,21 @@ import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i1$1 from '@angular/router';
6
6
  import { NavigationEnd, RouterModule } from '@angular/router';
7
- import * as i3 from '@fortawesome/angular-fontawesome';
7
+ import * as i2 from '@fortawesome/angular-fontawesome';
8
8
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
9
- import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut } from '@fortawesome/pro-regular-svg-icons';
9
+ import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faEyeSlash } from '@fortawesome/pro-regular-svg-icons';
10
10
  import { Subject, filter, takeUntil } from 'rxjs';
11
11
  import * as i4 from 'devextreme-angular/ui/popover';
12
12
  import { DxPopoverModule } from 'devextreme-angular/ui/popover';
13
13
  import * as i5 from 'devextreme-angular/ui/nested';
14
- import * as i2 from '@angular/forms';
15
- import { FormsModule } from '@angular/forms';
16
- import * as i3$1 from '@spicainternational/ngx-sds-components/src/lib/avatar';
14
+ import * as i2$1 from '@spicainternational/ngx-sds-components/src/lib/avatar';
17
15
  import { SdsAvatarModule } from '@spicainternational/ngx-sds-components/src/lib/avatar';
18
- import * as i2$1 from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
16
+ import * as i2$2 from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
19
17
  import { SdsAppSwitcherModule } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
20
18
  import { DxScrollViewModule } from 'devextreme-angular';
21
19
  import { SdsTooltipModule } from '@spicainternational/ngx-sds-components/src/lib/tooltip';
20
+ import { FormsModule } from '@angular/forms';
21
+ import { A11yModule } from '@angular/cdk/a11y';
22
22
 
23
23
  class SdsNavigationSeparatorComponent {
24
24
  constructor() { }
@@ -184,7 +184,7 @@ class SdsNavigationGroupComponent {
184
184
  }
185
185
  }
186
186
  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 });
187
- 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"] }] });
187
+ 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"] }] });
188
188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
189
189
  type: Component,
190
190
  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 {
242
242
  }
243
243
  }
244
244
  SdsNavigationExternalLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
245
- 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"] }] });
245
+ 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"] }] });
246
246
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
247
247
  type: Component,
248
248
  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
285
285
  }]
286
286
  }] });
287
287
 
288
+ class SdsUserProfileActionButtonComponent {
289
+ constructor() {
290
+ this.text = '';
291
+ this.actionClick = new EventEmitter();
292
+ }
293
+ onActionClick() {
294
+ this.actionClick.emit();
295
+ }
296
+ }
297
+ SdsUserProfileActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
298
+ 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"] }] });
299
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
300
+ type: Component,
301
+ 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"] }]
302
+ }], propDecorators: { text: [{
303
+ type: Input
304
+ }], icon: [{
305
+ type: Input
306
+ }], actionClick: [{
307
+ type: Output
308
+ }] } });
309
+
288
310
  class SdsNavigationUserProfileComponent {
289
311
  constructor() {
290
312
  this.profile = null;
291
- this.additionalProfiles = [];
292
- this.activeProfileId = null;
293
- this.activeProfileIdChange = new EventEmitter();
294
- this.activeProfileInfo = '';
313
+ this.profileInfo = '';
295
314
  this.showSignOut = true;
296
315
  this.showProfile = true;
297
- this.showTopBorder = false;
298
316
  this.signOutText = 'Sign out';
299
317
  this.profileText = 'Profile';
300
318
  this.showNotificationBadge = false;
@@ -303,64 +321,64 @@ class SdsNavigationUserProfileComponent {
303
321
  this.signOutClick = new EventEmitter();
304
322
  this.notificationBadgeClick = new EventEmitter();
305
323
  this.showOptions = false;
306
- this.activeProfile = null;
324
+ this.showOptionsChange = new EventEmitter();
307
325
  this.userProfileIcon = faUser;
308
326
  this.signOutIcon = faSignOut;
309
327
  }
310
328
  ngOnInit() { }
311
329
  ngOnChanges(changes) {
312
- if (changes['activeProfileId'] || changes['profile'] || changes['additionalProfiles']) {
313
- if (this.activeProfileId === null) {
314
- this.activeProfile = this.profile;
315
- }
316
- else if (this.activeProfileId === this.profile?.id) {
317
- this.activeProfile = this.profile;
318
- }
319
- else {
320
- this.activeProfile = this.additionalProfiles.find(profile => profile.id === this.activeProfileId) || null;
321
- }
322
- }
330
+ // if (changes['activeProfileId'] || changes['profile'] || changes['additionalProfiles']) {
331
+ // if (this.activeProfileId === null) {
332
+ // this.activeProfile = this.profile;
333
+ // } else if (this.activeProfileId === this.profile?.id) {
334
+ // this.activeProfile = this.profile;
335
+ // } else {
336
+ // this.activeProfile = this.additionalProfiles.find(profile => profile.id === this.activeProfileId) || null;
337
+ // }
338
+ // }
323
339
  }
324
340
  onProfileClick() {
325
341
  this.showOptions = false;
342
+ this.showOptionsChange.emit(this.showOptions);
326
343
  this.profileClick.emit();
327
344
  }
328
345
  onSignOutClick() {
329
346
  this.showOptions = false;
347
+ this.showOptionsChange.emit(this.showOptions);
330
348
  this.signOutClick.emit();
331
349
  }
350
+ closeOptions() {
351
+ this.showOptions = false;
352
+ this.showOptionsChange.emit(this.showOptions);
353
+ }
354
+ openOptions() {
355
+ this.showOptions = true;
356
+ this.showOptionsChange.emit(this.showOptions);
357
+ }
358
+ toggleOptions(event) {
359
+ event.stopPropagation();
360
+ this.showOptions = !this.showOptions;
361
+ // console.log(this.showOptions);
362
+ this.showOptionsChange.emit(this.showOptions);
363
+ }
332
364
  onNotificationBadgeClick(event) {
333
365
  event.stopPropagation();
334
366
  this.notificationBadgeClick.emit();
335
367
  }
336
- onActiveProfileIdChange(id) {
337
- this.activeProfileIdChange.emit(id);
338
- setTimeout(() => {
339
- this.showOptions = false;
340
- }, 100);
341
- }
342
368
  }
343
369
  SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
344
- 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"] }] });
370
+ 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"] }] });
345
371
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
346
372
  type: Component,
347
- 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"] }]
373
+ 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"] }]
348
374
  }], ctorParameters: function () { return []; }, propDecorators: { profile: [{
349
375
  type: Input
350
- }], additionalProfiles: [{
351
- type: Input
352
- }], activeProfileId: [{
353
- type: Input
354
- }], activeProfileIdChange: [{
355
- type: Output
356
- }], activeProfileInfo: [{
376
+ }], profileInfo: [{
357
377
  type: Input
358
378
  }], showSignOut: [{
359
379
  type: Input
360
380
  }], showProfile: [{
361
381
  type: Input
362
- }], showTopBorder: [{
363
- type: Input
364
382
  }], signOutText: [{
365
383
  type: Input
366
384
  }], profileText: [{
@@ -375,6 +393,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
375
393
  type: Output
376
394
  }], notificationBadgeClick: [{
377
395
  type: Output
396
+ }], showOptions: [{
397
+ type: Input
398
+ }], showOptionsChange: [{
399
+ type: Output
378
400
  }] } });
379
401
 
380
402
  class SdsProductHomeComponent {
@@ -397,7 +419,7 @@ class SdsProductHomeComponent {
397
419
  }
398
420
  }
399
421
  SdsProductHomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
400
- 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"] }] });
422
+ 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"] }] });
401
423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
402
424
  type: Component,
403
425
  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"] }]
@@ -427,6 +449,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
427
449
  type: Output
428
450
  }] } });
429
451
 
452
+ class SdsUserProfileTileComponent {
453
+ constructor() {
454
+ this.profile = null;
455
+ this.emphasizeName = true;
456
+ this.size = 'medium';
457
+ }
458
+ }
459
+ SdsUserProfileTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
460
+ 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"] }] });
461
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
462
+ type: Component,
463
+ 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" }]
464
+ }], propDecorators: { profile: [{
465
+ type: Input
466
+ }], emphasizeName: [{
467
+ type: Input
468
+ }], size: [{
469
+ type: Input
470
+ }] } });
471
+
472
+ class SdsUserProfileSelectorComponent {
473
+ constructor() {
474
+ this.profiles = [];
475
+ this.selectedProfileId = null;
476
+ this.selectDefaultProfileText = 'Stop Impersonation';
477
+ this.switchText = 'Switch to';
478
+ this.profileIdChange = new EventEmitter();
479
+ this.isSelectedOneOfProfiles = false;
480
+ this.SELECT_DEFAULT_PROFILE_ICON = faEyeSlash;
481
+ }
482
+ ngOnChanges(changes) {
483
+ if (changes['selectedProfileId']) {
484
+ this.isSelectedOneOfProfiles = this.profiles.some(profile => profile.id === this.selectedProfileId);
485
+ }
486
+ }
487
+ selectProfile(profileId) {
488
+ this.profileIdChange.emit(profileId);
489
+ }
490
+ selectDefaultProfile() {
491
+ this.profileIdChange.emit('');
492
+ }
493
+ }
494
+ SdsUserProfileSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
495
+ 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"] }] });
496
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
497
+ type: Component,
498
+ 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"] }]
499
+ }], propDecorators: { profiles: [{
500
+ type: Input
501
+ }], selectedProfileId: [{
502
+ type: Input
503
+ }], selectDefaultProfileText: [{
504
+ type: Input
505
+ }], switchText: [{
506
+ type: Input
507
+ }], profileIdChange: [{
508
+ type: Output
509
+ }] } });
510
+
430
511
  // import { NavigationGroupComponent } from './navigation-group/navigation-group.component';
431
512
  // import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';
432
513
  // import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';
@@ -439,6 +520,7 @@ const components = [
439
520
  SdsNavigationContainerComponent,
440
521
  SdsNavigationExternalLinkComponent,
441
522
  SdsNavigationUserProfileComponent,
523
+ SdsUserProfileSelectorComponent,
442
524
  SdsProductHomeComponent
443
525
  ];
444
526
  class SdsNavigationModule {
@@ -451,8 +533,10 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
451
533
  SdsNavigationContainerComponent,
452
534
  SdsNavigationExternalLinkComponent,
453
535
  SdsNavigationUserProfileComponent,
536
+ SdsUserProfileSelectorComponent,
454
537
  SdsProductHomeComponent, NavigationRouteActivePipe,
455
- SdsNavigationUserProfileComponent], imports: [CommonModule,
538
+ SdsUserProfileTileComponent,
539
+ SdsUserProfileActionButtonComponent], imports: [CommonModule,
456
540
  FormsModule,
457
541
  RouterModule,
458
542
  SdsAvatarModule,
@@ -460,13 +544,15 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
460
544
  FontAwesomeModule,
461
545
  DxPopoverModule,
462
546
  DxScrollViewModule,
463
- SdsTooltipModule], exports: [SdsNavigationGroupComponent,
547
+ SdsTooltipModule,
548
+ A11yModule], exports: [SdsNavigationGroupComponent,
464
549
  SdsNavigationRouteLinkComponent,
465
550
  SdsNavigationSeparatorComponent,
466
551
  SdsNavigationHeaderComponent,
467
552
  SdsNavigationContainerComponent,
468
553
  SdsNavigationExternalLinkComponent,
469
554
  SdsNavigationUserProfileComponent,
555
+ SdsUserProfileSelectorComponent,
470
556
  SdsProductHomeComponent] });
471
557
  SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, imports: [CommonModule,
472
558
  FormsModule,
@@ -476,14 +562,16 @@ SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
476
562
  FontAwesomeModule,
477
563
  DxPopoverModule,
478
564
  DxScrollViewModule,
479
- SdsTooltipModule] });
565
+ SdsTooltipModule,
566
+ A11yModule] });
480
567
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, decorators: [{
481
568
  type: NgModule,
482
569
  args: [{
483
570
  declarations: [
484
571
  ...components,
485
572
  NavigationRouteActivePipe,
486
- SdsNavigationUserProfileComponent,
573
+ SdsUserProfileTileComponent,
574
+ SdsUserProfileActionButtonComponent,
487
575
  ],
488
576
  imports: [
489
577
  CommonModule,
@@ -494,7 +582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
494
582
  FontAwesomeModule,
495
583
  DxPopoverModule,
496
584
  DxScrollViewModule,
497
- SdsTooltipModule
585
+ SdsTooltipModule,
586
+ A11yModule
498
587
  ],
499
588
  exports: [
500
589
  ...components
@@ -506,5 +595,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
506
595
  * Generated bundle index. Do not edit.
507
596
  */
508
597
 
509
- export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent };
598
+ export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
510
599
  //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map