@spicainternational/ngx-sds-components 5.10.0 → 5.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/esm2020/src/lib/date-picker/date-picker.component.mjs +3 -3
  2. package/esm2020/src/lib/modal/dialog/dialog.component.mjs +40 -4
  3. package/esm2020/src/lib/modal/modal.component.mjs +15 -5
  4. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +2 -2
  5. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
  6. package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs +54 -6
  7. package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
  8. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +2 -2
  9. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
  10. package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs +52 -6
  11. package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs.map +1 -1
  12. package/package.json +1 -1
  13. package/src/lib/modal/dialog/dialog.component.d.ts +8 -1
  14. package/src/lib/modal/modal.component.d.ts +4 -1
package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ContentChild, Input, Output, ViewChild, NgModule } from '@angular/core';
2
+ import { EventEmitter, Component, ContentChild, Input, Output, ViewChild, ElementRef, NgModule } from '@angular/core';
3
3
  import * as i2 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import { faXmark } from '@fortawesome/pro-regular-svg-icons';
@@ -14,12 +14,14 @@ class SdsModalComponent {
14
14
  this.showFooter = true;
15
15
  this.size = 'md';
16
16
  this.showCloseButton = true;
17
+ this.autoFocusCloseButton = false;
17
18
  this.isScrollable = true;
18
19
  this.closeOnEscape = false;
19
20
  this.modalOpen = new EventEmitter();
20
21
  this.modalClose = new EventEmitter();
21
22
  this.closeClick = new EventEmitter();
22
23
  this.closeIcon = faXmark;
24
+ this.isOpen = false;
23
25
  this.translations = {
24
26
  close: undefined
25
27
  };
@@ -28,13 +30,16 @@ class SdsModalComponent {
28
30
  open() {
29
31
  if (this._modal != undefined) {
30
32
  this._modal.nativeElement.style.display = 'block';
31
- this._modal.nativeElement.focus();
33
+ this.isOpen = true;
34
+ if (this.autoFocusCloseButton)
35
+ this._closeButton?.nativeElement.focus();
32
36
  this.modalOpen.emit();
33
37
  }
34
38
  }
35
39
  close() {
36
40
  if (this._modal != undefined) {
37
41
  this._modal.nativeElement.style.display = 'none';
42
+ this.isOpen = false;
38
43
  this.modalClose.emit();
39
44
  }
40
45
  }
@@ -53,10 +58,10 @@ class SdsModalComponent {
53
58
  }
54
59
  }
55
60
  SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
56
- SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton", translations: "translations", isScrollable: "isScrollable", closeOnEscape: "closeOnEscape" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [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 *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\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:hover{background-color:#e9ecef}.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}\n"], directives: [{ type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
61
+ SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", 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" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", closeClick: "closeClick" }, 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 }], 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 *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\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\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\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:hover{background-color:#e9ecef}.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}\n"], directives: [{ type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
57
62
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
58
63
  type: Component,
59
- args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [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 *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\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:hover{background-color:#e9ecef}.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}\n"] }]
64
+ 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 *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\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\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\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:hover{background-color:#e9ecef}.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}\n"] }]
60
65
  }], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
61
66
  type: ContentChild,
62
67
  args: ['header']
@@ -72,6 +77,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
72
77
  type: Input
73
78
  }], showCloseButton: [{
74
79
  type: Input
80
+ }], autoFocusCloseButton: [{
81
+ type: Input
75
82
  }], translations: [{
76
83
  type: Input
77
84
  }], isScrollable: [{
@@ -87,6 +94,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
87
94
  }], _modal: [{
88
95
  type: ViewChild,
89
96
  args: ['modal', { static: false }]
97
+ }], _closeButton: [{
98
+ type: ViewChild,
99
+ args: ['closeButton', { static: false }]
90
100
  }] } });
91
101
 
