@spicainternational/ngx-sds-components 6.0.1 → 6.0.5
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 +5 -1
- package/esm2020/src/lib/modal/dialog/dialog.component.mjs +1 -1
- package/esm2020/src/lib/modal/modal.component.mjs +20 -3
- package/esm2020/src/lib/modal/modal.module.mjs +5 -1
- package/esm2020/src/lib/navigation/navigation-group/navigation-group.component.mjs +8 -3
- package/esm2020/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.mjs +16 -3
- package/esm2020/src/lib/navigation/navigation.module.mjs +2 -2
- package/esm2020/src/lib/navigation/utils/navigation.utils.mjs +4 -0
- package/esm2020/src/lib/pane/pane.component.mjs +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs +24 -3
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs +25 -4
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
- package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs +24 -3
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs +25 -4
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-navigation.mjs.map +1 -1
- package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/modal/modal.component.d.ts +13 -1
- package/src/lib/modal/modal.module.d.ts +3 -2
- package/src/lib/navigation/navigation-group/navigation-group.component.d.ts +2 -1
- package/src/lib/navigation/navigation-user-profile/navigation-user-profile.component.d.ts +5 -1
- package/src/lib/navigation/utils/navigation.utils.d.ts +1 -0
- package/esm2020/src/lib/navigation/pipes/index.mjs +0 -2
- package/src/lib/navigation/pipes/index.d.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { PanePage } from './pane.model';\r\n\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { isThisSecond } from 'date-fns';\r\n\r\n@Component({\r\n selector: 'sds-pane',\r\n templateUrl: './pane.component.html',\r\n styleUrls: ['./pane.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdsPaneComponent implements OnInit, OnChanges {\r\n\r\n @Input() public pages?: PanePage[];\r\n @Input() public selectedPage?: PanePage;\r\n @Input() public contentWidthRem: number = 20;\r\n @Input() public product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;\r\n \r\n @Output() pageChange = new EventEmitter();\r\n\r\n public closeIcon = faXmark;\r\n\r\n public productCssClass?: string;\r\n\r\n constructor() {}\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['product']) {\r\n this.productCssClass = this.product ? `product-${this.product}` : undefined; \r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public showContent(page: PanePage): void{\r\n this.selectedPage = page;\r\n this.pageChange.emit(this.selectedPage);\r\n }\r\n\r\n public hideContent(): void{\r\n this.selectedPage = undefined;\r\n this.pageChange.emit(this.selectedPage);\r\n }\r\n\r\n
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { PanePage } from './pane.model';\r\n\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { isThisSecond } from 'date-fns';\r\n\r\n@Component({\r\n selector: 'sds-pane',\r\n templateUrl: './pane.component.html',\r\n styleUrls: ['./pane.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdsPaneComponent implements OnInit, OnChanges {\r\n\r\n @Input() public pages?: PanePage[];\r\n @Input() public selectedPage?: PanePage;\r\n @Input() public contentWidthRem: number = 20;\r\n @Input() public product?: 'all-hours' | 'my-hours' | 'door-cloud' | 'time-and-space' | string;\r\n \r\n @Output() pageChange = new EventEmitter();\r\n\r\n public closeIcon = faXmark;\r\n\r\n public productCssClass?: string;\r\n\r\n constructor() {}\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['product']) {\r\n this.productCssClass = this.product ? `product-${this.product}` : undefined; \r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public showContent(page: PanePage): void{\r\n this.selectedPage = page;\r\n this.pageChange.emit(this.selectedPage);\r\n }\r\n\r\n public hideContent(): void{\r\n this.selectedPage = undefined;\r\n this.pageChange.emit(this.selectedPage);\r\n }\r\n\r\n}\r\n","<div \r\n class=\"pane border-start\"\r\n [class]=\"productCssClass\"\r\n >\r\n <div \r\n *ngIf=\"selectedPage\" \r\n class=\"pane-content\"\r\n [style.width.rem]=\"contentWidthRem\"\r\n >\r\n \r\n <div class=\"page-header\">\r\n <div class=\"title\">\r\n {{selectedPage.title}}\r\n </div>\r\n\r\n <button \r\n class=\"btn btn-stealth ms-auto\"\r\n (click)=\"hideContent()\"\r\n >\r\n <fa-icon \r\n [icon]=\"closeIcon\" \r\n [fixedWidth]=\"true\"\r\n [size]=\"'sm'\"> \r\n </fa-icon> \r\n </button> \r\n\r\n </div>\r\n\r\n <div class=\"page-container\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n >\r\n </ng-container> \r\n </div>\r\n </div>\r\n\r\n <div \r\n class=\"pane-header\"\r\n [class.border-start]=\"selectedPage\"\r\n >\r\n <ul>\r\n <li \r\n *ngFor=\"let page of pages\"\r\n [class.active] = \"selectedPage === page\"\r\n >\r\n <div \r\n class=\"icon-container\"\r\n [title]=\"page.title\"\r\n (click) = \"showContent(page)\"\r\n >\r\n <fa-icon \r\n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n [fixedWidth]=\"true\">\r\n </fa-icon>\r\n </div>\r\n </li>\r\n </ul>\r\n </div> \r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsPaneComponent } from '../pane/pane.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsPaneComponent\r\n ],\r\n imports: [\r\n CommonModule, \r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n SdsPaneComponent\r\n ],\r\n})\r\nexport class SdsPaneModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,8 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
import { faXmark } from '@fortawesome/pro-regular-svg-icons';
|
|
6
6
|
import * as i2 from '@angular/cdk/a11y';
|
|
7
7
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
8
|
+
import * as i3 from '@angular/cdk/drag-drop';
|
|
9
|
+
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
8
10
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
9
11
|
|
|
10
12
|
class SdsModalComponent {
|
|
@@ -17,6 +19,18 @@ class SdsModalComponent {
|
|
|
17
19
|
this.autoFocusCloseButton = false;
|
|
18
20
|
this.isScrollable = true;
|
|
19
21
|
this.closeOnEscape = false;
|
|
22
|
+
/**
|
|
23
|
+
* Allow the modal to be draggable by the user. Default is false.
|
|
24
|
+
*
|
|
25
|
+
* @memberof SdsModalComponent
|
|
26
|
+
*/
|
|
27
|
+
this.isDraggable = false;
|
|
28
|
+
/**
|
|
29
|
+
* Constrain modal to the viewport. Default is true.
|
|
30
|
+
*
|
|
31
|
+
* @memberof SdsModalComponent
|
|
32
|
+
*/
|
|
33
|
+
this.isDragConstrained = true;
|
|
20
34
|
/**
|
|
21
35
|
* @deprecated Use isOpenChange instead
|
|
22
36
|
*/
|
|
@@ -79,10 +93,10 @@ class SdsModalComponent {
|
|
|
79
93
|
}
|
|
80
94
|
}
|
|
81
95
|
SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
-
SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton", autoFocusCloseButton: "autoFocusCloseButton", translations: "translations", isScrollable: "isScrollable", closeOnEscape: "closeOnEscape", isOpen: "isOpen" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick", closeEscapeKeypress: "closeEscapeKeypress", isOpenChange: "isOpenChange" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "_closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal .modal-header button.btn-close{font-size:.75em}.modal .modal-header button.btn-close:hover{background-color:var(--bs-gray-200)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}@media (min-width: 820px){.modal-820{max-width:820px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
|
|
96
|
+
SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton", autoFocusCloseButton: "autoFocusCloseButton", translations: "translations", isScrollable: "isScrollable", closeOnEscape: "closeOnEscape", isDraggable: "isDraggable", isDragConstrained: "isDragConstrained", isOpen: "isOpen" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick", closeEscapeKeypress: "closeEscapeKeypress", isOpenChange: "isOpenChange" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "_closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #modal class=\"modal modal-backdrop\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div \r\n class=\"modal-content\" \r\n cdkDrag [cdkDragDisabled]=\"!isDraggable\" [cdkDragBoundary]=\"isDragConstrained ? '.modal-backdrop' : ''\"\r\n >\r\n\r\n <div *ngIf=\"isDraggable\" class=\"modal-drag-handle\" cdkDragHandle></div>\r\n\r\n <div \r\n *ngIf=\"showHeader && headerContent\" \r\n class=\"modal-header\" \r\n >\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal .modal-drag-handle{cursor:move;position:absolute;width:100%;height:1rem}.modal .modal-header button.btn-close{font-size:.75em}.modal .modal-header button.btn-close:hover{background-color:var(--bs-gray-200)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}@media (min-width: 820px){.modal-820{max-width:820px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
|
|
83
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsModalComponent, decorators: [{
|
|
84
98
|
type: Component,
|
|
85
|
-
args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal .modal-header button.btn-close{font-size:.75em}.modal .modal-header button.btn-close:hover{background-color:var(--bs-gray-200)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}@media (min-width: 820px){.modal-820{max-width:820px}}\n"] }]
|
|
99
|
+
args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal modal-backdrop\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div \r\n class=\"modal-content\" \r\n cdkDrag [cdkDragDisabled]=\"!isDraggable\" [cdkDragBoundary]=\"isDragConstrained ? '.modal-backdrop' : ''\"\r\n >\r\n\r\n <div *ngIf=\"isDraggable\" class=\"modal-drag-handle\" cdkDragHandle></div>\r\n\r\n <div \r\n *ngIf=\"showHeader && headerContent\" \r\n class=\"modal-header\" \r\n >\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal .modal-drag-handle{cursor:move;position:absolute;width:100%;height:1rem}.modal .modal-header button.btn-close{font-size:.75em}.modal .modal-header button.btn-close:hover{background-color:var(--bs-gray-200)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}@media (min-width: 820px){.modal-820{max-width:820px}}\n"] }]
|
|
86
100
|
}], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
|
|
87
101
|
type: ContentChild,
|
|
88
102
|
args: ['header']
|
|
@@ -106,6 +120,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
106
120
|
type: Input
|
|
107
121
|
}], closeOnEscape: [{
|
|
108
122
|
type: Input
|
|
123
|
+
}], isDraggable: [{
|
|
124
|
+
type: Input
|
|
125
|
+
}], isDragConstrained: [{
|
|
126
|
+
type: Input
|
|
109
127
|
}], modalOpen: [{
|
|
110
128
|
type: Output
|
|
111
129
|
}], modalClose: [{
|
|
@@ -229,7 +247,7 @@ class SdsDialogComponent {
|
|
|
229
247
|
}
|
|
230
248
|
}
|
|
231
249
|
SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
232
|
-
SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", primaryButtonClass: "primaryButtonClass", primaryButtonType: "primaryButtonType", primaryButtonId: "primaryButtonId", primaryButtonDisabled: "primaryButtonDisabled", secondaryButtonText: "secondaryButtonText", secondaryButtonClass: "secondaryButtonClass", secondaryButtonType: "secondaryButtonType", secondaryButtonId: "secondaryButtonId", secondaryButtonDisabled: "secondaryButtonDisabled", closeOnEscape: "closeOnEscape", showHeader: "showHeader", showCloseButton: "showCloseButton", showPrimaryButton: "showPrimaryButton", showSecondaryButton: "showSecondaryButton", autofocusElement: "autofocusElement", modalDialogId: "modalDialogId", isOpen: "isOpen" }, outputs: { dialogOpen: "dialogOpen", dialogClose: "dialogClose", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "_primaryButton", first: true, predicate: ["primaryButton"], descendants: true, read: ElementRef }, { propertyName: "_secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n *ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n *ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "autoFocusCloseButton", "translations", "isScrollable", "closeOnEscape", "isOpen"], outputs: ["modalOpen", "modalClose", "closeClick", "closeEscapeKeypress", "isOpenChange"] }] });
|
|
250
|
+
SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", primaryButtonClass: "primaryButtonClass", primaryButtonType: "primaryButtonType", primaryButtonId: "primaryButtonId", primaryButtonDisabled: "primaryButtonDisabled", secondaryButtonText: "secondaryButtonText", secondaryButtonClass: "secondaryButtonClass", secondaryButtonType: "secondaryButtonType", secondaryButtonId: "secondaryButtonId", secondaryButtonDisabled: "secondaryButtonDisabled", closeOnEscape: "closeOnEscape", showHeader: "showHeader", showCloseButton: "showCloseButton", showPrimaryButton: "showPrimaryButton", showSecondaryButton: "showSecondaryButton", autofocusElement: "autofocusElement", modalDialogId: "modalDialogId", isOpen: "isOpen" }, outputs: { dialogOpen: "dialogOpen", dialogClose: "dialogClose", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "_primaryButton", first: true, predicate: ["primaryButton"], descendants: true, read: ElementRef }, { propertyName: "_secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n *ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n *ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "autoFocusCloseButton", "translations", "isScrollable", "closeOnEscape", "isDraggable", "isDragConstrained", "isOpen"], outputs: ["modalOpen", "modalClose", "closeClick", "closeEscapeKeypress", "isOpenChange"] }] });
|
|
233
251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDialogComponent, decorators: [{
|
|
234
252
|
type: Component,
|
|
235
253
|
args: [{ selector: 'sds-dialog', template: "<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n *ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n *ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n" }]
|
|
@@ -305,10 +323,12 @@ SdsModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
|
|
|
305
323
|
SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent,
|
|
306
324
|
SdsDialogComponent], imports: [CommonModule,
|
|
307
325
|
A11yModule,
|
|
326
|
+
DragDropModule,
|
|
308
327
|
FontAwesomeModule], exports: [SdsModalComponent,
|
|
309
328
|
SdsDialogComponent] });
|
|
310
329
|
SdsModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsModalModule, imports: [CommonModule,
|
|
311
330
|
A11yModule,
|
|
331
|
+
DragDropModule,
|
|
312
332
|
FontAwesomeModule] });
|
|
313
333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsModalModule, decorators: [{
|
|
314
334
|
type: NgModule,
|
|
@@ -319,6 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
319
339
|
imports: [
|
|
320
340
|
CommonModule,
|
|
321
341
|
A11yModule,
|
|
342
|
+
DragDropModule,
|
|
322
343
|
FontAwesomeModule
|
|
323
344
|
],
|
|
324
345
|
exports: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.ts","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.html","../../../projects/ngx-sds-components/src/lib/modal/modal.module.ts","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n Component,\r\n ElementRef,\r\n Input,\r\n OnInit,\r\n Output,\r\n ViewChild,\r\n EventEmitter,\r\n ContentChild,\r\n OnChanges,\r\n SimpleChanges\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { ModalTranslations } from './modal.model';\r\n\r\n@Component({\r\n selector: 'sds-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrls: ['./modal.component.scss'],\r\n})\r\nexport class SdsModalComponent implements OnInit, OnChanges {\r\n @ContentChild('header') headerContent: ElementRef = { nativeElement: undefined };\r\n\r\n @Input() public modalTitle?: string;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showFooter: boolean = true;\r\n @Input() public size: 'sm' | 'md' | 'lg' | 'xl' | '820' = 'md';\r\n @Input() public modalDialogId?: string;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public autoFocusCloseButton: boolean = false;\r\n\r\n @Input() public translations: ModalTranslations;\r\n @Input() public isScrollable = true;\r\n @Input() public closeOnEscape = false;\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public closeEscapeKeypress: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n public closeIcon = faXmark;\r\n\r\n // public isOpen: boolean = false;\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @ViewChild('modal', { static: false }) private _modal: ElementRef | undefined;\r\n @ViewChild('closeButton', { static: false }) private _closeButton: ElementRef | undefined;\r\n \r\n\r\n constructor() {\r\n this.translations = {\r\n close: undefined\r\n }\r\n }\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['isOpen']) {\r\n if (this.isOpen) {\r\n this.open();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public open(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'block';\r\n this.isOpen = true;\r\n if(this.autoFocusCloseButton)\r\n this._closeButton?.nativeElement.focus();\r\n this.modalOpen.emit();\r\n }\r\n }\r\n\r\n public close(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'none';\r\n this.isOpen = false;\r\n this.modalClose.emit();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onCloseButtonClick(){\r\n this.closeClick.emit();\r\n this.close();\r\n }\r\n\r\n onKeydown(event: KeyboardEvent){\r\n if (\r\n event.code === 'Escape' &&\r\n this.closeOnEscape && \r\n this._modal != undefined && \r\n this._modal.nativeElement.style.display === 'block'){\r\n // console.log(`${this.constructor.name} got event: ${event.code}`);\r\n this.closeEscapeKeypress.emit();\r\n this.close();\r\n }\r\n }\r\n}\r\n","<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n\r\n <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>","import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { SdsModalComponent } from '../modal.component';\r\nimport { ButtonType } from './dialog.types';\r\n\r\ntype modalButton = 'primary' | 'secondary' | 'close';\r\n\r\n@Component({\r\n selector: 'sds-dialog',\r\n templateUrl: './dialog.component.html',\r\n styleUrls: ['./dialog.component.scss'],\r\n})\r\nexport class SdsDialogComponent implements OnInit {\r\n @Input() public title: string = '';\r\n @Input() public closeText?: string = 'close';\r\n @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n\r\n @Input() public primaryButtonText: string = 'Ok';\r\n @Input() public primaryButtonClass: string = 'btn-primary';\r\n @Input() public primaryButtonType: ButtonType = 'button';\r\n @Input() public primaryButtonId?: string;\r\n @Input() public primaryButtonDisabled: boolean = false;\r\n \r\n @Input() public secondaryButtonText: string = 'Cancel'; \r\n @Input() public secondaryButtonClass: string = 'btn-secondary';\r\n @Input() public secondaryButtonType: ButtonType = 'button';\r\n @Input() public secondaryButtonId?: string;\r\n @Input() public secondaryButtonDisabled: boolean = false;\r\n\r\n @Input() public closeOnEscape: boolean = true;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public showPrimaryButton: boolean = true;\r\n @Input() public showSecondaryButton: boolean = true;\r\n @Input() public autofocusElement: 'primary' | 'secondary' | 'close' | 'content' = 'primary';\r\n\r\n @Input() public modalDialogId?: string;\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public dialogOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public dialogClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @ViewChild('modal', { static: true }) private _modal: SdsModalComponent | undefined;\r\n @ViewChild('content', { read: ElementRef, static: true }) private _content?: ElementRef;\r\n @ViewChild('primaryButton', { read: ElementRef, static: false }) private _primaryButton?: ElementRef;\r\n @ViewChild('secondaryButton', { read: ElementRef, static: false }) private _secondaryButton?: ElementRef;\r\n\r\n private _callback?: Function;\r\n private _callbackData: any;\r\n\r\n // public isOpen: boolean = false;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {\r\n if (this.autofocusElement == 'primary' && !this.showPrimaryButton) {\r\n this.autofocusElement = 'secondary';\r\n }\r\n if (this.autofocusElement == 'secondary' && !this.showSecondaryButton) {\r\n this.autofocusElement = 'close';\r\n }\r\n if (this.autofocusElement == 'close' && !this.showCloseButton) {\r\n this.autofocusElement = 'content';\r\n }\r\n }\r\n\r\n public open(callback?: (button: modalButton, data: any) => void, data?: any): void{\r\n this._callback = callback;\r\n this._callbackData = data;\r\n\r\n if (this._modal != undefined) {\r\n this.isOpen = true;\r\n // this._modal.open();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n private close(): void {\r\n if (this._modal != undefined) {\r\n this.isOpen = false;\r\n // this._modal.close();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onSecondaryClick(): void {\r\n if (this._callback) {\r\n this._callback('secondary', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onPrimaryClick(): void {\r\n if (this._callback) {\r\n this._callback('primary', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onCloseClick(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onCloseEscapeKeypress(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onModalClose(): void {\r\n this.dialogClose.emit();\r\n }\r\n\r\n public onModalOpen(): void {\r\n this.dialogOpen.emit();\r\n switch (this.autofocusElement) {\r\n case 'primary':\r\n this._primaryButton?.nativeElement.focus();\r\n break;\r\n case 'secondary':\r\n this._secondaryButton?.nativeElement.focus();\r\n break;\r\n case 'content':\r\n this._content?.nativeElement.focus();\r\n break;\r\n default:\r\n break;\r\n }\r\n } \r\n\r\n}\r\n\r\n\r\n\r\n","<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n *ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n *ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsModalComponent } from './modal.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { SdsDialogComponent } from './dialog/dialog.component';\r\nimport { A11yModule } from '@angular/cdk/a11y';\r\n\r\n\r\nconst components = [\r\n SdsModalComponent,\r\n SdsDialogComponent\r\n];\r\n\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule,\r\n A11yModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n]\r\n})\r\nexport class SdsModalModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2.SdsModalComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.ts","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.html","../../../projects/ngx-sds-components/src/lib/modal/modal.module.ts","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n Component,\r\n ElementRef,\r\n Input,\r\n OnInit,\r\n Output,\r\n ViewChild,\r\n EventEmitter,\r\n ContentChild,\r\n OnChanges,\r\n SimpleChanges\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { ModalTranslations } from './modal.model';\r\n\r\n@Component({\r\n selector: 'sds-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrls: ['./modal.component.scss'],\r\n})\r\nexport class SdsModalComponent implements OnInit, OnChanges {\r\n @ContentChild('header') headerContent: ElementRef = { nativeElement: undefined };\r\n\r\n @Input() public modalTitle?: string;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showFooter: boolean = true;\r\n @Input() public size: 'sm' | 'md' | 'lg' | 'xl' | '820' = 'md';\r\n @Input() public modalDialogId?: string;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public autoFocusCloseButton: boolean = false;\r\n\r\n @Input() public translations: ModalTranslations;\r\n @Input() public isScrollable = true;\r\n @Input() public closeOnEscape = false;\r\n\r\n /**\r\n * Allow the modal to be draggable by the user. Default is false.\r\n *\r\n * @memberof SdsModalComponent\r\n */\r\n @Input() public isDraggable = false;\r\n\r\n /**\r\n * Constrain modal to the viewport. Default is true.\r\n *\r\n * @memberof SdsModalComponent\r\n */\r\n @Input() public isDragConstrained = true;\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public closeEscapeKeypress: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n public closeIcon = faXmark;\r\n\r\n // public isOpen: boolean = false;\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @ViewChild('modal', { static: false }) private _modal: ElementRef | undefined;\r\n @ViewChild('closeButton', { static: false }) private _closeButton: ElementRef | undefined;\r\n \r\n\r\n constructor() {\r\n this.translations = {\r\n close: undefined\r\n }\r\n }\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['isOpen']) {\r\n if (this.isOpen) {\r\n this.open();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public open(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'block';\r\n this.isOpen = true;\r\n if(this.autoFocusCloseButton)\r\n this._closeButton?.nativeElement.focus();\r\n this.modalOpen.emit();\r\n }\r\n }\r\n\r\n public close(): void {\r\n if (this._modal != undefined) {\r\n this._modal.nativeElement.style.display = 'none';\r\n this.isOpen = false;\r\n this.modalClose.emit();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onCloseButtonClick(){\r\n this.closeClick.emit();\r\n this.close();\r\n }\r\n\r\n onKeydown(event: KeyboardEvent){\r\n if (\r\n event.code === 'Escape' &&\r\n this.closeOnEscape && \r\n this._modal != undefined && \r\n this._modal.nativeElement.style.display === 'block'){\r\n // console.log(`${this.constructor.name} got event: ${event.code}`);\r\n this.closeEscapeKeypress.emit();\r\n this.close();\r\n }\r\n }\r\n}\r\n","<div #modal class=\"modal modal-backdrop\" (keydown)=\"onKeydown($event)\" [cdkTrapFocus]=\"isOpen\" [cdkTrapFocusAutoCapture]=\"true\" >\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [attr.id]=\"modalDialogId\"\r\n [ngClass]=\"'modal-' + size\"\r\n role=\"document\"\r\n >\r\n <div \r\n class=\"modal-content\" \r\n cdkDrag [cdkDragDisabled]=\"!isDraggable\" [cdkDragBoundary]=\"isDragConstrained ? '.modal-backdrop' : ''\"\r\n >\r\n\r\n <div *ngIf=\"isDraggable\" class=\"modal-drag-handle\" cdkDragHandle></div>\r\n\r\n <div \r\n *ngIf=\"showHeader && headerContent\" \r\n class=\"modal-header\" \r\n >\r\n <ng-content select='header'></ng-content>\r\n </div> \r\n\r\n <div \r\n *ngIf=\"showHeader && !headerContent\" \r\n class=\"modal-header\"\r\n >\r\n\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n #closeButton\r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close sds-fs-75\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div \r\n class=\"modal-body\"\r\n [class.pt-0]=\"showHeader\"\r\n [class.pb-0]=\"showFooter\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div *ngIf=\"showFooter\" class=\"modal-footer\">\r\n <ng-content select=\"footer\"></ng-content>\r\n </div> \r\n </div>\r\n </div>\r\n</div>","import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { SdsModalComponent } from '../modal.component';\r\nimport { ButtonType } from './dialog.types';\r\n\r\ntype modalButton = 'primary' | 'secondary' | 'close';\r\n\r\n@Component({\r\n selector: 'sds-dialog',\r\n templateUrl: './dialog.component.html',\r\n styleUrls: ['./dialog.component.scss'],\r\n})\r\nexport class SdsDialogComponent implements OnInit {\r\n @Input() public title: string = '';\r\n @Input() public closeText?: string = 'close';\r\n @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n\r\n @Input() public primaryButtonText: string = 'Ok';\r\n @Input() public primaryButtonClass: string = 'btn-primary';\r\n @Input() public primaryButtonType: ButtonType = 'button';\r\n @Input() public primaryButtonId?: string;\r\n @Input() public primaryButtonDisabled: boolean = false;\r\n \r\n @Input() public secondaryButtonText: string = 'Cancel'; \r\n @Input() public secondaryButtonClass: string = 'btn-secondary';\r\n @Input() public secondaryButtonType: ButtonType = 'button';\r\n @Input() public secondaryButtonId?: string;\r\n @Input() public secondaryButtonDisabled: boolean = false;\r\n\r\n @Input() public closeOnEscape: boolean = true;\r\n @Input() public showHeader: boolean = true;\r\n @Input() public showCloseButton: boolean = true;\r\n @Input() public showPrimaryButton: boolean = true;\r\n @Input() public showSecondaryButton: boolean = true;\r\n @Input() public autofocusElement: 'primary' | 'secondary' | 'close' | 'content' = 'primary';\r\n\r\n @Input() public modalDialogId?: string;\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public dialogOpen: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n /**\r\n * @deprecated Use isOpenChange instead\r\n */\r\n @Output() public dialogClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n\r\n @Input() public isOpen: boolean = false;\r\n @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n\r\n @ViewChild('modal', { static: true }) private _modal: SdsModalComponent | undefined;\r\n @ViewChild('content', { read: ElementRef, static: true }) private _content?: ElementRef;\r\n @ViewChild('primaryButton', { read: ElementRef, static: false }) private _primaryButton?: ElementRef;\r\n @ViewChild('secondaryButton', { read: ElementRef, static: false }) private _secondaryButton?: ElementRef;\r\n\r\n private _callback?: Function;\r\n private _callbackData: any;\r\n\r\n // public isOpen: boolean = false;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {\r\n if (this.autofocusElement == 'primary' && !this.showPrimaryButton) {\r\n this.autofocusElement = 'secondary';\r\n }\r\n if (this.autofocusElement == 'secondary' && !this.showSecondaryButton) {\r\n this.autofocusElement = 'close';\r\n }\r\n if (this.autofocusElement == 'close' && !this.showCloseButton) {\r\n this.autofocusElement = 'content';\r\n }\r\n }\r\n\r\n public open(callback?: (button: modalButton, data: any) => void, data?: any): void{\r\n this._callback = callback;\r\n this._callbackData = data;\r\n\r\n if (this._modal != undefined) {\r\n this.isOpen = true;\r\n // this._modal.open();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n private close(): void {\r\n if (this._modal != undefined) {\r\n this.isOpen = false;\r\n // this._modal.close();\r\n\r\n this.isOpenChange.emit(this.isOpen);\r\n }\r\n }\r\n\r\n public onSecondaryClick(): void {\r\n if (this._callback) {\r\n this._callback('secondary', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onPrimaryClick(): void {\r\n if (this._callback) {\r\n this._callback('primary', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onCloseClick(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onCloseEscapeKeypress(): void {\r\n if (this._callback) {\r\n this._callback('close', this._callbackData);\r\n }\r\n this.close();\r\n }\r\n\r\n public onModalClose(): void {\r\n this.dialogClose.emit();\r\n }\r\n\r\n public onModalOpen(): void {\r\n this.dialogOpen.emit();\r\n switch (this.autofocusElement) {\r\n case 'primary':\r\n this._primaryButton?.nativeElement.focus();\r\n break;\r\n case 'secondary':\r\n this._secondaryButton?.nativeElement.focus();\r\n break;\r\n case 'content':\r\n this._content?.nativeElement.focus();\r\n break;\r\n default:\r\n break;\r\n }\r\n } \r\n\r\n}\r\n\r\n\r\n\r\n","<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [modalDialogId]=\"modalDialogId\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n [autoFocusCloseButton]=\"autofocusElement === 'close'\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n (closeClick)=\"onCloseClick()\"\r\n (closeEscapeKeypress)=\"onCloseEscapeKeypress()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n [(isOpen)]=\"isOpen\"\r\n>\r\n\r\n <div #content [attr.tabindex]=\"autofocusElement === 'content' ? 0 : undefined\" >\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n #secondaryButton\r\n *ngIf=\"showSecondaryButton\"\r\n [attr.id]=\"secondaryButtonId\"\r\n [disabled]=\"secondaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n #primaryButton\r\n *ngIf=\"showPrimaryButton\"\r\n [attr.id]=\"primaryButtonId\"\r\n [disabled]=\"primaryButtonDisabled\"\r\n class=\"btn\"\r\n [class]=\"primaryButtonClass\"\r\n (click)=\"onPrimaryClick()\"\r\n >{{primaryButtonText}}</button>\r\n </ng-container>\r\n</sds-modal>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsModalComponent } from './modal.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { SdsDialogComponent } from './dialog/dialog.component';\r\nimport { A11yModule } from '@angular/cdk/a11y';\r\nimport { DragDropModule} from '@angular/cdk/drag-drop';\r\n\r\nconst components = [\r\n SdsModalComponent,\r\n SdsDialogComponent\r\n];\r\n\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule,\r\n A11yModule,\r\n DragDropModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n]\r\n})\r\nexport class SdsModalModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2.SdsModalComponent"],"mappings":"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"}
|
|
@@ -68,6 +68,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
68
68
|
type: Input
|
|
69
69
|
}] } });
|
|
70
70
|
|
|
71
|
+
function removeQueryParams(url) {
|
|
72
|
+
return url.split('?')[0];
|
|
73
|
+
}
|
|
74
|
+
|
|
71
75
|
class NavigationRouteActivePipe {
|
|
72
76
|
transform(currentUrl, ...args) {
|
|
73
77
|
if (!currentUrl || currentUrl?.length === 0) {
|
|
@@ -118,6 +122,7 @@ class SdsNavigationGroupComponent {
|
|
|
118
122
|
this.icon = '';
|
|
119
123
|
this.defaultRouterLink = '';
|
|
120
124
|
this.reverse = false;
|
|
125
|
+
this.ignoreQueryParamsInActiveRoute = false;
|
|
121
126
|
this.routerLinkComponents = new QueryList();
|
|
122
127
|
this.active = false;
|
|
123
128
|
this.faAngleUpRegular = faAngleUp;
|
|
@@ -131,7 +136,8 @@ class SdsNavigationGroupComponent {
|
|
|
131
136
|
ngOnInit() {
|
|
132
137
|
this._router.events.pipe(filter((event) => event instanceof NavigationStart), takeUntil(this._unsubscribe)).subscribe((event) => {
|
|
133
138
|
if (event instanceof NavigationStart) {
|
|
134
|
-
const
|
|
139
|
+
const activeRoute = this.ignoreQueryParamsInActiveRoute ? removeQueryParams(event.url) : event.url;
|
|
140
|
+
const route = activeRoute.split('/').filter(item => item.length > 0);
|
|
135
141
|
this.currentUrl = route;
|
|
136
142
|
}
|
|
137
143
|
});
|
|
@@ -142,7 +148,7 @@ class SdsNavigationGroupComponent {
|
|
|
142
148
|
}
|
|
143
149
|
}
|
|
144
150
|
SdsNavigationGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
-
SdsNavigationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationGroupComponent, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: "navigationGroupNestedRoutes", text: "text", icon: "icon", defaultRouterLink: "defaultRouterLink", reverse: "reverse" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], ngImport: i0, template: "<div class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n [class.flex-column-reverse]=\"reverse\"\r\n [class.flex-column]=\"!reverse\"\r\n [class]=\"{'active': currentUrl | navigationRouteActive :navigationGroupNestedRoutes: defaultRouterLink}\">\r\n <a \r\n class=\"w-100 sds-navigation-item-content\"\r\n style=\"cursor: pointer\"\r\n [routerLink]=\"[defaultRouterLink]\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n <div class=\"sds-navigation-text\">\r\n {{ text }}\r\n </div>\r\n <div class=\"text-right\">\r\n <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n </div>\r\n </div>\r\n </a>\r\n <div class=\"sds-navigation-group-items\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: NavigationRouteActivePipe, name: "navigationRouteActive" }] });
|
|
151
|
+
SdsNavigationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationGroupComponent, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: "navigationGroupNestedRoutes", text: "text", icon: "icon", defaultRouterLink: "defaultRouterLink", reverse: "reverse", ignoreQueryParamsInActiveRoute: "ignoreQueryParamsInActiveRoute" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], ngImport: i0, template: "<div class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n [class.flex-column-reverse]=\"reverse\"\r\n [class.flex-column]=\"!reverse\"\r\n [class]=\"{'active': currentUrl | navigationRouteActive :navigationGroupNestedRoutes: defaultRouterLink}\">\r\n <a \r\n class=\"w-100 sds-navigation-item-content\"\r\n style=\"cursor: pointer\"\r\n [routerLink]=\"[defaultRouterLink]\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n <div class=\"sds-navigation-text\">\r\n {{ text }}\r\n </div>\r\n <div class=\"text-right\">\r\n <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n </div>\r\n </div>\r\n </a>\r\n <div class=\"sds-navigation-group-items\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: NavigationRouteActivePipe, name: "navigationRouteActive" }] });
|
|
146
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
|
|
147
153
|
type: Component,
|
|
148
154
|
args: [{ selector: 'sds-navigation-group', template: "<div class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n [class.flex-column-reverse]=\"reverse\"\r\n [class.flex-column]=\"!reverse\"\r\n [class]=\"{'active': currentUrl | navigationRouteActive :navigationGroupNestedRoutes: defaultRouterLink}\">\r\n <a \r\n class=\"w-100 sds-navigation-item-content\"\r\n style=\"cursor: pointer\"\r\n [routerLink]=\"[defaultRouterLink]\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"sds-navigation-icon\" >\r\n <ng-content select=\"[navigationIcon]\"></ng-content>\r\n </div>\r\n <div class=\"sds-navigation-text\">\r\n {{ text }}\r\n </div>\r\n <div class=\"text-right\">\r\n <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n </div>\r\n </div>\r\n </a>\r\n <div class=\"sds-navigation-group-items\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>\r\n" }]
|
|
@@ -156,6 +162,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
156
162
|
type: Input
|
|
157
163
|
}], reverse: [{
|
|
158
164
|
type: Input
|
|
165
|
+
}], ignoreQueryParamsInActiveRoute: [{
|
|
166
|
+
type: Input
|
|
159
167
|
}], routerLinkComponents: [{
|
|
160
168
|
type: ContentChildren,
|
|
161
169
|
args: [SdsNavigationRouteLinkComponent]
|
|
@@ -217,8 +225,11 @@ class SdsNavigationUserProfileComponent {
|
|
|
217
225
|
this.showProfile = true;
|
|
218
226
|
this.signOutText = 'Sign out';
|
|
219
227
|
this.profileText = 'Profile';
|
|
228
|
+
this.showNotificationBadge = false;
|
|
229
|
+
this.newNotificationsText = 'New Notifications';
|
|
220
230
|
this.profileClick = new EventEmitter();
|
|
221
231
|
this.signOutClick = new EventEmitter();
|
|
232
|
+
this.notificationBadgeClick = new EventEmitter();
|
|
222
233
|
this.showOptions = false;
|
|
223
234
|
}
|
|
224
235
|
ngOnInit() { }
|
|
@@ -230,12 +241,16 @@ class SdsNavigationUserProfileComponent {
|
|
|
230
241
|
this.showOptions = false;
|
|
231
242
|
this.signOutClick.emit();
|
|
232
243
|
}
|
|
244
|
+
onNotificationBadgeClick(event) {
|
|
245
|
+
event.stopPropagation();
|
|
246
|
+
this.notificationBadgeClick.emit();
|
|
247
|
+
}
|
|
233
248
|
}
|
|
234
249
|
SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
235
|
-
SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n (click)=\"showOptions = !showOptions\">\r\n\r\n <sds-avatar\r\n
|
|
250
|
+
SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { name: "name", id: "id", email: "email", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n (click)=\"showOptions = !showOptions\">\r\n\r\n <div class=\"position-relative\">\r\n\r\n <sds-avatar\r\n [text]=\"name\"\r\n [colorKey]=\"id\"> \r\n </sds-avatar>\r\n\r\n <span \r\n *ngIf=\"showNotificationBadge\"\r\n class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n (click)=\"onNotificationBadgeClick($event)\">\r\n <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n </span>\r\n </div>\r\n\r\n \r\n <span class=\"truncate-two-lines\">\r\n {{name}}\r\n </span> \r\n\r\n</div> \r\n\r\n<dx-popover\r\n target=\".sds-navigation-user-profile-container\"\r\n minWidth=\"12.5rem\"\r\n [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n [(visible)]=\"showOptions\"\r\n >\r\n\r\n <div class=\"border-bottom\">\r\n <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n <div class=\"me-2\">\r\n <h5 class=\"m-0\">\r\n {{name}}\r\n </h5>\r\n <span class=\"font-size-3\">{{email}}</span>\r\n </div>\r\n\r\n <sds-avatar\r\n [text]=\"name\"\r\n [colorKey]=\"id\"\r\n [size]=\"3\"> \r\n </sds-avatar>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n\r\n <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n <li *ngIf=\"showProfile\">\r\n <a \r\n class=\"d-block text-black\"\r\n (click)=\"onProfileClick()\" \r\n >\r\n {{profileText}}\r\n </a>\r\n </li>\r\n\r\n <li>\r\n <a \r\n *ngIf=\"showSignOut\"\r\n class=\"d-block text-black\"\r\n (click)=\"onSignOutClick()\" \r\n >\r\n {{signOutText}}\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size"] }, { kind: "component", type: i3$1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
|
|
236
251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
|
|
237
252
|
type: Component,
|
|
238
|
-
args: [{ selector: 'sds-navigation-user-profile', template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n (click)=\"showOptions = !showOptions\">\r\n\r\n <sds-avatar\r\n
|
|
253
|
+
args: [{ selector: 'sds-navigation-user-profile', template: "<div class=\"d-flex flex-row align-items-center gap-2 sds-navigation-user-profile-container\"\r\n (click)=\"showOptions = !showOptions\">\r\n\r\n <div class=\"position-relative\">\r\n\r\n <sds-avatar\r\n [text]=\"name\"\r\n [colorKey]=\"id\"> \r\n </sds-avatar>\r\n\r\n <span \r\n *ngIf=\"showNotificationBadge\"\r\n class=\"position-absolute notification-badge translate-middle bg-danger border border-light rounded-circle\"\r\n (click)=\"onNotificationBadgeClick($event)\">\r\n <span class=\"visually-hidden\">{{newNotificationsText}}</span>\r\n </span>\r\n </div>\r\n\r\n \r\n <span class=\"truncate-two-lines\">\r\n {{name}}\r\n </span> \r\n\r\n</div> \r\n\r\n<dx-popover\r\n target=\".sds-navigation-user-profile-container\"\r\n minWidth=\"12.5rem\"\r\n [wrapperAttr]=\"{ class: 'sds-navigation-user-profile-popover' }\"\r\n [(visible)]=\"showOptions\"\r\n >\r\n\r\n <div class=\"border-bottom\">\r\n <div class=\"d-flex flex-row gap-3 align-items-center p-2 mb-1 px-3\">\r\n\r\n <div class=\"me-2\">\r\n <h5 class=\"m-0\">\r\n {{name}}\r\n </h5>\r\n <span class=\"font-size-3\">{{email}}</span>\r\n </div>\r\n\r\n <sds-avatar\r\n [text]=\"name\"\r\n [colorKey]=\"id\"\r\n [size]=\"3\"> \r\n </sds-avatar>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n\r\n <ul class=\"list-unstyled sds-navigation-user-profile-actions mb-0 mt-2\">\r\n <li *ngIf=\"showProfile\">\r\n <a \r\n class=\"d-block text-black\"\r\n (click)=\"onProfileClick()\" \r\n >\r\n {{profileText}}\r\n </a>\r\n </li>\r\n\r\n <li>\r\n <a \r\n *ngIf=\"showSignOut\"\r\n class=\"d-block text-black\"\r\n (click)=\"onSignOutClick()\" \r\n >\r\n {{signOutText}}\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n</dx-popover>", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.sds-navigation-user-profile-actions li{margin-bottom:.25rem}.sds-navigation-user-profile-actions li a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem 1rem;width:100%;border-radius:4px}.sds-navigation-user-profile-actions li a:hover{background-color:var(--bs-gray-200);cursor:pointer}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:.5rem;font-size:1rem}\n"] }]
|
|
239
254
|
}], ctorParameters: function () { return []; }, propDecorators: { name: [{
|
|
240
255
|
type: Input
|
|
241
256
|
}], id: [{
|
|
@@ -250,10 +265,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
250
265
|
type: Input
|
|
251
266
|
}], profileText: [{
|
|
252
267
|
type: Input
|
|
268
|
+
}], showNotificationBadge: [{
|
|
269
|
+
type: Input
|
|
270
|
+
}], newNotificationsText: [{
|
|
271
|
+
type: Input
|
|
253
272
|
}], profileClick: [{
|
|
254
273
|
type: Output
|
|
255
274
|
}], signOutClick: [{
|
|
256
275
|
type: Output
|
|
276
|
+
}], notificationBadgeClick: [{
|
|
277
|
+
type: Output
|
|
257
278
|
}] } });
|
|
258
279
|
|
|
259
280
|
class SdsProductHomeComponent {
|