@spicainternational/ngx-sds-components 7.1.0-beta.5 → 7.1.0-beta.7

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 (23) hide show
  1. package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-action-button/user-profile-action-button.component.mjs +26 -0
  2. package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-selector/user-profile-selector.component.mjs +45 -0
  3. package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-tile/user-profile-tile.component.mjs +23 -0
  4. package/esm2020/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.mjs +37 -39
  5. package/esm2020/src/lib/navigation/navigation.module.mjs +18 -6
  6. package/esm2020/src/lib/navigation/public-api.mjs +2 -1
  7. package/esm2020/src/lib/timeline/components/timeline.component.mjs +12 -3
  8. package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs +137 -50
  9. package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
  10. package/fesm2015/spicainternational-ngx-sds-components-src-lib-timeline.mjs +11 -2
  11. package/fesm2015/spicainternational-ngx-sds-components-src-lib-timeline.mjs.map +1 -1
  12. package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs +137 -49
  13. package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
  14. package/fesm2020/spicainternational-ngx-sds-components-src-lib-timeline.mjs +11 -2
  15. package/fesm2020/spicainternational-ngx-sds-components-src-lib-timeline.mjs.map +1 -1
  16. package/package.json +1 -1
  17. package/src/lib/navigation/navigation-user-profile/components/user-profile-action-button/user-profile-action-button.component.d.ts +11 -0
  18. package/src/lib/navigation/navigation-user-profile/components/user-profile-selector/user-profile-selector.component.d.ts +17 -0
  19. package/src/lib/navigation/navigation-user-profile/components/user-profile-tile/user-profile-tile.component.d.ts +9 -0
  20. package/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.d.ts +6 -8
  21. package/src/lib/navigation/navigation.module.d.ts +16 -12
  22. package/src/lib/navigation/public-api.d.ts +1 -0
  23. package/src/lib/timeline/components/timeline.component.d.ts +8 -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,65 +321,63 @@ 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
- var _a;
313
- if (changes['activeProfileId'] || changes['profile'] || changes['additionalProfiles']) {
314
- if (this.activeProfileId === null) {
315
- this.activeProfile = this.profile;
316
- }
317
- else if (this.activeProfileId === ((_a = this.profile) === null || _a === void 0 ? void 0 : _a.id)) {
318
- this.activeProfile = this.profile;
319
- }
320
- else {
321
- this.activeProfile = this.additionalProfiles.find(profile => profile.id === this.activeProfileId) || null;
322
- }
323
- }
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
+ // }
324
339
  }
325
340
  onProfileClick() {
326
341
  this.showOptions = false;
342
+ this.showOptionsChange.emit(this.showOptions);
327
343
  this.profileClick.emit();
328
344
  }
329
345
  onSignOutClick() {
330
346
  this.showOptions = false;
347
+ this.showOptionsChange.emit(this.showOptions);
331
348
  this.signOutClick.emit();
332
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() {
359
+ this.showOptions = !this.showOptions;
360
+ console.log(this.showOptions);
361
+ this.showOptionsChange.emit(this.showOptions);
362
+ }
333
363
  onNotificationBadgeClick(event) {
334
364
  event.stopPropagation();
335
365
  this.notificationBadgeClick.emit();
336
366
  }
337
- onActiveProfileIdChange(id) {
338
- this.activeProfileIdChange.emit(id);
339
- setTimeout(() => {
340
- this.showOptions = false;
341
- }, 100);
342
- }
343
367
  }
344
368
  SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
345
- 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\" [fixedWidth]=\"true\" [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\" [fixedWidth]=\"true\" [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"] }] });
369
+ 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\">\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"] }] });
346
370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
347
371
  type: Component,
348
- 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\" [fixedWidth]=\"true\" [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\" [fixedWidth]=\"true\" [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"] }]
372
+ 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\">\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"] }]
349
373
  }], ctorParameters: function () { return []; }, propDecorators: { profile: [{
350
374
  type: Input
351
- }], additionalProfiles: [{
352
- type: Input
353
- }], activeProfileId: [{
354
- type: Input
355
- }], activeProfileIdChange: [{
356
- type: Output
357
- }], activeProfileInfo: [{
375
+ }], profileInfo: [{
358
376
  type: Input
359
377
  }], showSignOut: [{
360
378
  type: Input
361
379
  }], showProfile: [{
362
380
  type: Input
363
- }], showTopBorder: [{
364
- type: Input
365
381
  }], signOutText: [{
366
382
  type: Input
367
383
  }], profileText: [{
@@ -376,6 +392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
376
392
  type: Output
377
393
  }], notificationBadgeClick: [{
378
394
  type: Output
395
+ }], showOptions: [{
396
+ type: Input
397
+ }], showOptionsChange: [{
398
+ type: Output
379
399
  }] } });
380
400
 
381
401
  class SdsProductHomeComponent {
@@ -398,7 +418,7 @@ class SdsProductHomeComponent {
398
418
  }
399
419
  }
400
420
  SdsProductHomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
401
- 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"] }] });
421
+ 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"] }] });
402
422
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
403
423
  type: Component,
404
424
  args: [{ selector: 'sds-product-home', template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n <sds-app-switcher\r\n *ngIf=\"showAppSwitcher\"\r\n class=\"app-switcher\"\r\n [productCode]=\"appSwitcherProductCode\"\r\n [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n [tenantProducts]=\"appSwitcherTenantProducts\"\r\n [switchText]=\"appSwitcherSwitchText\"\r\n [discoverText]=\"appSwitcherDiscoverText\"\r\n (productClick)=\"onProductClick($event)\"\r\n >\r\n </sds-app-switcher>\r\n\r\n <div \r\n class=\"ms-2\"\r\n (click)=\"onHeaderClick()\"\r\n [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n >\r\n <img \r\n class=\"product-logo\"\r\n [src]=\"logoUrl\" \r\n [alt]=\"logoAltText\"\r\n > \r\n <h6 \r\n *ngIf=\"moduleTitle\"\r\n class=\"mt-2\"\r\n >\r\n {{moduleTitle}}\r\n </h6>\r\n </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}\n"] }]