92
102
  class SdsDialogComponent {
@@ -100,23 +110,31 @@ class SdsDialogComponent {
100
110
  this.secondaryButtonText = 'Cancel';
101
111
  this.secondaryButtonClass = 'btn-secondary';
102
112
  this.secondaryButtonType = 'button';
113
+ this.closeOnEscape = true;
103
114
  this.showHeader = true;
104
115
  this.showCloseButton = true;
105
116
  this.showPrimaryButton = true;
106
117
  this.showSecondaryButton = true;
118
+ this.autofocusElement = this.showPrimaryButton ? 'primary' :
119
+ this.showSecondaryButton ? 'secondary' :
120
+ this.showCloseButton ? 'close' :
121
+ 'content';
107
122
  this.dialogOpen = new EventEmitter();
108
123
  this.dialogClose = new EventEmitter();
124
+ this.isOpen = false;
109
125
  }
110
126
  ngOnInit() { }
111
127
  open(callback, data) {
112
128
  this._callback = callback;
113
129
  this._callbackData = data;
114
130
  if (this._modal != undefined) {
131
+ this.isOpen = true;
115
132
  this._modal.open();
116
133
  }
117
134
  }
118
135
  close() {
119
136
  if (this._modal != undefined) {
137
+ this.isOpen = false;
120
138
  this._modal.close();
121
139
  }
122
140
  }
@@ -142,13 +160,26 @@ class SdsDialogComponent {
142
160
  }
143
161
  onModalOpen() {
144
162
  this.dialogOpen.emit();
163
+ switch (this.autofocusElement) {
164
+ case 'primary':
165
+ this._primaryButton?.nativeElement.focus();
166
+ break;
167
+ case 'secondary':
168
+ this._secondaryButton?.nativeElement.focus();
169
+ break;
170
+ case 'content':
171
+ this._content?.nativeElement.focus();
172
+ break;
173
+ default:
174
+ break;
175
+ }
145
176
  }
146
177
  }
147
178
  SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
148
- SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", primaryButtonClass: "primaryButtonClass", primaryButtonType: "primaryButtonType", secondaryButtonText: "secondaryButtonText", secondaryButtonClass: "secondaryButtonClass", secondaryButtonType: "secondaryButtonType", showHeader: "showHeader", showCloseButton: "showCloseButton", showPrimaryButton: "showPrimaryButton", showSecondaryButton: "showSecondaryButton" }, outputs: { dialogOpen: "dialogOpen", dialogClose: "dialogClose" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n (closeClick)=\"onCloseClick()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n>\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n *ngIf=\"showSecondaryButton\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n *ngIf=\"showPrimaryButton\"\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: [""], components: [{ type: SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "translations", "isScrollable", "closeOnEscape"], outputs: ["modalOpen", "modalClose", "closeClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
179
+ SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", primaryButtonClass: "primaryButtonClass", primaryButtonType: "primaryButtonType", secondaryButtonText: "secondaryButtonText", secondaryButtonClass: "secondaryButtonClass", secondaryButtonType: "secondaryButtonType", closeOnEscape: "closeOnEscape", showHeader: "showHeader", showCloseButton: "showCloseButton", showPrimaryButton: "showPrimaryButton", showSecondaryButton: "showSecondaryButton", autofocusElement: "autofocusElement", modalDialogId: "modalDialogId" }, outputs: { dialogOpen: "dialogOpen", dialogClose: "dialogClose" }, 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 (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\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 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 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: [""], components: [{ type: SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "autoFocusCloseButton", "translations", "isScrollable", "closeOnEscape"], outputs: ["modalOpen", "modalClose", "closeClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
149
180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, decorators: [{
150
181
  type: Component,
151
- args: [{ selector: 'sds-dialog', template: "<sds-modal\r\n #modal\r\n [modalTitle]=\"title\"\r\n [size]=\"size\"\r\n [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n (closeClick)=\"onCloseClick()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n>\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n *ngIf=\"showSecondaryButton\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n *ngIf=\"showPrimaryButton\"\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: [""] }]
182
+ 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 (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\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 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 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: [""] }]
152
183
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
153
184
  type: Input
154
185
  }], closeText: [{
@@ -167,6 +198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
167
198
  type: Input
168
199
  }], secondaryButtonType: [{
169
200
  type: Input
201
+ }], closeOnEscape: [{
202
+ type: Input
170
203
  }], showHeader: [{
171
204
  type: Input
172
205
  }], showCloseButton: [{
@@ -175,6 +208,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
175
208
  type: Input
176
209
  }], showSecondaryButton: [{
177
210
  type: Input
211
+ }], autofocusElement: [{
212
+ type: Input
213
+ }], modalDialogId: [{
214
+ type: Input
178
215
  }], dialogOpen: [{
179
216
  type: Output
180
217
  }], dialogClose: [{
@@ -182,6 +219,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
182
219
  }], _modal: [{
183
220
  type: ViewChild,
184
221
  args: ['modal', { static: true }]
222
+ }], _content: [{
223
+ type: ViewChild,
224
+ args: ['content', { read: ElementRef, static: true }]
225
+ }], _primaryButton: [{
226
+ type: ViewChild,
227
+ args: ['primaryButton', { read: ElementRef, static: false }]
228
+ }], _secondaryButton: [{
229
+ type: ViewChild,
230
+ args: ['secondaryButton', { read: ElementRef, static: false }]
185
231
  }] } });
186
232
 
