@spicainternational/ngx-sds-components 9.1.1 → 9.2.0-beta.0
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/README.md +16 -16
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-app-switcher.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-avatar.mjs +4 -4
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-avatar.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-badge.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-badge.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-callout.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-callout.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-color-picker.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-color-picker.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-date-pipes.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-drawer.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-drawer.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-duration-box.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-duration-box.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-duration-pipe.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-ellipsis.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-highlight-text.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-intersection.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-keyboard-shortcut.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-layout.mjs +10 -10
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-layout.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-message.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-message.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-modal.mjs +4 -4
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-navigation.mjs +161 -29
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-number-box.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-number-box.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-page-header.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-pane.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-ripple.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-side-bar.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-static-value.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-static-value.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-table-actions.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-timeline.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-timeline.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-timer.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-tooltip.mjs +2 -2
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-utils-date-time.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components-src-lib-utils.mjs.map +1 -1
- package/fesm2022/spicainternational-ngx-sds-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/ripple/sds-ripple.css +20 -20
- package/types/spicainternational-ngx-sds-components-src-lib-navigation.d.ts +111 -4
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, inject, computed, Component, QueryList, signal, ContentChildren, Input, EventEmitter, Output,
|
|
2
|
+
import { input, model, inject, computed, Component, QueryList, signal, ContentChildren, Input, EventEmitter, Output, output, effect, ChangeDetectionStrategy, contentChildren, untracked, Pipe } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/router';
|
|
4
4
|
import { Router, NavigationEnd, RouterLink } from '@angular/router';
|
|
5
|
-
import { NgIf, NgFor } from '@angular/common';
|
|
5
|
+
import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
|
|
6
6
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
7
7
|
import { filter, map, Subject, takeUntil } from 'rxjs';
|
|
8
|
-
import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faEyeSlash, faArrowLeftFromLine, faArrowRightFromLine } from '@fortawesome/pro-regular-svg-icons';
|
|
8
|
+
import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faCircleExclamation, faTriangleExclamation, faCircleInfo, faEyeSlash, faArrowLeftFromLine, faArrowRightFromLine } from '@fortawesome/pro-regular-svg-icons';
|
|
9
9
|
import * as i3 from 'devextreme-angular/ui/nested';
|
|
10
10
|
import { DxoPositionModule } from 'devextreme-angular/ui/nested';
|
|
11
11
|
import * as i2 from 'devextreme-angular/ui/popover';
|
|
@@ -13,6 +13,7 @@ import { DxPopoverModule } from 'devextreme-angular/ui/popover';
|
|
|
13
13
|
import * as i1$1 from '@fortawesome/angular-fontawesome';
|
|
14
14
|
import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
15
15
|
import { SdsAvatarComponent } from '@spicainternational/ngx-sds-components/src/lib/avatar';
|
|
16
|
+
import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
16
17
|
import { SdsAppSwitcherComponent } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
|
|
17
18
|
|
|
18
19
|
function removeQueryParams(url) {
|
|
@@ -122,11 +123,11 @@ class SdsNavigationRouteLinkComponent {
|
|
|
122
123
|
#currentUrl;
|
|
123
124
|
#activeRoutePatternRegExp;
|
|
124
125
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationRouteLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationRouteLinkComponent, isStandalone: true, selector: "sds-navigation-route-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, nestedLinks: { classPropertyName: "nestedLinks", publicName: "nestedLinks", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\n<div \n class=\"sds-navigation-router-link sds-navigation-item-container\"\n [class.disabled]=\"disabled()\"\n [class.active]=\"isActive()\"\n [title]=\"isCollapsed() ? text() : ''\"\n >\n \n <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \n [routerLink]=\"disabled() ? null : link()\"\n >\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\n <div class=\"sds-navigation-icon\" >\n <ng-content select=\"[navigationIcon]\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!isCollapsed()\">\n <div class=\"sds-navigation-text user-select-none\">\n {{ text() }}\n </div>\n <span *ngIf=\"additionalInfo()\"\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\n >{{ additionalInfo() }}</span\n > \n </ng-container>\n </div>\n </a>\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationRouteLinkComponent, isStandalone: true, selector: "sds-navigation-route-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, nestedLinks: { classPropertyName: "nestedLinks", publicName: "nestedLinks", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\r\n<div \r\n class=\"sds-navigation-router-link sds-navigation-item-container\"\r\n [class.disabled]=\"disabled()\"\r\n [class.active]=\"isActive()\"\r\n [title]=\"isCollapsed() ? text() : ''\"\r\n >\r\n \r\n <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \r\n [routerLink]=\"disabled() ? null : link()\"\r\n >\r\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!isCollapsed()\">\r\n <div class=\"sds-navigation-text user-select-none\">\r\n {{ text() }}\r\n </div>\r\n <span *ngIf=\"additionalInfo()\"\r\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\r\n >{{ additionalInfo() }}</span\r\n > \r\n </ng-container>\r\n </div>\r\n </a>\r\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
126
127
|
}
|
|
127
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationRouteLinkComponent, decorators: [{
|
|
128
129
|
type: Component,
|
|
129
|
-
args: [{ selector: 'sds-navigation-route-link', imports: [NgIf, RouterLink], template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\n<div \n class=\"sds-navigation-router-link sds-navigation-item-container\"\n [class.disabled]=\"disabled()\"\n [class.active]=\"isActive()\"\n [title]=\"isCollapsed() ? text() : ''\"\n >\n \n <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \n [routerLink]=\"disabled() ? null : link()\"\n >\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\n <div class=\"sds-navigation-icon\" >\n <ng-content select=\"[navigationIcon]\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!isCollapsed()\">\n <div class=\"sds-navigation-text user-select-none\">\n {{ text() }}\n </div>\n <span *ngIf=\"additionalInfo()\"\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\n >{{ additionalInfo() }}</span\n > \n </ng-container>\n </div>\n </a>\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
|
|
130
|
+
args: [{ selector: 'sds-navigation-route-link', imports: [NgIf, RouterLink], template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\r\n<div \r\n class=\"sds-navigation-router-link sds-navigation-item-container\"\r\n [class.disabled]=\"disabled()\"\r\n [class.active]=\"isActive()\"\r\n [title]=\"isCollapsed() ? text() : ''\"\r\n >\r\n \r\n <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \r\n [routerLink]=\"disabled() ? null : link()\"\r\n >\r\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!isCollapsed()\">\r\n <div class=\"sds-navigation-text user-select-none\">\r\n {{ text() }}\r\n </div>\r\n <span *ngIf=\"additionalInfo()\"\r\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\r\n >{{ additionalInfo() }}</span\r\n > \r\n </ng-container>\r\n </div>\r\n </a>\r\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
|
|
130
131
|
}], ctorParameters: () => [], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], nestedLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "nestedLinks", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], activeRoutePattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoutePattern", required: false }] }], additionalInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalInfo", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], ignoreQueryParamsInActiveRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreQueryParamsInActiveRoute", required: false }] }] } });
|
|
131
132
|
|
|
132
133
|
class SdsNavigationGroupComponent {
|
|
@@ -301,7 +302,7 @@ class SdsNavigationGroupComponent {
|
|
|
301
302
|
this.lastPointerType.set(e.pointerType ?? 'mouse');
|
|
302
303
|
}
|
|
303
304
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], usesOnChanges: true, ngImport: i0, template: "<div \n #navigationGroup\n class=\"sds-navigation-group sds-navigation-item-container d-flex\"\n [class.sds-navigation-group-light-style]=\"lightStyle()\"\n [class.flex-column-reverse]=\"reverse\"\n [class.flex-column]=\"!reverse\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isGroupActive\"\n [class.collapsed]=\"isCollapsed()\"\n [class.popoverVisible]=\"isPopoverVisible()\"\n >\n <a \n class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\n [class.collapsed]=\"isCollapsed()\"\n style=\"cursor: pointer\"\n [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\n (pointerdown)=\"rememberPointer($event)\"\n\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onClick()\"\n >\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\n <div class=\"sds-navigation-icon\" >\n <ng-content select=\"[navigationIcon]\"></ng-content>\n </div>\n \n <ng-container *ngIf=\"!isCollapsed()\">\n <div class=\"sds-navigation-text user-select-none\">\n {{ text }}\n </div>\n <span *ngIf=\"additionalInfo() && !isGroupActive\"\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\n >{{ additionalInfo() }}\n </span>\n <div class=\"text-right group-dropdown\">\n <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\n <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\n </div>\n </ng-container>\n </div>\n </a>\n\n <div \n class=\"sub-menu\" \n *ngIf=\"!isCollapsed()\">\n\n <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\n <dx-popover\n [target]=\"navigationGroup\"\n \n \n (onHiding)=\"onHiding($event)\"\n width=\"15rem\"\n [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\n [hideOnOutsideClick]=\"true\"\n [hideOnParentScroll]=\"true\"\n [animation]=\"{}\"\n [(visible)]=\"isPopoverVisible\"\n >\n\n <dxo-position\n my=\"top left\"\n at=\"top right\"\n [of]=\"navigationGroup\"\n offset=\"-10 -5\"\n >\n </dxo-position>\n\n <div *ngIf=\"showPopoverHeader && isCollapsed()\" class=\"group-header user-select-none\">\n {{ text }}\n </div>\n <div \n class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\n >\n <div class=\"sds-navigation-group-items\">\n <ng-content select=\"[popoverContent]\"></ng-content>\n </div>\n </div>\n </dx-popover>\n</ng-container>\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::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 .active{font-weight:500}::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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "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: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
|
|
305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], usesOnChanges: true, ngImport: i0, template: "<div \r\n #navigationGroup\r\n class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n [class.sds-navigation-group-light-style]=\"lightStyle()\"\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 [class.collapsed]=\"isCollapsed()\"\r\n [class.popoverVisible]=\"isPopoverVisible()\"\r\n >\r\n <a \r\n class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n [class.collapsed]=\"isCollapsed()\"\r\n style=\"cursor: pointer\"\r\n [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\r\n (pointerdown)=\"rememberPointer($event)\"\r\n\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"onClick()\"\r\n >\r\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n \r\n <ng-container *ngIf=\"!isCollapsed()\">\r\n <div class=\"sds-navigation-text user-select-none\">\r\n {{ text }}\r\n </div>\r\n <span *ngIf=\"additionalInfo() && !isGroupActive\"\r\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\r\n >{{ additionalInfo() }}\r\n </span>\r\n <div class=\"text-right group-dropdown\">\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 </ng-container>\r\n </div>\r\n </a>\r\n\r\n <div \r\n class=\"sub-menu\" \r\n *ngIf=\"!isCollapsed()\">\r\n\r\n <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n <dx-popover\r\n [target]=\"navigationGroup\"\r\n \r\n \r\n (onHiding)=\"onHiding($event)\"\r\n width=\"15rem\"\r\n [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\r\n [hideOnOutsideClick]=\"true\"\r\n [hideOnParentScroll]=\"true\"\r\n [animation]=\"{}\"\r\n [(visible)]=\"isPopoverVisible\"\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=\"-10 -5\"\r\n >\r\n </dxo-position>\r\n\r\n <div *ngIf=\"showPopoverHeader && isCollapsed()\" 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: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::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 .active{font-weight:500}::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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "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: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
|
|
305
306
|
}
|
|
306
307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
|
|
307
308
|
type: Component,
|
|
@@ -311,7 +312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
311
312
|
FaIconComponent,
|
|
312
313
|
DxPopoverModule,
|
|
313
314
|
DxoPositionModule
|
|
314
|
-
], template: "<div \n #navigationGroup\n class=\"sds-navigation-group sds-navigation-item-container d-flex\"\n [class.sds-navigation-group-light-style]=\"lightStyle()\"\n [class.flex-column-reverse]=\"reverse\"\n [class.flex-column]=\"!reverse\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isGroupActive\"\n [class.collapsed]=\"isCollapsed()\"\n [class.popoverVisible]=\"isPopoverVisible()\"\n >\n <a \n class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\n [class.collapsed]=\"isCollapsed()\"\n style=\"cursor: pointer\"\n [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\n (pointerdown)=\"rememberPointer($event)\"\n\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onClick()\"\n >\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\n <div class=\"sds-navigation-icon\" >\n <ng-content select=\"[navigationIcon]\"></ng-content>\n </div>\n \n <ng-container *ngIf=\"!isCollapsed()\">\n <div class=\"sds-navigation-text user-select-none\">\n {{ text }}\n </div>\n <span *ngIf=\"additionalInfo() && !isGroupActive\"\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\n >{{ additionalInfo() }}\n </span>\n <div class=\"text-right group-dropdown\">\n <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\n <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\n </div>\n </ng-container>\n </div>\n </a>\n\n <div \n class=\"sub-menu\" \n *ngIf=\"!isCollapsed()\">\n\n <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\n <dx-popover\n [target]=\"navigationGroup\"\n \n \n (onHiding)=\"onHiding($event)\"\n width=\"15rem\"\n [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\n [hideOnOutsideClick]=\"true\"\n [hideOnParentScroll]=\"true\"\n [animation]=\"{}\"\n [(visible)]=\"isPopoverVisible\"\n >\n\n <dxo-position\n my=\"top left\"\n at=\"top right\"\n [of]=\"navigationGroup\"\n offset=\"-10 -5\"\n >\n </dxo-position>\n\n <div *ngIf=\"showPopoverHeader && isCollapsed()\" class=\"group-header user-select-none\">\n {{ text }}\n </div>\n <div \n class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\n >\n <div class=\"sds-navigation-group-items\">\n <ng-content select=\"[popoverContent]\"></ng-content>\n </div>\n </div>\n </dx-popover>\n</ng-container>\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::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 .active{font-weight:500}::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"] }]
|
|
315
|
+
], template: "<div \r\n #navigationGroup\r\n class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n [class.sds-navigation-group-light-style]=\"lightStyle()\"\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 [class.collapsed]=\"isCollapsed()\"\r\n [class.popoverVisible]=\"isPopoverVisible()\"\r\n >\r\n <a \r\n class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n [class.collapsed]=\"isCollapsed()\"\r\n style=\"cursor: pointer\"\r\n [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\r\n (pointerdown)=\"rememberPointer($event)\"\r\n\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (click)=\"onClick()\"\r\n >\r\n <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n \r\n <ng-container *ngIf=\"!isCollapsed()\">\r\n <div class=\"sds-navigation-text user-select-none\">\r\n {{ text }}\r\n </div>\r\n <span *ngIf=\"additionalInfo() && !isGroupActive\"\r\n class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\r\n >{{ additionalInfo() }}\r\n </span>\r\n <div class=\"text-right group-dropdown\">\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 </ng-container>\r\n </div>\r\n </a>\r\n\r\n <div \r\n class=\"sub-menu\" \r\n *ngIf=\"!isCollapsed()\">\r\n\r\n <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n <dx-popover\r\n [target]=\"navigationGroup\"\r\n \r\n \r\n (onHiding)=\"onHiding($event)\"\r\n width=\"15rem\"\r\n [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\r\n [hideOnOutsideClick]=\"true\"\r\n [hideOnParentScroll]=\"true\"\r\n [animation]=\"{}\"\r\n [(visible)]=\"isPopoverVisible\"\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=\"-10 -5\"\r\n >\r\n </dxo-position>\r\n\r\n <div *ngIf=\"showPopoverHeader && isCollapsed()\" 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: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::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 .active{font-weight:500}::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"] }]
|
|
315
316
|
}], ctorParameters: () => [{ type: i1.Router }], propDecorators: { navigationGroupNestedRoutes: [{
|
|
316
317
|
type: Input
|
|
317
318
|
}], text: [{
|
|
@@ -341,11 +342,11 @@ class SdsNavigationSeparatorComponent {
|
|
|
341
342
|
}
|
|
342
343
|
ngOnInit() { }
|
|
343
344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
344
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationSeparatorComponent, isStandalone: true, selector: "sds-navigation-separator", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n class=\"sds-navigation-separator nav-separator\">\n</div>\n", styles: [""] }); }
|
|
345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationSeparatorComponent, isStandalone: true, selector: "sds-navigation-separator", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n class=\"sds-navigation-separator nav-separator\">\r\n</div>\r\n", styles: [""] }); }
|
|
345
346
|
}
|
|
346
347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationSeparatorComponent, decorators: [{
|
|
347
348
|
type: Component,
|
|
348
|
-
args: [{ selector: 'sds-navigation-separator', standalone: true, template: "<div \n class=\"sds-navigation-separator nav-separator\">\n</div>\n" }]
|
|
349
|
+
args: [{ selector: 'sds-navigation-separator', standalone: true, template: "<div \r\n class=\"sds-navigation-separator nav-separator\">\r\n</div>\r\n" }]
|
|
349
350
|
}], ctorParameters: () => [], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
|
|
350
351
|
|
|
351
352
|
class SdsNavigationHeaderComponent {
|
|
@@ -355,13 +356,13 @@ class SdsNavigationHeaderComponent {
|
|
|
355
356
|
}
|
|
356
357
|
ngOnInit() { }
|
|
357
358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationHeaderComponent, isStandalone: true, selector: "sds-navigation-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "\n<div class=\"sds-navigation-header text-gray-800\">\n <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationHeaderComponent, isStandalone: true, selector: "sds-navigation-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "\r\n<div class=\"sds-navigation-header text-gray-800\">\r\n <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
359
360
|
}
|
|
360
361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationHeaderComponent, decorators: [{
|
|
361
362
|
type: Component,
|
|
362
363
|
args: [{ selector: 'sds-navigation-header', imports: [
|
|
363
364
|
NgIf
|
|
364
|
-
], template: "\n<div class=\"sds-navigation-header text-gray-800\">\n <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\n</div>\n" }]
|
|
365
|
+
], template: "\r\n<div class=\"sds-navigation-header text-gray-800\">\r\n <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\r\n</div>\r\n" }]
|
|
365
366
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
366
367
|
type: Input
|
|
367
368
|
}], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
|
|
@@ -377,11 +378,11 @@ class SdsNavigationExternalLinkComponent {
|
|
|
377
378
|
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
378
379
|
}
|
|
379
380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationExternalLinkComponent, isStandalone: true, selector: "sds-navigation-external-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: false, isRequired: false, transformFunction: null }, externalLinkHint: { classPropertyName: "externalLinkHint", publicName: "externalLinkHint", isSignal: false, isRequired: false, transformFunction: null }, showExternalLinkIcon: { classPropertyName: "showExternalLinkIcon", publicName: "showExternalLinkIcon", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n class=\"sds-navigation-external-link sds-navigation-item-container\"\n [title]=\"isCollapsed() ? text : ''\"\n >\n <a\n class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\n [attr.href]=\"link || null\"\n [attr.target]=\"tabName || null\"\n [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\n >\n <div class=\"d-flex align-items-center justify-content-center position-relative\">\n <div class=\"sds-navigation-icon\" >\n <ng-content select=\"[navigationIcon]\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!isCollapsed()\">\n \n <div class=\"sds-navigation-text\">\n <span>{{ text }}</span>\n </div>\n\n <div \n class=\"sds-navigation-external-link-info-container\">\n <fa-icon \n class=\"sds-navigation-external-link-info-icon\"\n *ngIf=\"showExternalLinkIcon\"\n\n [icon]=\"externalLinkIcon\"\n [size]=\"'xs'\"\n [title]=\"externalLinkHint\"\n >\n </fa-icon>\n </div> \n </ng-container>\n \n <ng-content></ng-content>\n\n </div>\n </a>\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
|
|
381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationExternalLinkComponent, isStandalone: true, selector: "sds-navigation-external-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: false, isRequired: false, transformFunction: null }, externalLinkHint: { classPropertyName: "externalLinkHint", publicName: "externalLinkHint", isSignal: false, isRequired: false, transformFunction: null }, showExternalLinkIcon: { classPropertyName: "showExternalLinkIcon", publicName: "showExternalLinkIcon", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n class=\"sds-navigation-external-link sds-navigation-item-container\"\r\n [title]=\"isCollapsed() ? text : ''\"\r\n >\r\n <a\r\n class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\r\n [attr.href]=\"link || null\"\r\n [attr.target]=\"tabName || null\"\r\n [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\r\n >\r\n <div class=\"d-flex align-items-center justify-content-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 <ng-container *ngIf=\"!isCollapsed()\">\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 </ng-container>\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}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
|
|
381
382
|
}
|
|
382
383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
|
|
383
384
|
type: Component,
|
|
384
|
-
args: [{ selector: 'sds-navigation-external-link', imports: [NgIf, FaIconComponent], template: "<div \n class=\"sds-navigation-external-link sds-navigation-item-container\"\n [title]=\"isCollapsed() ? text : ''\"\n >\n <a\n class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\n [attr.href]=\"link || null\"\n [attr.target]=\"tabName || null\"\n [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\n >\n <div class=\"d-flex align-items-center justify-content-center position-relative\">\n <div class=\"sds-navigation-icon\" >\n <ng-content select=\"[navigationIcon]\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!isCollapsed()\">\n \n <div class=\"sds-navigation-text\">\n <span>{{ text }}</span>\n </div>\n\n <div \n class=\"sds-navigation-external-link-info-container\">\n <fa-icon \n class=\"sds-navigation-external-link-info-icon\"\n *ngIf=\"showExternalLinkIcon\"\n\n [icon]=\"externalLinkIcon\"\n [size]=\"'xs'\"\n [title]=\"externalLinkHint\"\n >\n </fa-icon>\n </div> \n </ng-container>\n \n <ng-content></ng-content>\n\n </div>\n </a>\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
|
|
385
|
+
args: [{ selector: 'sds-navigation-external-link', imports: [NgIf, FaIconComponent], template: "<div \r\n class=\"sds-navigation-external-link sds-navigation-item-container\"\r\n [title]=\"isCollapsed() ? text : ''\"\r\n >\r\n <a\r\n class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\r\n [attr.href]=\"link || null\"\r\n [attr.target]=\"tabName || null\"\r\n [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\r\n >\r\n <div class=\"d-flex align-items-center justify-content-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 <ng-container *ngIf=\"!isCollapsed()\">\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 </ng-container>\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}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
|
|
385
386
|
}], propDecorators: { link: [{
|
|
386
387
|
type: Input
|
|
387
388
|
}], text: [{
|
|
@@ -399,13 +400,13 @@ class SdsNavigationCollapsibleFrameComponent {
|
|
|
399
400
|
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
400
401
|
}
|
|
401
402
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationCollapsibleFrameComponent, isStandalone: true, selector: "sds-navigation-collapsible-frame", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<ng-container *ngIf=\"!isCollapsed()\">\n <ng-content></ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"isCollapsed()\">\n <ng-content select=\"[collapsed]\"></ng-content>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationCollapsibleFrameComponent, isStandalone: true, selector: "sds-navigation-collapsible-frame", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<ng-container *ngIf=\"!isCollapsed()\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isCollapsed()\">\r\n <ng-content select=\"[collapsed]\"></ng-content>\r\n</ng-container>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
403
404
|
}
|
|
404
405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, decorators: [{
|
|
405
406
|
type: Component,
|
|
406
407
|
args: [{ selector: 'sds-navigation-collapsible-frame', imports: [
|
|
407
408
|
NgIf
|
|
408
|
-
], template: "<ng-container *ngIf=\"!isCollapsed()\">\n <ng-content></ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"isCollapsed()\">\n <ng-content select=\"[collapsed]\"></ng-content>\n</ng-container>\n\n" }]
|
|
409
|
+
], template: "<ng-container *ngIf=\"!isCollapsed()\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isCollapsed()\">\r\n <ng-content select=\"[collapsed]\"></ng-content>\r\n</ng-container>\r\n\r\n" }]
|
|
409
410
|
}], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
|
|
410
411
|
|
|
411
412
|
class SdsUserProfileActionButtonComponent {
|
|
@@ -417,14 +418,14 @@ class SdsUserProfileActionButtonComponent {
|
|
|
417
418
|
this.actionClick.emit();
|
|
418
419
|
}
|
|
419
420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileActionButtonComponent, isStandalone: true, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \n class=\"\n d-block \n text-black \n sds-navigation-user-profile-action-button \n sds-hoverable-150 \n sds-fs-93 \n sds-cursor-pointer\n \"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
|
|
421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileActionButtonComponent, isStandalone: true, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \r\n class=\"\r\n d-block \r\n text-black \r\n sds-navigation-user-profile-action-button \r\n sds-hoverable-150 \r\n sds-fs-93 \r\n sds-cursor-pointer\r\n \"\r\n (click)=\"onActionClick()\" \r\n>\r\n <fa-icon\r\n *ngIf=\"icon\"\r\n class=\"me-2\"\r\n [fixedWidth]=\"true\"\r\n [size]=\"'sm'\"\r\n [icon]=\"icon\">\r\n </fa-icon>\r\n\r\n <span>{{text}}</span>\r\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
|
|
421
422
|
}
|
|
422
423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
|
|
423
424
|
type: Component,
|
|
424
425
|
args: [{ selector: 'sds-user-profile-action-button', imports: [
|
|
425
426
|
NgIf,
|
|
426
427
|
FontAwesomeModule
|
|
427
|
-
], template: "<a \n class=\"\n d-block \n text-black \n sds-navigation-user-profile-action-button \n sds-hoverable-150 \n sds-fs-93 \n sds-cursor-pointer\n \"\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"] }]
|
|
428
|
+
], template: "<a \r\n class=\"\r\n d-block \r\n text-black \r\n sds-navigation-user-profile-action-button \r\n sds-hoverable-150 \r\n sds-fs-93 \r\n sds-cursor-pointer\r\n \"\r\n (click)=\"onActionClick()\" \r\n>\r\n <fa-icon\r\n *ngIf=\"icon\"\r\n class=\"me-2\"\r\n [fixedWidth]=\"true\"\r\n [size]=\"'sm'\"\r\n [icon]=\"icon\">\r\n </fa-icon>\r\n\r\n <span>{{text}}</span>\r\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"] }]
|
|
428
429
|
}], propDecorators: { text: [{
|
|
429
430
|
type: Input
|
|
430
431
|
}], icon: [{
|
|
@@ -494,7 +495,7 @@ class SdsNavigationUserProfileComponent {
|
|
|
494
495
|
this.notificationBadgeClick.emit();
|
|
495
496
|
}
|
|
496
497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"\n d-flex\n flex-row\n align-items-center\n gap-2\n sds-navigation-user-profile-container\n user-select-none\n mb-1 ms-1 me-1 mt-2\n pt-1 pb-1 ps-2\n sds-hoverable\n sds-rounded-2\n \"\n (click)=\"toggleOptions($event)\"\n>\n <div \n #popoverTarget\n class=\"\n position-relative\n\n \">\n <sds-avatar\n [text]=\"profile?.name\"\n [colorKey]=\"profile?.id\"\n [pictureUri]=\"profile?.pictureUri\"\n >\n </sds-avatar>\n\n <span\n *ngIf=\"showNotificationBadge\"\n class=\"\n position-absolute\n notification-badge\n translate-middle\n bg-danger\n border border-light\n rounded-circle\n \"\n (click)=\"onNotificationBadgeClick($event)\"\n >\n <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\n </span>\n </div>\n\n @if(!isCollapsed()) {\n <div class=\"sds-flex-column\">\n <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\n {{ profile?.name }}\n </span>\n\n <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\n {{ profileInfo }}\n </span>\n </div>\n }\n</div>\n\n<dx-popover\n [target]=\"popoverTarget\"\n [position]=\"{ my: 'left bottom', at: 'left top' }\"\n collision=\"fit none\"\n minWidth=\"20rem\"\n maxWidth=\"20rem\"\n [(visible)]=\"showOptions\"\n [wrapperAttr]=\"{\n class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\n }\"\n>\n <div class=\"py-2 pb-3 main-profile-container border-bottom\">\n\n <div class=\"sds-flex-column align-items-center\">\n <sds-avatar\n [text]=\"profile?.name\"\n [colorKey]=\"profile?.id\"\n [pictureUri]=\"profile?.pictureUri\"\n [size]=\"7\"\n >\n </sds-avatar>\n\n <h5 class=\"text-center mt-2 px-3\">\n {{profile?.name}}\n </h5>\n\n <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\n {{profile?.info}}\n </div>\n \n </div>\n\n </div>\n\n <ng-content></ng-content>\n\n <ul\n class=\"\n list-unstyled\n sds-navigation-user-profile-actions\n mb-0\n sds-ul-gap-1\n mx-2\n mb-2\n \"\n >\n <li *ngIf=\"showProfile\">\n <sds-user-profile-action-button\n [text]=\"profileText\"\n [icon]=\"userProfileIcon\"\n (actionClick)=\"onProfileClick()\"\n >\n </sds-user-profile-action-button>\n </li>\n\n <li *ngIf=\"showSignOut\">\n <sds-user-profile-action-button\n [text]=\"signOutText\"\n [icon]=\"signOutIcon\"\n (actionClick)=\"onSignOutClick()\"\n >\n </sds-user-profile-action-button>\n </li>\n </ul>\n</dx-popover>\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: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
|
|
498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, 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 mb-1 ms-1 me-1 mt-2\r\n pt-1 pb-1 ps-2\r\n sds-hoverable\r\n sds-rounded-2\r\n \"\r\n (click)=\"toggleOptions($event)\"\r\n>\r\n <div \r\n #popoverTarget\r\n class=\"\r\n position-relative\r\n\r\n \">\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 @if(!isCollapsed()) {\r\n <div class=\"sds-flex-column\">\r\n <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\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 }\r\n</div>\r\n\r\n<dx-popover\r\n [target]=\"popoverTarget\"\r\n [position]=\"{ my: 'left bottom', at: 'left top' }\"\r\n collision=\"fit none\"\r\n minWidth=\"20rem\"\r\n maxWidth=\"20rem\"\r\n [(visible)]=\"showOptions\"\r\n [wrapperAttr]=\"{\r\n class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\r\n }\"\r\n>\r\n <div class=\"py-2 pb-3 main-profile-container border-bottom\">\r\n\r\n <div class=\"sds-flex-column align-items-center\">\r\n <sds-avatar\r\n [text]=\"profile?.name\"\r\n [colorKey]=\"profile?.id\"\r\n [pictureUri]=\"profile?.pictureUri\"\r\n [size]=\"7\"\r\n >\r\n </sds-avatar>\r\n\r\n <h5 class=\"text-center mt-2 px-3\">\r\n {{profile?.name}}\r\n </h5>\r\n\r\n <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\r\n {{profile?.info}}\r\n </div>\r\n \r\n </div>\r\n\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n <ul\r\n class=\"\r\n list-unstyled\r\n sds-navigation-user-profile-actions\r\n mb-0\r\n sds-ul-gap-1\r\n mx-2\r\n mb-2\r\n \"\r\n >\r\n <li *ngIf=\"showProfile\">\r\n <sds-user-profile-action-button\r\n [text]=\"profileText\"\r\n [icon]=\"userProfileIcon\"\r\n (actionClick)=\"onProfileClick()\"\r\n >\r\n </sds-user-profile-action-button>\r\n </li>\r\n\r\n <li *ngIf=\"showSignOut\">\r\n <sds-user-profile-action-button\r\n [text]=\"signOutText\"\r\n [icon]=\"signOutIcon\"\r\n (actionClick)=\"onSignOutClick()\"\r\n >\r\n </sds-user-profile-action-button>\r\n </li>\r\n </ul>\r\n</dx-popover>\r\n", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.main-profile-container{margin:.5rem}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:0!important;font-size:1rem}\n"], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
|
|
498
499
|
}
|
|
499
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
|
|
500
501
|
type: Component,
|
|
@@ -503,7 +504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
503
504
|
SdsUserProfileActionButtonComponent,
|
|
504
505
|
NgIf,
|
|
505
506
|
DxPopoverModule,
|
|
506
|
-
], template: "<div\n class=\"\n d-flex\n flex-row\n align-items-center\n gap-2\n sds-navigation-user-profile-container\n user-select-none\n mb-1 ms-1 me-1 mt-2\n pt-1 pb-1 ps-2\n sds-hoverable\n sds-rounded-2\n \"\n (click)=\"toggleOptions($event)\"\n>\n <div \n #popoverTarget\n class=\"\n position-relative\n\n \">\n <sds-avatar\n [text]=\"profile?.name\"\n [colorKey]=\"profile?.id\"\n [pictureUri]=\"profile?.pictureUri\"\n >\n </sds-avatar>\n\n <span\n *ngIf=\"showNotificationBadge\"\n class=\"\n position-absolute\n notification-badge\n translate-middle\n bg-danger\n border border-light\n rounded-circle\n \"\n (click)=\"onNotificationBadgeClick($event)\"\n >\n <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\n </span>\n </div>\n\n @if(!isCollapsed()) {\n <div class=\"sds-flex-column\">\n <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\n {{ profile?.name }}\n </span>\n\n <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\n {{ profileInfo }}\n </span>\n </div>\n }\n</div>\n\n<dx-popover\n [target]=\"popoverTarget\"\n [position]=\"{ my: 'left bottom', at: 'left top' }\"\n collision=\"fit none\"\n minWidth=\"20rem\"\n maxWidth=\"20rem\"\n [(visible)]=\"showOptions\"\n [wrapperAttr]=\"{\n class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\n }\"\n>\n <div class=\"py-2 pb-3 main-profile-container border-bottom\">\n\n <div class=\"sds-flex-column align-items-center\">\n <sds-avatar\n [text]=\"profile?.name\"\n [colorKey]=\"profile?.id\"\n [pictureUri]=\"profile?.pictureUri\"\n [size]=\"7\"\n >\n </sds-avatar>\n\n <h5 class=\"text-center mt-2 px-3\">\n {{profile?.name}}\n </h5>\n\n <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\n {{profile?.info}}\n </div>\n \n </div>\n\n </div>\n\n <ng-content></ng-content>\n\n <ul\n class=\"\n list-unstyled\n sds-navigation-user-profile-actions\n mb-0\n sds-ul-gap-1\n mx-2\n mb-2\n \"\n >\n <li *ngIf=\"showProfile\">\n <sds-user-profile-action-button\n [text]=\"profileText\"\n [icon]=\"userProfileIcon\"\n (actionClick)=\"onProfileClick()\"\n >\n </sds-user-profile-action-button>\n </li>\n\n <li *ngIf=\"showSignOut\">\n <sds-user-profile-action-button\n [text]=\"signOutText\"\n [icon]=\"signOutIcon\"\n (actionClick)=\"onSignOutClick()\"\n >\n </sds-user-profile-action-button>\n </li>\n </ul>\n</dx-popover>\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"] }]
|
|
507
|
+
], 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 mb-1 ms-1 me-1 mt-2\r\n pt-1 pb-1 ps-2\r\n sds-hoverable\r\n sds-rounded-2\r\n \"\r\n (click)=\"toggleOptions($event)\"\r\n>\r\n <div \r\n #popoverTarget\r\n class=\"\r\n position-relative\r\n\r\n \">\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 @if(!isCollapsed()) {\r\n <div class=\"sds-flex-column\">\r\n <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\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 }\r\n</div>\r\n\r\n<dx-popover\r\n [target]=\"popoverTarget\"\r\n [position]=\"{ my: 'left bottom', at: 'left top' }\"\r\n collision=\"fit none\"\r\n minWidth=\"20rem\"\r\n maxWidth=\"20rem\"\r\n [(visible)]=\"showOptions\"\r\n [wrapperAttr]=\"{\r\n class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\r\n }\"\r\n>\r\n <div class=\"py-2 pb-3 main-profile-container border-bottom\">\r\n\r\n <div class=\"sds-flex-column align-items-center\">\r\n <sds-avatar\r\n [text]=\"profile?.name\"\r\n [colorKey]=\"profile?.id\"\r\n [pictureUri]=\"profile?.pictureUri\"\r\n [size]=\"7\"\r\n >\r\n </sds-avatar>\r\n\r\n <h5 class=\"text-center mt-2 px-3\">\r\n {{profile?.name}}\r\n </h5>\r\n\r\n <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\r\n {{profile?.info}}\r\n </div>\r\n \r\n </div>\r\n\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n <ul\r\n class=\"\r\n list-unstyled\r\n sds-navigation-user-profile-actions\r\n mb-0\r\n sds-ul-gap-1\r\n mx-2\r\n mb-2\r\n \"\r\n >\r\n <li *ngIf=\"showProfile\">\r\n <sds-user-profile-action-button\r\n [text]=\"profileText\"\r\n [icon]=\"userProfileIcon\"\r\n (actionClick)=\"onProfileClick()\"\r\n >\r\n </sds-user-profile-action-button>\r\n </li>\r\n\r\n <li *ngIf=\"showSignOut\">\r\n <sds-user-profile-action-button\r\n [text]=\"signOutText\"\r\n [icon]=\"signOutIcon\"\r\n (actionClick)=\"onSignOutClick()\"\r\n >\r\n </sds-user-profile-action-button>\r\n </li>\r\n </ul>\r\n</dx-popover>\r\n", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.main-profile-container{margin:.5rem}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:0!important;font-size:1rem}\n"] }]
|
|
507
508
|
}], ctorParameters: () => [], propDecorators: { profile: [{
|
|
508
509
|
type: Input
|
|
509
510
|
}], profileInfo: [{
|
|
@@ -532,6 +533,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
532
533
|
type: Output
|
|
533
534
|
}], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], sideBarInstanceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideBarInstanceName", required: false }] }] } });
|
|
534
535
|
|
|
536
|
+
const DEFAULT_ICONS = {
|
|
537
|
+
info: faCircleInfo,
|
|
538
|
+
warning: faTriangleExclamation,
|
|
539
|
+
danger: faCircleExclamation,
|
|
540
|
+
};
|
|
541
|
+
/**
|
|
542
|
+
* Generic sidebar message: icon + title + description + an optional action. Carries no
|
|
543
|
+
* knowledge of what it's displaying (trial status, payment issues, announcements, ...) - callers
|
|
544
|
+
* pass in already-resolved text.
|
|
545
|
+
*
|
|
546
|
+
* The action is either a button (handle `actionClicked`) or, when `actionLink` is set, a router
|
|
547
|
+
* link that navigates on its own. When the navigation is collapsed the callout is either hidden
|
|
548
|
+
* or shown as an icon that opens the full callout in a popup (see `collapsedMode`).
|
|
549
|
+
*
|
|
550
|
+
* Colors are CSS custom properties derived from the base color `--sds-navigation-callout-color`
|
|
551
|
+
* (set by `variant`); override the base or any of the derived ones:
|
|
552
|
+
* `--sds-navigation-callout-bg`, `-border`, `-title` (also the icon), `-description`, `-action`.
|
|
553
|
+
*
|
|
554
|
+
* @example
|
|
555
|
+
* <!-- Action button -->
|
|
556
|
+
* <sds-navigation-callout
|
|
557
|
+
* variant="warning"
|
|
558
|
+
* title="Trial ends today"
|
|
559
|
+
* description="Choose a plan to keep using the app."
|
|
560
|
+
* actionText="Upgrade to paid"
|
|
561
|
+
* (actionClicked)="openUpgradeDialog()">
|
|
562
|
+
* </sds-navigation-callout>
|
|
563
|
+
*
|
|
564
|
+
* <!-- Redirect -->
|
|
565
|
+
* <sds-navigation-callout
|
|
566
|
+
* variant="danger"
|
|
567
|
+
* title="Payment failed"
|
|
568
|
+
* description="Pay the invoice to keep your subscription."
|
|
569
|
+
* actionText="Go to billing page"
|
|
570
|
+
* actionLink="/billing">
|
|
571
|
+
* </sds-navigation-callout>
|
|
572
|
+
*/
|
|
573
|
+
class SdsNavigationCalloutComponent {
|
|
574
|
+
constructor() {
|
|
575
|
+
/**
|
|
576
|
+
* Required. Color scheme and default icon:
|
|
577
|
+
* `info` (`--bs-primary`), `warning` (`--bs-orange`) or `danger` (`--bs-pink`).
|
|
578
|
+
*/
|
|
579
|
+
this.variant = input.required(...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
580
|
+
/**
|
|
581
|
+
* Font Awesome icon shown next to the title (and as the collapsed icon).
|
|
582
|
+
* Falls back to the default icon of the `variant` when not provided.
|
|
583
|
+
* @default null
|
|
584
|
+
*/
|
|
585
|
+
this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
586
|
+
/** Required. Title shown next to the icon. Displayed as given - pass already translated text. */
|
|
587
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
588
|
+
/** Required. Text shown below the title. Displayed as given - pass already translated text. */
|
|
589
|
+
this.description = input.required(...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
590
|
+
/**
|
|
591
|
+
* Text of the action. The action is shown only when this is not empty.
|
|
592
|
+
* @default ''
|
|
593
|
+
*/
|
|
594
|
+
this.actionText = input('', ...(ngDevMode ? [{ debugName: "actionText" }] : /* istanbul ignore next */ []));
|
|
595
|
+
/**
|
|
596
|
+
* Route of the action - accepts the same values as `routerLink` (string, commands array or `UrlTree`).
|
|
597
|
+
* When set the action is rendered as a link that navigates to the route, otherwise as a button.
|
|
598
|
+
* Ignored when `actionText` is empty.
|
|
599
|
+
* @default null
|
|
600
|
+
*/
|
|
601
|
+
this.actionLink = input(null, ...(ngDevMode ? [{ debugName: "actionLink" }] : /* istanbul ignore next */ []));
|
|
602
|
+
/**
|
|
603
|
+
* Behaviour when the navigation is collapsed:
|
|
604
|
+
* `icon` shows only the icon, which opens the full callout in a popup; `hide` hides the callout.
|
|
605
|
+
* @default 'icon'
|
|
606
|
+
*/
|
|
607
|
+
this.collapsedMode = input('icon', ...(ngDevMode ? [{ debugName: "collapsedMode" }] : /* istanbul ignore next */ []));
|
|
608
|
+
/**
|
|
609
|
+
* Collapsed state of the navigation. Set automatically by `sds-navigation-container` -
|
|
610
|
+
* bind it only when the callout is used outside of a container.
|
|
611
|
+
* @default false
|
|
612
|
+
*/
|
|
613
|
+
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
614
|
+
/**
|
|
615
|
+
* Emitted when the action is clicked, for both buttons and links. For a link it is only a
|
|
616
|
+
* notification - the router navigates on its own. The popup (collapsed mode) is closed first.
|
|
617
|
+
*/
|
|
618
|
+
this.actionClicked = output();
|
|
619
|
+
this.resolvedIcon = computed(() => this.icon() ?? DEFAULT_ICONS[this.variant()], ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
620
|
+
this.isHidden = computed(() => this.isCollapsed() && this.collapsedMode() === 'hide', ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
|
|
621
|
+
this.isIconOnly = computed(() => this.isCollapsed() && this.collapsedMode() === 'icon', ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
|
|
622
|
+
this.isPopupOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
|
|
623
|
+
// Right of the icon with bottom edges aligned; falls back to top alignment when there's no room.
|
|
624
|
+
this.popupPositions = [
|
|
625
|
+
{ originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
|
|
626
|
+
{ originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
|
|
627
|
+
];
|
|
628
|
+
effect(() => {
|
|
629
|
+
if (!this.isIconOnly()) {
|
|
630
|
+
this.isPopupOpen.set(false);
|
|
631
|
+
}
|
|
632
|
+
});
|
|
633
|
+
}
|
|
634
|
+
togglePopup() {
|
|
635
|
+
this.isPopupOpen.update((isOpen) => !isOpen);
|
|
636
|
+
}
|
|
637
|
+
onPopupOutsideClick(event, origin) {
|
|
638
|
+
// The origin click toggles the popup itself; closing here as well would re-open it.
|
|
639
|
+
if (origin.contains(event.target)) {
|
|
640
|
+
return;
|
|
641
|
+
}
|
|
642
|
+
this.isPopupOpen.set(false);
|
|
643
|
+
}
|
|
644
|
+
onPopupKeydown(event) {
|
|
645
|
+
if (event.key === 'Escape') {
|
|
646
|
+
this.isPopupOpen.set(false);
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
onActionClick() {
|
|
650
|
+
this.isPopupOpen.set(false);
|
|
651
|
+
this.actionClicked.emit();
|
|
652
|
+
}
|
|
653
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
654
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsNavigationCalloutComponent, isStandalone: true, selector: "sds-navigation-callout", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, actionLink: { classPropertyName: "actionLink", publicName: "actionLink", isSignal: true, isRequired: false, transformFunction: null }, collapsedMode: { classPropertyName: "collapsedMode", publicName: "collapsedMode", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", actionClicked: "actionClicked" }, host: { properties: { "class": "'sds-navigation-callout-' + variant()", "class.sds-navigation-callout-collapsed": "isCollapsed()", "style.display": "isHidden() ? 'none' : null" } }, ngImport: i0, template: "@if (isIconOnly()) {\r\n <button\r\n #origin\r\n type=\"button\"\r\n class=\"sds-navigation-callout-icon-button\"\r\n cdkOverlayOrigin\r\n #overlayOrigin=\"cdkOverlayOrigin\"\r\n [attr.aria-label]=\"title()\"\r\n [attr.aria-expanded]=\"isPopupOpen()\"\r\n (click)=\"togglePopup()\"\r\n >\r\n <fa-icon\r\n class=\"sds-navigation-callout-icon\"\r\n [icon]=\"resolvedIcon()\"\r\n ></fa-icon>\r\n </button>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\r\n [cdkConnectedOverlayPositions]=\"popupPositions\"\r\n (overlayOutsideClick)=\"onPopupOutsideClick($event, origin)\"\r\n (detach)=\"isPopupOpen.set(false)\"\r\n (overlayKeydown)=\"onPopupKeydown($event)\"\r\n >\r\n <div [class]=\"'sds-navigation-callout-popup sds-navigation-callout-' + variant()\">\r\n <ng-container *ngTemplateOutlet=\"card\"></ng-container>\r\n </div>\r\n </ng-template>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"card\"></ng-container>\r\n}\r\n\r\n<ng-template #card>\r\n <div class=\"sds-navigation-callout-card\">\r\n <div class=\"sds-navigation-callout-title d-flex align-items-center gap-1 sds-fs-87 sds-fw-600\">\r\n <fa-icon\r\n class=\"sds-navigation-callout-icon\"\r\n [icon]=\"resolvedIcon()\"\r\n ></fa-icon>\r\n <span>{{ title() }}</span>\r\n </div>\r\n <span class=\"sds-navigation-callout-description\">{{ description() }}</span>\r\n @if (actionText()) {\r\n @if (actionLink()) {\r\n <a\r\n class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\r\n [routerLink]=\"actionLink()\"\r\n (click)=\"onActionClick()\"\r\n >\r\n {{ actionText() }}\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\r\n (click)=\"onActionClick()\"\r\n >\r\n {{ actionText() }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":host,.sds-navigation-callout-popup{--sds-navigation-callout-color: var(--bs-primary);--sds-navigation-callout-bg: color-mix(in oklch, var(--sds-navigation-callout-color) 8%, var(--bs-body-bg));--sds-navigation-callout-border: color-mix(in oklch, var(--sds-navigation-callout-color) 25%, var(--bs-body-bg));--sds-navigation-callout-title: color-mix(in oklch, var(--sds-navigation-callout-color) 70%, var(--bs-emphasis-color));--sds-navigation-callout-description: color-mix(in oklab, var(--sds-navigation-callout-color) 20%, var(--bs-body-color));--sds-navigation-callout-action: var(--sds-navigation-callout-title)}:host(.sds-navigation-callout-warning),.sds-navigation-callout-popup.sds-navigation-callout-warning{--sds-navigation-callout-color: var(--bs-orange)}:host(.sds-navigation-callout-danger),.sds-navigation-callout-popup.sds-navigation-callout-danger{--sds-navigation-callout-color: var(--bs-pink)}:host{display:block}:host(:not(.sds-navigation-callout-collapsed)){margin-inline:.55rem}.sds-navigation-callout-card{display:flex;flex-direction:column;gap:.25rem;padding:.8rem;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg)}.sds-navigation-callout-title,.sds-navigation-callout-icon{color:var(--sds-navigation-callout-title)}.sds-navigation-callout-description{font-size:.8rem;color:var(--sds-navigation-callout-description)}.sds-navigation-callout-action{align-self:flex-start;padding:0;border:none;background:transparent;font-family:inherit;font-size:.8rem;color:var(--sds-navigation-callout-action);cursor:pointer}.sds-navigation-callout-action:hover{text-decoration:underline}.sds-navigation-callout-icon-button{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin-inline:auto;padding:0;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg);cursor:pointer}.sds-navigation-callout-icon-button:hover{background-color:color-mix(in oklch,var(--sds-navigation-callout-border) 50%,var(--sds-navigation-callout-bg))}.sds-navigation-callout-popup .sds-navigation-callout-card{box-shadow:var(--bs-box-shadow)}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
655
|
+
}
|
|
656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCalloutComponent, decorators: [{
|
|
657
|
+
type: Component,
|
|
658
|
+
args: [{ selector: 'sds-navigation-callout', imports: [FaIconComponent, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
659
|
+
'[class]': "'sds-navigation-callout-' + variant()",
|
|
660
|
+
'[class.sds-navigation-callout-collapsed]': 'isCollapsed()',
|
|
661
|
+
'[style.display]': "isHidden() ? 'none' : null",
|
|
662
|
+
}, template: "@if (isIconOnly()) {\r\n <button\r\n #origin\r\n type=\"button\"\r\n class=\"sds-navigation-callout-icon-button\"\r\n cdkOverlayOrigin\r\n #overlayOrigin=\"cdkOverlayOrigin\"\r\n [attr.aria-label]=\"title()\"\r\n [attr.aria-expanded]=\"isPopupOpen()\"\r\n (click)=\"togglePopup()\"\r\n >\r\n <fa-icon\r\n class=\"sds-navigation-callout-icon\"\r\n [icon]=\"resolvedIcon()\"\r\n ></fa-icon>\r\n </button>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\r\n [cdkConnectedOverlayPositions]=\"popupPositions\"\r\n (overlayOutsideClick)=\"onPopupOutsideClick($event, origin)\"\r\n (detach)=\"isPopupOpen.set(false)\"\r\n (overlayKeydown)=\"onPopupKeydown($event)\"\r\n >\r\n <div [class]=\"'sds-navigation-callout-popup sds-navigation-callout-' + variant()\">\r\n <ng-container *ngTemplateOutlet=\"card\"></ng-container>\r\n </div>\r\n </ng-template>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"card\"></ng-container>\r\n}\r\n\r\n<ng-template #card>\r\n <div class=\"sds-navigation-callout-card\">\r\n <div class=\"sds-navigation-callout-title d-flex align-items-center gap-1 sds-fs-87 sds-fw-600\">\r\n <fa-icon\r\n class=\"sds-navigation-callout-icon\"\r\n [icon]=\"resolvedIcon()\"\r\n ></fa-icon>\r\n <span>{{ title() }}</span>\r\n </div>\r\n <span class=\"sds-navigation-callout-description\">{{ description() }}</span>\r\n @if (actionText()) {\r\n @if (actionLink()) {\r\n <a\r\n class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\r\n [routerLink]=\"actionLink()\"\r\n (click)=\"onActionClick()\"\r\n >\r\n {{ actionText() }}\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\r\n (click)=\"onActionClick()\"\r\n >\r\n {{ actionText() }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [":host,.sds-navigation-callout-popup{--sds-navigation-callout-color: var(--bs-primary);--sds-navigation-callout-bg: color-mix(in oklch, var(--sds-navigation-callout-color) 8%, var(--bs-body-bg));--sds-navigation-callout-border: color-mix(in oklch, var(--sds-navigation-callout-color) 25%, var(--bs-body-bg));--sds-navigation-callout-title: color-mix(in oklch, var(--sds-navigation-callout-color) 70%, var(--bs-emphasis-color));--sds-navigation-callout-description: color-mix(in oklab, var(--sds-navigation-callout-color) 20%, var(--bs-body-color));--sds-navigation-callout-action: var(--sds-navigation-callout-title)}:host(.sds-navigation-callout-warning),.sds-navigation-callout-popup.sds-navigation-callout-warning{--sds-navigation-callout-color: var(--bs-orange)}:host(.sds-navigation-callout-danger),.sds-navigation-callout-popup.sds-navigation-callout-danger{--sds-navigation-callout-color: var(--bs-pink)}:host{display:block}:host(:not(.sds-navigation-callout-collapsed)){margin-inline:.55rem}.sds-navigation-callout-card{display:flex;flex-direction:column;gap:.25rem;padding:.8rem;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg)}.sds-navigation-callout-title,.sds-navigation-callout-icon{color:var(--sds-navigation-callout-title)}.sds-navigation-callout-description{font-size:.8rem;color:var(--sds-navigation-callout-description)}.sds-navigation-callout-action{align-self:flex-start;padding:0;border:none;background:transparent;font-family:inherit;font-size:.8rem;color:var(--sds-navigation-callout-action);cursor:pointer}.sds-navigation-callout-action:hover{text-decoration:underline}.sds-navigation-callout-icon-button{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin-inline:auto;padding:0;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg);cursor:pointer}.sds-navigation-callout-icon-button:hover{background-color:color-mix(in oklch,var(--sds-navigation-callout-border) 50%,var(--sds-navigation-callout-bg))}.sds-navigation-callout-popup .sds-navigation-callout-card{box-shadow:var(--bs-box-shadow)}\n"] }]
|
|
663
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], actionLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLink", required: false }] }], collapsedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedMode", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }] } });
|
|
664
|
+
|
|
535
665
|
class SdsNavigationContainerComponent {
|
|
536
666
|
constructor() {
|
|
537
667
|
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
@@ -542,6 +672,7 @@ class SdsNavigationContainerComponent {
|
|
|
542
672
|
this.externalLinkComponentChildren = contentChildren(SdsNavigationExternalLinkComponent, ...(ngDevMode ? [{ debugName: "externalLinkComponentChildren" }] : /* istanbul ignore next */ []));
|
|
543
673
|
this.userProfileComponentChildren = contentChildren(SdsNavigationUserProfileComponent, ...(ngDevMode ? [{ debugName: "userProfileComponentChildren" }] : /* istanbul ignore next */ []));
|
|
544
674
|
this.collapsibleFrameComponentChildren = contentChildren(SdsNavigationCollapsibleFrameComponent, ...(ngDevMode ? [{ debugName: "collapsibleFrameComponentChildren" }] : /* istanbul ignore next */ []));
|
|
675
|
+
this.calloutComponentChildren = contentChildren(SdsNavigationCalloutComponent, ...(ngDevMode ? [{ debugName: "calloutComponentChildren" }] : /* istanbul ignore next */ []));
|
|
545
676
|
// Reading the content queries inside the effect makes it re-run once they resolve
|
|
546
677
|
// (so an initial collapsed state is applied) and whenever children are added later.
|
|
547
678
|
effect(() => {
|
|
@@ -554,6 +685,7 @@ class SdsNavigationContainerComponent {
|
|
|
554
685
|
...this.externalLinkComponentChildren(),
|
|
555
686
|
...this.userProfileComponentChildren(),
|
|
556
687
|
...this.collapsibleFrameComponentChildren(),
|
|
688
|
+
...this.calloutComponentChildren(),
|
|
557
689
|
];
|
|
558
690
|
untracked(() => {
|
|
559
691
|
children.forEach((child) => child.isCollapsed.set(isCollapsed));
|
|
@@ -562,12 +694,12 @@ class SdsNavigationContainerComponent {
|
|
|
562
694
|
}
|
|
563
695
|
ngOnInit() { }
|
|
564
696
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
565
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: SdsNavigationContainerComponent, isStandalone: true, selector: "sds-navigation-container", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "groupComponentChildren", predicate: SdsNavigationGroupComponent, isSignal: true }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent, isSignal: true }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent, isSignal: true }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent, isSignal: true }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent, isSignal: true }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent, isSignal: true }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent, isSignal: true }], ngImport: i0, template: "<div class=\"sds-navigation-container\">\n <ng-content></ng-content>\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
697
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: SdsNavigationContainerComponent, isStandalone: true, selector: "sds-navigation-container", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "groupComponentChildren", predicate: SdsNavigationGroupComponent, isSignal: true }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent, isSignal: true }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent, isSignal: true }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent, isSignal: true }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent, isSignal: true }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent, isSignal: true }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent, isSignal: true }, { propertyName: "calloutComponentChildren", predicate: SdsNavigationCalloutComponent, isSignal: true }], ngImport: i0, template: "<div class=\"sds-navigation-container\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
566
698
|
}
|
|
567
699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationContainerComponent, decorators: [{
|
|
568
700
|
type: Component,
|
|
569
|
-
args: [{ selector: 'sds-navigation-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sds-navigation-container\">\n <ng-content></ng-content>\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"] }]
|
|
570
|
-
}], ctorParameters: () => [], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], groupComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationGroupComponent), { isSignal: true }] }], routeLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationRouteLinkComponent), { isSignal: true }] }], separatorComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationSeparatorComponent), { isSignal: true }] }], headerComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationHeaderComponent), { isSignal: true }] }], externalLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationExternalLinkComponent), { isSignal: true }] }], userProfileComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationUserProfileComponent), { isSignal: true }] }], collapsibleFrameComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationCollapsibleFrameComponent), { isSignal: true }] }] } });
|
|
701
|
+
args: [{ selector: 'sds-navigation-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sds-navigation-container\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"] }]
|
|
702
|
+
}], ctorParameters: () => [], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], groupComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationGroupComponent), { isSignal: true }] }], routeLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationRouteLinkComponent), { isSignal: true }] }], separatorComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationSeparatorComponent), { isSignal: true }] }], headerComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationHeaderComponent), { isSignal: true }] }], externalLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationExternalLinkComponent), { isSignal: true }] }], userProfileComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationUserProfileComponent), { isSignal: true }] }], collapsibleFrameComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationCollapsibleFrameComponent), { isSignal: true }] }], calloutComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationCalloutComponent), { isSignal: true }] }] } });
|
|
571
703
|
|
|
572
704
|
class SdsUserProfileTileComponent {
|
|
573
705
|
constructor() {
|
|
@@ -576,13 +708,13 @@ class SdsUserProfileTileComponent {
|
|
|
576
708
|
this.size = 'medium';
|
|
577
709
|
}
|
|
578
710
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
579
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileTileComponent, isStandalone: true, 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: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
|
|
711
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileTileComponent, isStandalone: true, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n <sds-avatar\r\n [text]=\"profile?.name\"\r\n [colorKey]=\"profile?.id\"\r\n [pictureUri]=\"profile?.pictureUri\"\r\n [size]=\"size === 'small' ? 2 : 3\"\r\n borderColor=\"white\"\r\n borderWidth=\"2\"\r\n >\r\n </sds-avatar>\r\n\r\n <div \r\n class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n [style.minWidth.px]=\"1\"\r\n >\r\n <span \r\n class=\"sds-fs-100 text-truncate\"\r\n [class.sds-fs-100]=\"size === 'medium'\"\r\n [class.sds-fs-95]=\"size === 'small'\"\r\n [class.sds-fw-500]=\"emphasizeName\"\r\n >\r\n {{profile?.name}}\r\n </span>\r\n <div \r\n class=\"sds-fw-400 text-truncate text-gray-800\"\r\n [class.sds-fs-75]=\"size === 'medium'\"\r\n [class.sds-fs-75]=\"size === 'small'\"\r\n >\r\n {{profile?.info}}\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
|
|
580
712
|
}
|
|
581
713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
|
|
582
714
|
type: Component,
|
|
583
715
|
args: [{ selector: 'sds-user-profile-tile', imports: [
|
|
584
716
|
SdsAvatarComponent
|
|
585
|
-
], 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" }]
|
|
717
|
+
], template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n <sds-avatar\r\n [text]=\"profile?.name\"\r\n [colorKey]=\"profile?.id\"\r\n [pictureUri]=\"profile?.pictureUri\"\r\n [size]=\"size === 'small' ? 2 : 3\"\r\n borderColor=\"white\"\r\n borderWidth=\"2\"\r\n >\r\n </sds-avatar>\r\n\r\n <div \r\n class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n [style.minWidth.px]=\"1\"\r\n >\r\n <span \r\n class=\"sds-fs-100 text-truncate\"\r\n [class.sds-fs-100]=\"size === 'medium'\"\r\n [class.sds-fs-95]=\"size === 'small'\"\r\n [class.sds-fw-500]=\"emphasizeName\"\r\n >\r\n {{profile?.name}}\r\n </span>\r\n <div \r\n class=\"sds-fw-400 text-truncate text-gray-800\"\r\n [class.sds-fs-75]=\"size === 'medium'\"\r\n [class.sds-fs-75]=\"size === 'small'\"\r\n >\r\n {{profile?.info}}\r\n </div>\r\n </div>\r\n</div>\r\n" }]
|
|
586
718
|
}], propDecorators: { profile: [{
|
|
587
719
|
type: Input
|
|
588
720
|
}], emphasizeName: [{
|
|
@@ -608,7 +740,7 @@ class SdsUserProfileSelectorComponent {
|
|
|
608
740
|
this.profileIdChange.emit('');
|
|
609
741
|
}
|
|
610
742
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileSelectorComponent, isStandalone: true, selector: "sds-user-profile-selector", inputs: { content: "content", profiles: "profiles", selectDefaultProfileText: "selectDefaultProfileText", switchText: "switchText" }, outputs: { profileIdChange: "profileIdChange" }, ngImport: i0, template: "<div class=\"mx-2\"> \n <div \n *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\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=\"content === 'selectDefaultProfile'\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] }); }
|
|
743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileSelectorComponent, isStandalone: true, selector: "sds-user-profile-selector", inputs: { content: "content", profiles: "profiles", selectDefaultProfileText: "selectDefaultProfileText", switchText: "switchText" }, outputs: { profileIdChange: "profileIdChange" }, ngImport: i0, template: "<div class=\"mx-2\"> \r\n <div \r\n *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\r\n class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\r\n\r\n <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\r\n\r\n <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\r\n <li\r\n class=\"rounded sds-hoverable-150 pe-2 py-1\"\r\n *ngFor=\"let profile of profiles\"\r\n >\r\n <sds-user-profile-tile\r\n class=\"sds-cursor-pointer\"\r\n [profile]=\"profile\"\r\n [size]=\"'small'\"\r\n [emphasizeName]=\"false\"\r\n (click)=\"selectProfile(profile.id)\"\r\n >\r\n </sds-user-profile-tile>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"content === 'selectDefaultProfile'\"\r\n class=\"mt-2 mb-1\">\r\n <sds-user-profile-action-button\r\n [text]=\"selectDefaultProfileText\"\r\n [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\r\n (click)=\"selectDefaultProfile()\"\r\n >\r\n </sds-user-profile-action-button>\r\n </div>\r\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] }); }
|
|
612
744
|
}
|
|
613
745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
|
|
614
746
|
type: Component,
|
|
@@ -617,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
617
749
|
NgFor,
|
|
618
750
|
SdsUserProfileTileComponent,
|
|
619
751
|
SdsUserProfileActionButtonComponent
|
|
620
|
-
], template: "<div class=\"mx-2\"> \n <div \n *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\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=\"content === 'selectDefaultProfile'\"\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"] }]
|
|
752
|
+
], template: "<div class=\"mx-2\"> \r\n <div \r\n *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\r\n class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\r\n\r\n <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\r\n\r\n <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\r\n <li\r\n class=\"rounded sds-hoverable-150 pe-2 py-1\"\r\n *ngFor=\"let profile of profiles\"\r\n >\r\n <sds-user-profile-tile\r\n class=\"sds-cursor-pointer\"\r\n [profile]=\"profile\"\r\n [size]=\"'small'\"\r\n [emphasizeName]=\"false\"\r\n (click)=\"selectProfile(profile.id)\"\r\n >\r\n </sds-user-profile-tile>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <div \r\n *ngIf=\"content === 'selectDefaultProfile'\"\r\n class=\"mt-2 mb-1\">\r\n <sds-user-profile-action-button\r\n [text]=\"selectDefaultProfileText\"\r\n [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\r\n (click)=\"selectDefaultProfile()\"\r\n >\r\n </sds-user-profile-action-button>\r\n </div>\r\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"] }]
|
|
621
753
|
}], propDecorators: { content: [{
|
|
622
754
|
type: Input
|
|
623
755
|
}], profiles: [{
|
|
@@ -661,7 +793,7 @@ class SdsProductHomeComponent {
|
|
|
661
793
|
this.collapsedToggle.emit(collapsed);
|
|
662
794
|
}
|
|
663
795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsProductHomeComponent, isStandalone: true, selector: "sds-product-home", inputs: { logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: false, isRequired: false, transformFunction: null }, logoAltText: { classPropertyName: "logoAltText", publicName: "logoAltText", isSignal: false, isRequired: false, transformFunction: null }, moduleTitle: { classPropertyName: "moduleTitle", publicName: "moduleTitle", isSignal: false, isRequired: false, transformFunction: null }, showAppSwitcher: { classPropertyName: "showAppSwitcher", publicName: "showAppSwitcher", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherProductCode: { classPropertyName: "appSwitcherProductCode", publicName: "appSwitcherProductCode", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherUserProductCodes: { classPropertyName: "appSwitcherUserProductCodes", publicName: "appSwitcherUserProductCodes", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherTenantProducts: { classPropertyName: "appSwitcherTenantProducts", publicName: "appSwitcherTenantProducts", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherSwitchText: { classPropertyName: "appSwitcherSwitchText", publicName: "appSwitcherSwitchText", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherDiscoverText: { classPropertyName: "appSwitcherDiscoverText", publicName: "appSwitcherDiscoverText", isSignal: false, isRequired: false, transformFunction: null }, textOpen: { classPropertyName: "textOpen", publicName: "textOpen", isSignal: true, isRequired: false, transformFunction: null }, textClose: { classPropertyName: "textClose", publicName: "textClose", isSignal: true, isRequired: false, transformFunction: null }, allowHeaderClick: { classPropertyName: "allowHeaderClick", publicName: "allowHeaderClick", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick", collapsedToggle: "collapsedToggle", isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n class=\"product-header pb-2 mb-2 align-items-start gap-2\"\n >\n @if(!isCollapsed()) {\n <sds-app-switcher\n *ngIf=\"showAppSwitcher\"\n class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\n [productCode]=\"appSwitcherProductCode\"\n [userProductCodes]=\"appSwitcherUserProductCodes\"\n [tenantProducts]=\"appSwitcherTenantProducts\"\n [switchText]=\"appSwitcherSwitchText\"\n [discoverText]=\"appSwitcherDiscoverText\"\n (productClick)=\"onProductClick($event)\"\n >\n </sds-app-switcher>\n \n <div \n class=\"sds-flex-grow-shrink product-title\"\n (click)=\"onHeaderClick()\"\n [class.sds-cursor-pointer]=\"allowHeaderClick\"\n [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\n >\n <div \n class=\"product-logo-container\"\n [class.collapsed]=\"isCollapsed()\"\n >\n <img\n class=\"product-logo\"\n [src]=\"logoUrl\" \n [alt]=\"logoAltText\"\n > \n </div>\n\n @if(moduleTitle && !isCollapsed()) {\n <h6 class=\"mt-2\">\n {{moduleTitle}}\n </h6>\n }\n </div>\n }\n\n <button\n type=\"button\"\n class=\"\n toggle-collapsed-button \n text-gray-800 sds-fs-93 \n sds-hoverable sds-rounded-2 \n p-1 ml-2\n d-flex align-items-center justify-content-center\n sds-cursor-pointer\n \" \n (click)=\"toggleState()\" \n [attr.aria-label]=\"isCollapsed() ? textOpen() : textClose()\"\n [title]=\"isCollapsed() ? textOpen() : textClose()\" \n >\n <fa-icon \n [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \n [fixedWidth]=\"true\"\n >\n </fa-icon>\n </button>\n \n</div>\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header .toggle-collapsed-button{height:2rem;width:2rem;border:0;background:transparent;appearance:none}.product-header .toggle-collapsed-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText", "ariaLabel"], outputs: ["productClick"] }] }); }
|
|
796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsProductHomeComponent, isStandalone: true, selector: "sds-product-home", inputs: { logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: false, isRequired: false, transformFunction: null }, logoAltText: { classPropertyName: "logoAltText", publicName: "logoAltText", isSignal: false, isRequired: false, transformFunction: null }, moduleTitle: { classPropertyName: "moduleTitle", publicName: "moduleTitle", isSignal: false, isRequired: false, transformFunction: null }, showAppSwitcher: { classPropertyName: "showAppSwitcher", publicName: "showAppSwitcher", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherProductCode: { classPropertyName: "appSwitcherProductCode", publicName: "appSwitcherProductCode", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherUserProductCodes: { classPropertyName: "appSwitcherUserProductCodes", publicName: "appSwitcherUserProductCodes", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherTenantProducts: { classPropertyName: "appSwitcherTenantProducts", publicName: "appSwitcherTenantProducts", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherSwitchText: { classPropertyName: "appSwitcherSwitchText", publicName: "appSwitcherSwitchText", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherDiscoverText: { classPropertyName: "appSwitcherDiscoverText", publicName: "appSwitcherDiscoverText", isSignal: false, isRequired: false, transformFunction: null }, textOpen: { classPropertyName: "textOpen", publicName: "textOpen", isSignal: true, isRequired: false, transformFunction: null }, textClose: { classPropertyName: "textClose", publicName: "textClose", isSignal: true, isRequired: false, transformFunction: null }, allowHeaderClick: { classPropertyName: "allowHeaderClick", publicName: "allowHeaderClick", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick", collapsedToggle: "collapsedToggle", isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n class=\"product-header pb-2 mb-2 align-items-start gap-2\"\r\n >\r\n @if(!isCollapsed()) {\r\n <sds-app-switcher\r\n *ngIf=\"showAppSwitcher\"\r\n class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\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=\"sds-flex-grow-shrink product-title\"\r\n (click)=\"onHeaderClick()\"\r\n [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\r\n >\r\n <div \r\n class=\"product-logo-container\"\r\n [class.collapsed]=\"isCollapsed()\"\r\n >\r\n <img\r\n class=\"product-logo\"\r\n [src]=\"logoUrl\" \r\n [alt]=\"logoAltText\"\r\n > \r\n </div>\r\n\r\n @if(moduleTitle && !isCollapsed()) {\r\n <h6 class=\"mt-2\">\r\n {{moduleTitle}}\r\n </h6>\r\n }\r\n </div>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"\r\n toggle-collapsed-button \r\n text-gray-800 sds-fs-93 \r\n sds-hoverable sds-rounded-2 \r\n p-1 ml-2\r\n d-flex align-items-center justify-content-center\r\n sds-cursor-pointer\r\n \" \r\n (click)=\"toggleState()\" \r\n [attr.aria-label]=\"isCollapsed() ? textOpen() : textClose()\"\r\n [title]=\"isCollapsed() ? textOpen() : textClose()\" \r\n >\r\n <fa-icon \r\n [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \r\n [fixedWidth]=\"true\"\r\n >\r\n </fa-icon>\r\n </button>\r\n \r\n</div>\r\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header .toggle-collapsed-button{height:2rem;width:2rem;border:0;background:transparent;appearance:none}.product-header .toggle-collapsed-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText", "ariaLabel"], outputs: ["productClick"] }] }); }
|
|
665
797
|
}
|
|
666
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
|
|
667
799
|
type: Component,
|
|
@@ -669,7 +801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
669
801
|
NgIf,
|
|
670
802
|
FontAwesomeModule,
|
|
671
803
|
SdsAppSwitcherComponent
|
|
672
|
-
], template: "<div \n class=\"product-header pb-2 mb-2 align-items-start gap-2\"\n >\n @if(!isCollapsed()) {\n <sds-app-switcher\n *ngIf=\"showAppSwitcher\"\n class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\n [productCode]=\"appSwitcherProductCode\"\n [userProductCodes]=\"appSwitcherUserProductCodes\"\n [tenantProducts]=\"appSwitcherTenantProducts\"\n [switchText]=\"appSwitcherSwitchText\"\n [discoverText]=\"appSwitcherDiscoverText\"\n (productClick)=\"onProductClick($event)\"\n >\n </sds-app-switcher>\n \n <div \n class=\"sds-flex-grow-shrink product-title\"\n (click)=\"onHeaderClick()\"\n [class.sds-cursor-pointer]=\"allowHeaderClick\"\n [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\n >\n <div \n class=\"product-logo-container\"\n [class.collapsed]=\"isCollapsed()\"\n >\n <img\n class=\"product-logo\"\n [src]=\"logoUrl\" \n [alt]=\"logoAltText\"\n > \n </div>\n\n @if(moduleTitle && !isCollapsed()) {\n <h6 class=\"mt-2\">\n {{moduleTitle}}\n </h6>\n }\n </div>\n }\n\n <button\n type=\"button\"\n class=\"\n toggle-collapsed-button \n text-gray-800 sds-fs-93 \n sds-hoverable sds-rounded-2 \n p-1 ml-2\n d-flex align-items-center justify-content-center\n sds-cursor-pointer\n \" \n (click)=\"toggleState()\" \n [attr.aria-label]=\"isCollapsed() ? textOpen() : textClose()\"\n [title]=\"isCollapsed() ? textOpen() : textClose()\" \n >\n <fa-icon \n [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \n [fixedWidth]=\"true\"\n >\n </fa-icon>\n </button>\n \n</div>\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header .toggle-collapsed-button{height:2rem;width:2rem;border:0;background:transparent;appearance:none}.product-header .toggle-collapsed-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host{width:100%}\n"] }]
|
|
804
|
+
], template: "<div \r\n class=\"product-header pb-2 mb-2 align-items-start gap-2\"\r\n >\r\n @if(!isCollapsed()) {\r\n <sds-app-switcher\r\n *ngIf=\"showAppSwitcher\"\r\n class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\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=\"sds-flex-grow-shrink product-title\"\r\n (click)=\"onHeaderClick()\"\r\n [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\r\n >\r\n <div \r\n class=\"product-logo-container\"\r\n [class.collapsed]=\"isCollapsed()\"\r\n >\r\n <img\r\n class=\"product-logo\"\r\n [src]=\"logoUrl\" \r\n [alt]=\"logoAltText\"\r\n > \r\n </div>\r\n\r\n @if(moduleTitle && !isCollapsed()) {\r\n <h6 class=\"mt-2\">\r\n {{moduleTitle}}\r\n </h6>\r\n }\r\n </div>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"\r\n toggle-collapsed-button \r\n text-gray-800 sds-fs-93 \r\n sds-hoverable sds-rounded-2 \r\n p-1 ml-2\r\n d-flex align-items-center justify-content-center\r\n sds-cursor-pointer\r\n \" \r\n (click)=\"toggleState()\" \r\n [attr.aria-label]=\"isCollapsed() ? textOpen() : textClose()\"\r\n [title]=\"isCollapsed() ? textOpen() : textClose()\" \r\n >\r\n <fa-icon \r\n [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \r\n [fixedWidth]=\"true\"\r\n >\r\n </fa-icon>\r\n </button>\r\n \r\n</div>\r\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header .toggle-collapsed-button{height:2rem;width:2rem;border:0;background:transparent;appearance:none}.product-header .toggle-collapsed-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host{width:100%}\n"] }]
|
|
673
805
|
}], ctorParameters: () => [], propDecorators: { logoUrl: [{
|
|
674
806
|
type: Input
|
|
675
807
|
}], logoAltText: [{
|
|
@@ -736,5 +868,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
736
868
|
* Generated bundle index. Do not edit.
|
|
737
869
|
*/
|
|
738
870
|
|
|
739
|
-
export { SdsActiveRoutePatternPipe, SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
|
|
871
|
+
export { SdsActiveRoutePatternPipe, SdsNavigationCalloutComponent, SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
|
|
740
872
|
//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map
|