@spicainternational/ngx-sds-components 7.1.0-beta.6 → 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.
- package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-action-button/user-profile-action-button.component.mjs +26 -0
- package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-selector/user-profile-selector.component.mjs +45 -0
- package/esm2020/src/lib/navigation/navigation-user-profile/components/user-profile-tile/user-profile-tile.component.mjs +23 -0
- package/esm2020/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.mjs +37 -39
- package/esm2020/src/lib/navigation/navigation.module.mjs +18 -6
- package/esm2020/src/lib/navigation/public-api.mjs +2 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs +137 -50
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs +137 -49
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/navigation/navigation-user-profile/components/user-profile-action-button/user-profile-action-button.component.d.ts +11 -0
- package/src/lib/navigation/navigation-user-profile/components/user-profile-selector/user-profile-selector.component.d.ts +17 -0
- package/src/lib/navigation/navigation-user-profile/components/user-profile-tile/user-profile-tile.component.d.ts +9 -0
- package/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.d.ts +6 -8
- package/src/lib/navigation/navigation.module.d.ts +16 -12
- package/src/lib/navigation/public-api.d.ts +1 -0
|
@@ -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
|
|
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 '@
|
|
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$
|
|
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:
|
|
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:
|
|
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.
|
|
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,63 @@ class SdsNavigationUserProfileComponent {
|
|
|
303
321
|
this.signOutClick = new EventEmitter();
|
|
304
322
|
this.notificationBadgeClick = new EventEmitter();
|
|
305
323
|
this.showOptions = false;
|
|
306
|
-
this.
|
|
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
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
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() {
|
|
359
|
+
this.showOptions = !this.showOptions;
|
|
360
|
+
console.log(this.showOptions);
|
|
361
|
+
this.showOptionsChange.emit(this.showOptions);
|
|
362
|
+
}
|
|
332
363
|
onNotificationBadgeClick(event) {
|
|
333
364
|
event.stopPropagation();
|
|
334
365
|
this.notificationBadgeClick.emit();
|
|
335
366
|
}
|
|
336
|
-
onActiveProfileIdChange(id) {
|
|
337
|
-
this.activeProfileIdChange.emit(id);
|
|
338
|
-
setTimeout(() => {
|
|
339
|
-
this.showOptions = false;
|
|
340
|
-
}, 100);
|
|
341
|
-
}
|
|
342
367
|
}
|
|
343
368
|
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",
|
|
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"] }] });
|
|
345
370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
|
|
346
371
|
type: Component,
|
|
347
|
-
args: [{ selector: 'sds-navigation-user-profile', template: "<div
|
|
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"] }]
|
|
348
373
|
}], ctorParameters: function () { return []; }, propDecorators: { profile: [{
|
|
349
374
|
type: Input
|
|
350
|
-
}],
|
|
351
|
-
type: Input
|
|
352
|
-
}], activeProfileId: [{
|
|
353
|
-
type: Input
|
|
354
|
-
}], activeProfileIdChange: [{
|
|
355
|
-
type: Output
|
|
356
|
-
}], activeProfileInfo: [{
|
|
375
|
+
}], profileInfo: [{
|
|
357
376
|
type: Input
|
|
358
377
|
}], showSignOut: [{
|
|
359
378
|
type: Input
|
|
360
379
|
}], showProfile: [{
|
|
361
380
|
type: Input
|
|
362
|
-
}], showTopBorder: [{
|
|
363
|
-
type: Input
|
|
364
381
|
}], signOutText: [{
|
|
365
382
|
type: Input
|
|
366
383
|
}], profileText: [{
|
|
@@ -375,6 +392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
375
392
|
type: Output
|
|
376
393
|
}], notificationBadgeClick: [{
|
|
377
394
|
type: Output
|
|
395
|
+
}], showOptions: [{
|
|
396
|
+
type: Input
|
|
397
|
+
}], showOptionsChange: [{
|
|
398
|
+
type: Output
|
|
378
399
|
}] } });
|
|
379
400
|
|
|
380
401
|
class SdsProductHomeComponent {
|
|
@@ -397,7 +418,7 @@ class SdsProductHomeComponent {
|
|
|
397
418
|
}
|
|
398
419
|
}
|
|
399
420
|
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$
|
|
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"] }] });
|
|
401
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
|
|
402
423
|
type: Component,
|
|
403
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"] }]
|
|
@@ -427,6 +448,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
427
448
|
type: Output
|
|
428
449
|
}] } });
|
|
429
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
|
+
|
|
430
510
|
// import { NavigationGroupComponent } from './navigation-group/navigation-group.component';
|
|
431
511
|
// import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';
|
|
432
512
|
// import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';
|
|
@@ -439,6 +519,7 @@ const components = [
|
|
|
439
519
|
SdsNavigationContainerComponent,
|
|
440
520
|
SdsNavigationExternalLinkComponent,
|
|
441
521
|
SdsNavigationUserProfileComponent,
|
|
522
|
+
SdsUserProfileSelectorComponent,
|
|
442
523
|
SdsProductHomeComponent
|
|
443
524
|
];
|
|
444
525
|
class SdsNavigationModule {
|
|
@@ -451,8 +532,10 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
451
532
|
SdsNavigationContainerComponent,
|
|
452
533
|
SdsNavigationExternalLinkComponent,
|
|
453
534
|
SdsNavigationUserProfileComponent,
|
|
535
|
+
SdsUserProfileSelectorComponent,
|
|
454
536
|
SdsProductHomeComponent, NavigationRouteActivePipe,
|
|
455
|
-
|
|
537
|
+
SdsUserProfileTileComponent,
|
|
538
|
+
SdsUserProfileActionButtonComponent], imports: [CommonModule,
|
|
456
539
|
FormsModule,
|
|
457
540
|
RouterModule,
|
|
458
541
|
SdsAvatarModule,
|
|
@@ -460,13 +543,15 @@ SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
460
543
|
FontAwesomeModule,
|
|
461
544
|
DxPopoverModule,
|
|
462
545
|
DxScrollViewModule,
|
|
463
|
-
SdsTooltipModule
|
|
546
|
+
SdsTooltipModule,
|
|
547
|
+
A11yModule], exports: [SdsNavigationGroupComponent,
|
|
464
548
|
SdsNavigationRouteLinkComponent,
|
|
465
549
|
SdsNavigationSeparatorComponent,
|
|
466
550
|
SdsNavigationHeaderComponent,
|
|
467
551
|
SdsNavigationContainerComponent,
|
|
468
552
|
SdsNavigationExternalLinkComponent,
|
|
469
553
|
SdsNavigationUserProfileComponent,
|
|
554
|
+
SdsUserProfileSelectorComponent,
|
|
470
555
|
SdsProductHomeComponent] });
|
|
471
556
|
SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, imports: [CommonModule,
|
|
472
557
|
FormsModule,
|
|
@@ -476,14 +561,16 @@ SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
476
561
|
FontAwesomeModule,
|
|
477
562
|
DxPopoverModule,
|
|
478
563
|
DxScrollViewModule,
|
|
479
|
-
SdsTooltipModule
|
|
564
|
+
SdsTooltipModule,
|
|
565
|
+
A11yModule] });
|
|
480
566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, decorators: [{
|
|
481
567
|
type: NgModule,
|
|
482
568
|
args: [{
|
|
483
569
|
declarations: [
|
|
484
570
|
...components,
|
|
485
571
|
NavigationRouteActivePipe,
|
|
486
|
-
|
|
572
|
+
SdsUserProfileTileComponent,
|
|
573
|
+
SdsUserProfileActionButtonComponent,
|
|
487
574
|
],
|
|
488
575
|
imports: [
|
|
489
576
|
CommonModule,
|
|
@@ -494,7 +581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
494
581
|
FontAwesomeModule,
|
|
495
582
|
DxPopoverModule,
|
|
496
583
|
DxScrollViewModule,
|
|
497
|
-
SdsTooltipModule
|
|
584
|
+
SdsTooltipModule,
|
|
585
|
+
A11yModule
|
|
498
586
|
],
|
|
499
587
|
exports: [
|
|
500
588
|
...components
|
|
@@ -506,5 +594,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
506
594
|
* Generated bundle index. Do not edit.
|
|
507
595
|
*/
|
|
508
596
|
|
|
509
|
-
export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent };
|
|
597
|
+
export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
|
|
510
598
|
//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map
|