@@ -428,6 +448,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
428
448
  type: Output
429
449
  }] } });
430
450
 
451
+ class SdsUserProfileTileComponent {
452
+ constructor() {
453
+ this.profile = null;
454
+ this.emphasizeName = true;
455
+ this.size = 'medium';
456
+ }
457
+ }
458
+ SdsUserProfileTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
459
+ 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"] }] });
460
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
461
+ type: Component,
462
+ 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" }]
463
+ }], propDecorators: { profile: [{
464
+ type: Input
465
+ }], emphasizeName: [{
466
+ type: Input
467
+ }], size: [{
468
+ type: Input
469
+ }] } });
470
+
471
+ class SdsUserProfileSelectorComponent {
472
+ constructor() {
473
+ this.profiles = [];
474
+ this.selectedProfileId = null;
475
+ this.selectDefaultProfileText = 'Stop Impersonation';
476
+ this.switchText = 'Switch to';
477
+ this.profileIdChange = new EventEmitter();
478
+ this.isSelectedOneOfProfiles = false;
479
+ this.SELECT_DEFAULT_PROFILE_ICON = faEyeSlash;
480
+ }
481
+ ngOnChanges(changes) {
482
+ if (changes['selectedProfileId']) {
483
+ this.isSelectedOneOfProfiles = this.profiles.some(profile => profile.id === this.selectedProfileId);
484
+ }
485
+ }
486
+ selectProfile(profileId) {
487
+ this.profileIdChange.emit(profileId);
488
+ }
489
+ selectDefaultProfile() {
490
+ this.profileIdChange.emit('');
491
+ }
492
+ }
493
+ SdsUserProfileSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
494
+ 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"] }] });
495
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
496
+ type: Component,
497
+ 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"] }]
498
+ }], propDecorators: { profiles: [{
499
+ type: Input
500
+ }], selectedProfileId: [{
501
+ type: Input
502
+ }], selectDefaultProfileText: [{
503
+ type: Input
504
+ }], switchText: [{
505
+ type: Input
506
+ }], profileIdChange: [{
507
+ type: Output
508
+ }] } });
509
+
431
510
  // import { NavigationGroupComponent } from './navigation-group/navigation-group.component';
432
511
  // import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';
433
512
  // import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';
@@ -440,6 +519,7 @@ const components = [
440
519
  SdsNavigationContainerComponent,
441
520
  SdsNavigationExternalLinkComponent,
442
521
  SdsNavigationUserProfileComponent,
522
+ SdsUserProfileSelectorComponent,
443
523
  SdsProductHomeComponent
444
524
  ];
445
525
  class SdsNavigationModule {
@@ -452,8 +532,10 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
452
532
  SdsNavigationContainerComponent,
453
533
  SdsNavigationExternalLinkComponent,
454
534
  SdsNavigationUserProfileComponent,
535
+ SdsUserProfileSelectorComponent,
455
536
  SdsProductHomeComponent, NavigationRouteActivePipe,
456
- SdsNavigationUserProfileComponent], imports: [CommonModule,
537
+ SdsUserProfileTileComponent,
538
+ SdsUserProfileActionButtonComponent], imports: [CommonModule,
457
539
  FormsModule,
458
540
  RouterModule,
459
541
  SdsAvatarModule,
@@ -461,13 +543,15 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
461
543
  FontAwesomeModule,
462
544
  DxPopoverModule,
463
545
  DxScrollViewModule,
464
- SdsTooltipModule], exports: [SdsNavigationGroupComponent,
546
+ SdsTooltipModule,
547
+ A11yModule], exports: [SdsNavigationGroupComponent,
465
548
  SdsNavigationRouteLinkComponent,
466
549
  SdsNavigationSeparatorComponent,
467
550
  SdsNavigationHeaderComponent,
468
551
  SdsNavigationContainerComponent,
469
552
  SdsNavigationExternalLinkComponent,
470
553
  SdsNavigationUserProfileComponent,
554
+ SdsUserProfileSelectorComponent,
471
555
  SdsProductHomeComponent] });
472
556
  SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, imports: [CommonModule,
473
557
  FormsModule,
@@ -477,14 +561,16 @@ SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
477
561
  FontAwesomeModule,
478
562
  DxPopoverModule,
479
563
  DxScrollViewModule,
480
- SdsTooltipModule] });
564
+ SdsTooltipModule,
565
+ A11yModule] });
481
566
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, decorators: [{
482
567
  type: NgModule,
483
568
  args: [{
484
569
  declarations: [
485
570
  ...components,
486
571
  NavigationRouteActivePipe,
487
- SdsNavigationUserProfileComponent,
572
+ SdsUserProfileTileComponent,
573
+ SdsUserProfileActionButtonComponent,
488
574
  ],
489
575
  imports: [
490
576
  CommonModule,
@@ -495,7 +581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
495
581
  FontAwesomeModule,
496
582
  DxPopoverModule,
497
583
  DxScrollViewModule,
498
- SdsTooltipModule
584
+ SdsTooltipModule,
585
+ A11yModule
499
586
  ],
500
587
  exports: [
501
588
  ...components
@@ -507,5 +594,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
507
594
  * Generated bundle index. Do not edit.
508
595
  */
509
596
 
510
- export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent };
597
+ export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
511
598
  //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map