187
233
  const components = [
package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs.map CHANGED
@@ -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 HostListener,\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 {\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' = 'md';\r\n @Input() public modalDialogId?: string;\r\n @Input() public showCloseButton: boolean = true;\r\n\r\n @Input() public translations: ModalTranslations;\r\n @Input() public isScrollable = true;\r\n @Input() public closeOnEscape = false;\r\n\r\n @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n public closeIcon = faXmark;\r\n\r\n @ViewChild('modal', { static: false }) private _modal: ElementRef | undefined;\r\n \r\n\r\n constructor() {\r\n this.translations = {\r\n close: undefined\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._modal.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.modalClose.emit();\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.close();\r\n }\r\n }\r\n}\r\n","<div #modal class=\"modal\" (keydown)=\"onKeydown($event)\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\r\n <div\r\n class=\"modal-dialog modal-dialog-centered\"\r\n [class.modal-dialog-scrollable] = \"isScrollable\"\r\n [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 *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\r\n <h5 class=\"modal-title\">{{modalTitle}}</h5>\r\n <button \r\n *ngIf=\"showCloseButton\"\r\n type=\"button\" \r\n class=\"btn-close\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\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, 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 \r\n @Input() public secondaryButtonText: string = 'Cancel';\r\n @Input() public secondaryButtonClass: string = 'btn-secondary';\r\n @Input() public secondaryButtonType: ButtonType = 'button';\r\n\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\r\n @Output() public dialogOpen: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public dialogClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @ViewChild('modal', { static: true }) private _modal: SdsModalComponent | undefined;\r\n\r\n private _callback?: Function;\r\n private _callbackData: any;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\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._modal.open();\r\n }\r\n }\r\n\r\n private close(): void {\r\n if (this._modal != undefined) {\r\n this._modal.close();\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 }\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 } \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 [showCloseButton]=\"showCloseButton\"\r\n [showHeader]=\"showHeader\"\r\n [translations]=\"{ close: closeText}\"\r\n (closeClick)=\"onCloseClick()\"\r\n (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\r\n>\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ng-container #footer ngProjectAs='footer'>\r\n <button\r\n *ngIf=\"showSecondaryButton\"\r\n class=\"btn\"\r\n [class]=\"secondaryButtonClass\"\r\n (click)=\"onSecondaryClick()\"\r\n >{{secondaryButtonText}}</button>\r\n <button\r\n *ngIf=\"showPrimaryButton\"\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":["i1.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} 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 {\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' = '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 @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n @Output() public closeClick: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n public closeIcon = faXmark;\r\n\r\n public isOpen: boolean = false;\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\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 }\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.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 *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\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\" \r\n [title]=\"translations.close ?? ''\"\r\n (click)=\"onCloseButtonClick()\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body\">\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 \r\n @Input() public secondaryButtonText: string = 'Cancel'; \r\n @Input() public secondaryButtonClass: string = 'btn-secondary';\r\n @Input() public secondaryButtonType: ButtonType = 'button';\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' = \r\n this.showPrimaryButton ? 'primary' :\r\n this.showSecondaryButton ? 'secondary' :\r\n this.showCloseButton ? 'close' :\r\n 'content';\r\n\r\n @Input() public modalDialogId?: string;\r\n\r\n\r\n @Output() public dialogOpen: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() public dialogClose: EventEmitter<void> = new EventEmitter<void>();\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\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 }\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 }\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 }\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 (modalClose)=\"onModalClose()\"\r\n (modalOpen)=\"onModalOpen()\"\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 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 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":["i1.SdsModalComponent"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicainternational/ngx-sds-components",
3
- "version": "5.10.0",
3
+ "version": "5.10.2",
4
4
  "description": "Spica design system angular components.",
5
5
  "peerDependencies": {
6
6
  "@angular/common": ">=13.3.0",
package/src/lib/modal/dialog/dialog.component.d.ts CHANGED
@@ -12,15 +12,22 @@ export declare class SdsDialogComponent implements OnInit {
12
12
  secondaryButtonText: string;
13
13
  secondaryButtonClass: string;
14
14
  secondaryButtonType: ButtonType;
15
+ closeOnEscape: boolean;
15
16
  showHeader: boolean;
16
17
  showCloseButton: boolean;
17
18
  showPrimaryButton: boolean;
18
19
  showSecondaryButton: boolean;
20
+ autofocusElement: 'primary' | 'secondary' | 'close' | 'content';
21
+ modalDialogId?: string;
19
22
  dialogOpen: EventEmitter<void>;
20
23
  dialogClose: EventEmitter<void>;
21
24
  private _modal;
25
+ private _content?;
26
+ private _primaryButton?;
27
+ private _secondaryButton?;
22
28
  private _callback?;
23
29
  private _callbackData;
30
+ isOpen: boolean;
24
31
  constructor();
25
32
  ngOnInit(): void;
26
33
  open(callback?: (button: modalButton, data: any) => void, data?: any): void;
@@ -31,6 +38,6 @@ export declare class SdsDialogComponent implements OnInit {
31
38
  onModalClose(): void;
32
39
  onModalOpen(): void;
33
40
  static ɵfac: i0.ɵɵFactoryDeclaration<SdsDialogComponent, never>;
34
- static ɵcmp: i0.ɵɵComponentDeclaration<SdsDialogComponent, "sds-dialog", never, { "title": "title"; "closeText": "closeText"; "size": "size"; "primaryButtonText": "primaryButtonText"; "primaryButtonClass": "primaryButtonClass"; "primaryButtonType": "primaryButtonType"; "secondaryButtonText": "secondaryButtonText"; "secondaryButtonClass": "secondaryButtonClass"; "secondaryButtonType": "secondaryButtonType"; "showHeader": "showHeader"; "showCloseButton": "showCloseButton"; "showPrimaryButton": "showPrimaryButton"; "showSecondaryButton": "showSecondaryButton"; }, { "dialogOpen": "dialogOpen"; "dialogClose": "dialogClose"; }, never, ["*"]>;
41
+ static ɵcmp: i0.ɵɵComponentDeclaration<SdsDialogComponent, "sds-dialog", never, { "title": "title"; "closeText": "closeText"; "size": "size"; "primaryButtonText": "primaryButtonText"; "primaryButtonClass": "primaryButtonClass"; "primaryButtonType": "primaryButtonType"; "secondaryButtonText": "secondaryButtonText"; "secondaryButtonClass": "secondaryButtonClass"; "secondaryButtonType": "secondaryButtonType"; "closeOnEscape": "closeOnEscape"; "showHeader": "showHeader"; "showCloseButton": "showCloseButton"; "showPrimaryButton": "showPrimaryButton"; "showSecondaryButton": "showSecondaryButton"; "autofocusElement": "autofocusElement"; "modalDialogId": "modalDialogId"; }, { "dialogOpen": "dialogOpen"; "dialogClose": "dialogClose"; }, never, ["*"]>;
35
42
  }
36
43
  export {};
package/src/lib/modal/modal.component.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare class SdsModalComponent implements OnInit {
9
9
  size: 'sm' | 'md' | 'lg' | 'xl';
10
10
  modalDialogId?: string;
11
11
  showCloseButton: boolean;
12
+ autoFocusCloseButton: boolean;
12
13
  translations: ModalTranslations;
13
14
  isScrollable: boolean;
14
15
  closeOnEscape: boolean;
@@ -16,7 +17,9 @@ export declare class SdsModalComponent implements OnInit {
16
17
  modalClose: EventEmitter<void>;
17
18
  closeClick: EventEmitter<void>;
18
19
  closeIcon: import("@fortawesome/fontawesome-common-types").IconDefinition;
20
+ isOpen: boolean;
19
21
  private _modal;
22
+ private _closeButton;
20
23
  constructor();
21
24
  ngOnInit(): void;
22
25
  open(): void;
@@ -24,5 +27,5 @@ export declare class SdsModalComponent implements OnInit {
24
27
  onCloseButtonClick(): void;
25
28
  onKeydown(event: KeyboardEvent): void;
26
29
  static ɵfac: i0.ɵɵFactoryDeclaration<SdsModalComponent, never>;
27
- static ɵcmp: i0.ɵɵComponentDeclaration<SdsModalComponent, "sds-modal", never, { "modalTitle": "modalTitle"; "showHeader": "showHeader"; "showFooter": "showFooter"; "size": "size"; "modalDialogId": "modalDialogId"; "showCloseButton": "showCloseButton"; "translations": "translations"; "isScrollable": "isScrollable"; "closeOnEscape": "closeOnEscape"; }, { "modalOpen": "modalOpen"; "modalClose": "modalClose"; "closeClick": "closeClick"; }, ["headerContent"], ["header", "*", "footer"]>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<SdsModalComponent, "sds-modal", never, { "modalTitle": "modalTitle"; "showHeader": "showHeader"; "showFooter": "showFooter"; "size": "size"; "modalDialogId": "modalDialogId"; "showCloseButton": "showCloseButton"; "autoFocusCloseButton": "autoFocusCloseButton"; "translations": "translations"; "isScrollable": "isScrollable"; "closeOnEscape": "closeOnEscape"; }, { "modalOpen": "modalOpen"; "modalClose": "modalClose"; "closeClick": "closeClick"; }, ["headerContent"], ["header", "*", "footer"]>;
28
31
  }