@skyux/modals 11.31.0 → 12.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +871 -865
- package/fesm2022/skyux-modals-testing.mjs +11 -11
- package/fesm2022/skyux-modals-testing.mjs.map +1 -1
- package/fesm2022/skyux-modals.mjs +115 -79
- package/fesm2022/skyux-modals.mjs.map +1 -1
- package/lib/modules/modal/modal-host.component.d.ts +2 -2
- package/lib/modules/modal/modal-host.service.d.ts +9 -1
- package/package.json +12 -16
- package/esm2022/index.mjs +0 -21
- package/esm2022/lib/modules/confirm/confirm-button-action.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-button-config.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-button-style-type.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-button.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-closed-event-args.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-config-token.mjs +0 -6
- package/esm2022/lib/modules/confirm/confirm-config.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-instance.mjs +0 -23
- package/esm2022/lib/modules/confirm/confirm-service-interface.mjs +0 -2
- package/esm2022/lib/modules/confirm/confirm-type.mjs +0 -24
- package/esm2022/lib/modules/confirm/confirm.component.mjs +0 -151
- package/esm2022/lib/modules/confirm/confirm.module.mjs +0 -15
- package/esm2022/lib/modules/confirm/confirm.service.mjs +0 -44
- package/esm2022/lib/modules/modal/modal-adapter.service.mjs +0 -122
- package/esm2022/lib/modules/modal/modal-before-close-handler.mjs +0 -10
- package/esm2022/lib/modules/modal/modal-close-args.mjs +0 -7
- package/esm2022/lib/modules/modal/modal-component-adapter.service.mjs +0 -79
- package/esm2022/lib/modules/modal/modal-configuration.mjs +0 -16
- package/esm2022/lib/modules/modal/modal-content.component.mjs +0 -16
- package/esm2022/lib/modules/modal/modal-error.mjs +0 -2
- package/esm2022/lib/modules/modal/modal-errors.service.mjs +0 -21
- package/esm2022/lib/modules/modal/modal-footer.component.mjs +0 -24
- package/esm2022/lib/modules/modal/modal-header.component.mjs +0 -18
- package/esm2022/lib/modules/modal/modal-host-context-args.mjs +0 -2
- package/esm2022/lib/modules/modal/modal-host-context.mjs +0 -21
- package/esm2022/lib/modules/modal/modal-host.component.mjs +0 -154
- package/esm2022/lib/modules/modal/modal-host.service.mjs +0 -68
- package/esm2022/lib/modules/modal/modal-instance.mjs +0 -128
- package/esm2022/lib/modules/modal/modal-is-dirty.directive.mjs +0 -95
- package/esm2022/lib/modules/modal/modal-service-interface.mjs +0 -2
- package/esm2022/lib/modules/modal/modal.component.mjs +0 -266
- package/esm2022/lib/modules/modal/modal.interface.mjs +0 -2
- package/esm2022/lib/modules/modal/modal.module.mjs +0 -42
- package/esm2022/lib/modules/modal/modal.service.mjs +0 -118
- package/esm2022/lib/modules/shared/sky-modals-resources.module.mjs +0 -45
- package/esm2022/skyux-modals.mjs +0 -5
- package/esm2022/testing/legacy/modal-fixture.mjs +0 -143
- package/esm2022/testing/modules/confirm/confirm-button-harness-filters.mjs +0 -2
- package/esm2022/testing/modules/confirm/confirm-button-harness.mjs +0 -52
- package/esm2022/testing/modules/confirm/confirm-harness.mjs +0 -90
- package/esm2022/testing/modules/confirm/confirm-testing.controller.mjs +0 -7
- package/esm2022/testing/modules/confirm/confirm-testing.module.mjs +0 -18
- package/esm2022/testing/modules/confirm/confirm-testing.service.mjs +0 -101
- package/esm2022/testing/modules/confirm/provide-confirm-testing.mjs +0 -20
- package/esm2022/testing/modules/modal/controller/modal-testing.controller.mjs +0 -8
- package/esm2022/testing/modules/modal/controller/modal-testing.module.mjs +0 -18
- package/esm2022/testing/modules/modal/controller/modal-testing.service.mjs +0 -60
- package/esm2022/testing/modules/modal/controller/provide-modal-testing.mjs +0 -20
- package/esm2022/testing/modules/modal/modal-harness-filters.mjs +0 -2
- package/esm2022/testing/modules/modal/modal-harness.mjs +0 -110
- package/esm2022/testing/public-api.mjs +0 -9
- package/esm2022/testing/skyux-modals-testing.mjs +0 -5
|
@@ -14,6 +14,7 @@ import * as i2 from '@skyux/help-inline';
|
|
|
14
14
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
15
15
|
import * as i3 from '@skyux/icon';
|
|
16
16
|
import { SkyIconModule } from '@skyux/icon';
|
|
17
|
+
import { toSignal } from '@angular/core/rxjs-interop';
|
|
17
18
|
import { Router, NavigationStart, RouterModule } from '@angular/router';
|
|
18
19
|
import * as i3$1 from '@skyux/indicators';
|
|
19
20
|
import { SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
@@ -68,11 +69,11 @@ var SkyConfirmType;
|
|
|
68
69
|
* @deprecated The `SkyConfirmModule` is no longer needed and can be removed from your application.
|
|
69
70
|
*/
|
|
70
71
|
class SkyConfirmModule {
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
72
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
73
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
73
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmModule }); }
|
|
74
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmModule }); }
|
|
74
75
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmModule, decorators: [{
|
|
76
77
|
type: NgModule,
|
|
77
78
|
args: [{}]
|
|
78
79
|
}] });
|
|
@@ -86,10 +87,10 @@ const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
|
|
|
86
87
|
* Specifies content to display in the modal's body.
|
|
87
88
|
*/
|
|
88
89
|
class SkyModalContentComponent {
|
|
89
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
90
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
90
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
91
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyModalContentComponent, isStandalone: true, selector: "sky-modal-content", hostDirectives: [{ directive: i1.SkyResponsiveHostDirective }], ngImport: i0, template: "<ng-content />\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
91
92
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
93
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalContentComponent, decorators: [{
|
|
93
94
|
type: Component,
|
|
94
95
|
args: [{ hostDirectives: [SkyResponsiveHostDirective], standalone: true, selector: 'sky-modal-content', encapsulation: ViewEncapsulation.None, template: "<ng-content />\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"] }]
|
|
95
96
|
}] });
|
|
@@ -267,11 +268,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
267
268
|
* Import into any component library module that needs to use resource strings.
|
|
268
269
|
*/
|
|
269
270
|
class SkyModalsResourcesModule {
|
|
270
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
271
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
272
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
272
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] }); }
|
|
273
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalsResourcesModule, imports: [SkyI18nModule] }); }
|
|
273
274
|
}
|
|
274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
|
|
275
276
|
type: NgModule,
|
|
276
277
|
args: [{
|
|
277
278
|
exports: [SkyI18nModule],
|
|
@@ -348,10 +349,10 @@ class SkyModalComponentAdapterService {
|
|
|
348
349
|
fullPageModalEl.style.height = fullPageModalHeight;
|
|
349
350
|
fullPageModalEl.style.maxHeight = fullPageModalHeight;
|
|
350
351
|
}
|
|
351
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
352
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalComponentAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
353
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalComponentAdapterService }); }
|
|
353
354
|
}
|
|
354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
|
|
355
356
|
type: Injectable
|
|
356
357
|
}] });
|
|
357
358
|
|
|
@@ -362,10 +363,10 @@ class SkyModalConfiguration {
|
|
|
362
363
|
constructor() {
|
|
363
364
|
this.size = 'medium';
|
|
364
365
|
}
|
|
365
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
366
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
366
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
367
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalConfiguration }); }
|
|
367
368
|
}
|
|
368
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalConfiguration, decorators: [{
|
|
369
370
|
type: Injectable
|
|
370
371
|
}], ctorParameters: () => [] });
|
|
371
372
|
|
|
@@ -380,10 +381,10 @@ class SkyModalErrorsService {
|
|
|
380
381
|
updateErrors(value) {
|
|
381
382
|
this.#formErrors.next(value);
|
|
382
383
|
}
|
|
383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
384
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
384
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
385
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalErrorsService }); }
|
|
385
386
|
}
|
|
386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalErrorsService, decorators: [{
|
|
387
388
|
type: Injectable
|
|
388
389
|
}], ctorParameters: () => [] });
|
|
389
390
|
|
|
@@ -391,21 +392,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
391
392
|
* Specifies a header for the modal.
|
|
392
393
|
*/
|
|
393
394
|
class SkyModalHeaderComponent {
|
|
394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyModalHeaderComponent, isStandalone: true, selector: "sky-modal-header", ngImport: i0, template: "<h2\n class=\"sky-modal-heading sky-font-emphasized\"\n skyTrim\n [skyThemeClass]=\"{\n 'sky-font-heading-4': 'default',\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content />\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1.λ4, selector: "[skyTrim]" }] }); }
|
|
396
397
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
|
|
398
399
|
type: Component,
|
|
399
|
-
args: [{
|
|
400
|
+
args: [{ selector: 'sky-modal-header', imports: [SkyThemeModule, SkyTrimModule], template: "<h2\n class=\"sky-modal-heading sky-font-emphasized\"\n skyTrim\n [skyThemeClass]=\"{\n 'sky-font-heading-4': 'default',\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content />\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
|
|
400
401
|
}] });
|
|
401
402
|
|
|
403
|
+
var _a;
|
|
402
404
|
const BASE_Z_INDEX = 1040;
|
|
403
405
|
const modalHosts = [];
|
|
406
|
+
const backdropZIndex = new BehaviorSubject(0);
|
|
407
|
+
const backdropZIndexObs = backdropZIndex.asObservable();
|
|
408
|
+
const openModalCount = new BehaviorSubject(0);
|
|
409
|
+
const openModalCountObs = openModalCount.asObservable();
|
|
404
410
|
/**
|
|
405
411
|
* @internal
|
|
406
412
|
* @dynamic
|
|
407
413
|
*/
|
|
408
414
|
class SkyModalHostService {
|
|
415
|
+
static get openModalCountChange() {
|
|
416
|
+
return openModalCountObs;
|
|
417
|
+
}
|
|
418
|
+
static get backdropZIndexChange() {
|
|
419
|
+
return backdropZIndexObs;
|
|
420
|
+
}
|
|
421
|
+
/**
|
|
422
|
+
* @deprecated Subscribe to `openModalCountChange` instead.
|
|
423
|
+
*/
|
|
409
424
|
static get openModalCount() {
|
|
410
425
|
return modalHosts.length;
|
|
411
426
|
}
|
|
@@ -413,6 +428,9 @@ class SkyModalHostService {
|
|
|
413
428
|
const fullPageModals = modalHosts.filter((modal) => modal.fullPage);
|
|
414
429
|
return fullPageModals.length;
|
|
415
430
|
}
|
|
431
|
+
/**
|
|
432
|
+
* @deprecated Subscribe to `backdropZIndexChange` instead.
|
|
433
|
+
*/
|
|
416
434
|
static get backdropZIndex() {
|
|
417
435
|
return BASE_Z_INDEX + modalHosts.length * 10;
|
|
418
436
|
}
|
|
@@ -428,6 +446,8 @@ class SkyModalHostService {
|
|
|
428
446
|
this.openHelp = new Subject();
|
|
429
447
|
this.zIndex = this.#calculateZIndex();
|
|
430
448
|
modalHosts.push(this);
|
|
449
|
+
this.#notifyBackdropZIndex();
|
|
450
|
+
this.#notifyOpenModalCount();
|
|
431
451
|
}
|
|
432
452
|
getModalZIndex() {
|
|
433
453
|
return this.zIndex;
|
|
@@ -443,6 +463,8 @@ class SkyModalHostService {
|
|
|
443
463
|
}
|
|
444
464
|
destroy() {
|
|
445
465
|
modalHosts.splice(modalHosts.indexOf(this), 1);
|
|
466
|
+
this.#notifyBackdropZIndex();
|
|
467
|
+
this.#notifyOpenModalCount();
|
|
446
468
|
}
|
|
447
469
|
#calculateZIndex() {
|
|
448
470
|
const zIndexArray = modalHosts.map((hostService) => hostService.zIndex);
|
|
@@ -454,10 +476,17 @@ class SkyModalHostService {
|
|
|
454
476
|
return currentMaxZIndex + 10;
|
|
455
477
|
}
|
|
456
478
|
}
|
|
457
|
-
|
|
458
|
-
|
|
479
|
+
#notifyOpenModalCount() {
|
|
480
|
+
openModalCount.next(modalHosts.length);
|
|
481
|
+
}
|
|
482
|
+
#notifyBackdropZIndex() {
|
|
483
|
+
backdropZIndex.next(_a.backdropZIndex);
|
|
484
|
+
}
|
|
485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
486
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostService, providedIn: 'root' }); }
|
|
459
487
|
}
|
|
460
|
-
|
|
488
|
+
_a = SkyModalHostService;
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
461
490
|
type: Injectable,
|
|
462
491
|
args: [{
|
|
463
492
|
providedIn: 'root',
|
|
@@ -656,16 +685,16 @@ class SkyModalComponent {
|
|
|
656
685
|
viewkeeperEnabled() {
|
|
657
686
|
return this.#componentAdapter.modalContentHasDirectChildViewkeeper(this.#elRef);
|
|
658
687
|
}
|
|
659
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
660
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
688
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
689
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyModalComponent, isStandalone: true, selector: "sky-modal", inputs: { formErrors: "formErrors", headingText: "headingText", helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
|
|
661
690
|
SkyModalComponentAdapterService,
|
|
662
691
|
SkyModalErrorsService,
|
|
663
692
|
SkyDockService,
|
|
664
693
|
], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n tabindex=\"-1\"\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n [ngClass]=\"{\n 'sky-modal-tiled': tiledBody,\n 'sky-modal-viewkeeper': viewkeeperEnabled()\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n #headerId=\"skyId\"\n class=\"sky-modal-header-content\"\n skyId\n [ngClass]=\"{\n 'sky-font-heading-2': size === 'full-page'\n }\"\n >\n @if (headingText) {\n <sky-modal-header>\n {{ headingText }}\n @if (helpKey || helpPopoverContent) {\n <sky-help-inline\n class=\"sky-control-help\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n </sky-modal-header>\n } @else {\n <ng-content select=\"sky-modal-header\" />\n }\n </div>\n <div class=\"sky-modal-header-buttons\">\n @if (legacyHelpKey) {\n <button\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\" />\n </button>\n }\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\" />\n </button>\n </div>\n </div>\n <div\n #modalContentId=\"skyId\"\n #modalContentWrapper\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"headerId.id\"\n [skyScrollShadowEnabled]=\"scrollShadowEnabled\"\n (skyScrollShadow)=\"scrollShadowChange($event)\"\n >\n <ng-content select=\"sky-modal-content\" />\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\" />\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}.sky-modal-header:has(.sky-modal-header-content:empty){display:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalHeaderComponent, selector: "sky-modal-header" }, { kind: "directive", type: SkyScrollShadowDirective, selector: "[skyScrollShadow]", inputs: ["skyScrollShadowEnabled"], outputs: ["skyScrollShadow"] }, { kind: "ngmodule", type: SkyModalsResourcesModule }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
665
694
|
}
|
|
666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
667
696
|
type: Component,
|
|
668
|
-
args: [{
|
|
697
|
+
args: [{ selector: 'sky-modal', providers: [
|
|
669
698
|
SkyModalComponentAdapterService,
|
|
670
699
|
SkyModalErrorsService,
|
|
671
700
|
SkyDockService,
|
|
@@ -828,12 +857,12 @@ class SkyConfirmComponent {
|
|
|
828
857
|
autofocus: config.autofocus || false,
|
|
829
858
|
}));
|
|
830
859
|
}
|
|
831
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
860
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyConfirmComponent, isStandalone: true, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal\n ariaRole=\"alertdialog\"\n [ariaLabelledBy]=\"confirmMessage.id\"\n [ariaDescribedBy]=\"body ? bodyId : undefined\"\n >\n <sky-modal-content class=\"sky-confirm-content\">\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n #confirmMessage=\"skyId\"\n class=\"sky-confirm-message\"\n skyId\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-font-display-4': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >{{ message }}</div\n >\n\n @if (body) {\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n class=\"sky-confirm-body\"\n [id]=\"bodyId\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\n }\n\n <div class=\"sky-confirm-buttons\">\n @for (button of buttons; track button) {\n <button\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"'sky-btn-' + button.styleType\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n (click)=\"close(button)\"\n >\n {{ button.text }}\n </button>\n }\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "ngmodule", type: SkyModalsResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
833
862
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
835
864
|
type: Component,
|
|
836
|
-
args: [{
|
|
865
|
+
args: [{ selector: 'sky-confirm', imports: [
|
|
837
866
|
CommonModule,
|
|
838
867
|
SkyIdModule,
|
|
839
868
|
SkyModalComponent,
|
|
@@ -852,10 +881,10 @@ class SkyModalHostContext {
|
|
|
852
881
|
constructor(args) {
|
|
853
882
|
this.args = args;
|
|
854
883
|
}
|
|
855
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
856
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
884
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
885
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostContext }); }
|
|
857
886
|
}
|
|
858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostContext, decorators: [{
|
|
859
888
|
type: Injectable
|
|
860
889
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
861
890
|
type: Inject,
|
|
@@ -973,10 +1002,10 @@ class SkyModalAdapterService {
|
|
|
973
1002
|
topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
|
|
974
1003
|
}
|
|
975
1004
|
}
|
|
976
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
977
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1005
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1006
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalAdapterService }); }
|
|
978
1007
|
}
|
|
979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalAdapterService, decorators: [{
|
|
980
1009
|
type: Injectable
|
|
981
1010
|
}], ctorParameters: () => [{ type: i1.SkyAppWindowRef }] });
|
|
982
1011
|
|
|
@@ -984,21 +1013,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
984
1013
|
* @internal
|
|
985
1014
|
*/
|
|
986
1015
|
class SkyModalHostComponent {
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
1016
|
+
constructor() {
|
|
1017
|
+
this.backdropZIndex = toSignal(SkyModalHostService.backdropZIndexChange);
|
|
1018
|
+
this.modalCount = toSignal(SkyModalHostService.openModalCountChange);
|
|
1019
|
+
this.#modalInstances = [];
|
|
1020
|
+
this.#adapter = inject(SkyModalAdapterService);
|
|
1021
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
1022
|
+
this.#dynamicComponentSvc = inject(SkyDynamicComponentService);
|
|
1023
|
+
this.#elRef = inject(ElementRef);
|
|
1024
|
+
this.#environmentInjector = inject(EnvironmentInjector);
|
|
1025
|
+
this.#modalHostContext = inject(SkyModalHostContext);
|
|
1026
|
+
this.#router = inject(Router, { optional: true });
|
|
1027
|
+
this.#windowRef = inject(SkyAppWindowRef);
|
|
992
1028
|
}
|
|
993
|
-
#modalInstances
|
|
994
|
-
#adapter
|
|
995
|
-
#changeDetector
|
|
996
|
-
#dynamicComponentSvc
|
|
997
|
-
#elRef
|
|
998
|
-
#environmentInjector
|
|
999
|
-
#modalHostContext
|
|
1000
|
-
#router
|
|
1001
|
-
#windowRef
|
|
1029
|
+
#modalInstances;
|
|
1030
|
+
#adapter;
|
|
1031
|
+
#changeDetector;
|
|
1032
|
+
#dynamicComponentSvc;
|
|
1033
|
+
#elRef;
|
|
1034
|
+
#environmentInjector;
|
|
1035
|
+
#modalHostContext;
|
|
1036
|
+
#router;
|
|
1037
|
+
#windowRef;
|
|
1002
1038
|
ngOnDestroy() {
|
|
1003
1039
|
// Close all modal instances before disposing of the host container.
|
|
1004
1040
|
this.#closeAllModalInstances();
|
|
@@ -1107,12 +1143,12 @@ class SkyModalHostComponent {
|
|
|
1107
1143
|
instance.close();
|
|
1108
1144
|
}
|
|
1109
1145
|
}
|
|
1110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1146
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1147
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyModalHostComponent, isStandalone: true, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"modalCount() === 0\"\n [ngStyle]=\"{\n zIndex: backdropZIndex()\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: SkyModalsResourcesModule }], viewProviders: [SkyModalAdapterService] }); }
|
|
1112
1148
|
}
|
|
1113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
1114
1150
|
type: Component,
|
|
1115
|
-
args: [{
|
|
1151
|
+
args: [{ selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], imports: [CommonModule, RouterModule, SkyModalsResourcesModule], template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"modalCount() === 0\"\n [ngStyle]=\"{\n zIndex: backdropZIndex()\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"] }]
|
|
1116
1152
|
}], propDecorators: { target: [{
|
|
1117
1153
|
type: ViewChild,
|
|
1118
1154
|
args: ['target', {
|
|
@@ -1201,10 +1237,10 @@ class SkyModalService {
|
|
|
1201
1237
|
});
|
|
1202
1238
|
return componentRef;
|
|
1203
1239
|
}
|
|
1204
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1205
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1240
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalService, deps: [{ token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1241
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalService, providedIn: 'root' }); }
|
|
1206
1242
|
}
|
|
1207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalService, decorators: [{
|
|
1208
1244
|
type: Injectable,
|
|
1209
1245
|
args: [{
|
|
1210
1246
|
providedIn: 'root',
|
|
@@ -1220,10 +1256,10 @@ class SkyModalLegacyService extends SkyModalService {
|
|
|
1220
1256
|
constructor(dynamicComponentSvc) {
|
|
1221
1257
|
super(dynamicComponentSvc);
|
|
1222
1258
|
}
|
|
1223
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1224
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLegacyService, deps: [{ token: i1.SkyDynamicComponentLegacyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1260
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLegacyService, providedIn: 'any' }); }
|
|
1225
1261
|
}
|
|
1226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLegacyService, decorators: [{
|
|
1227
1263
|
type: Injectable,
|
|
1228
1264
|
args: [{
|
|
1229
1265
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
@@ -1261,10 +1297,10 @@ class SkyConfirmService {
|
|
|
1261
1297
|
});
|
|
1262
1298
|
return confirmInstance;
|
|
1263
1299
|
}
|
|
1264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1265
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1301
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmService, providedIn: 'root' }); }
|
|
1266
1302
|
}
|
|
1267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyConfirmService, decorators: [{
|
|
1268
1304
|
type: Injectable,
|
|
1269
1305
|
args: [{
|
|
1270
1306
|
providedIn: 'root',
|
|
@@ -1278,12 +1314,12 @@ class SkyModalFooterComponent {
|
|
|
1278
1314
|
constructor() {
|
|
1279
1315
|
this.errorsSvc = inject(SkyModalErrorsService);
|
|
1280
1316
|
}
|
|
1281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyModalFooterComponent, isStandalone: true, selector: "sky-modal-footer", hostDirectives: [{ directive: i1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <div aria-live=\"polite\">\n @if (errorsSvc.formErrors | async; as formErrors) {\n @if (formErrors.length > 0) {\n <div class=\"sky-modal-footer-errors sky-margin-stacked-lg\">\n @for (formError of formErrors; track formError) {\n <sky-status-indicator\n descriptionType=\"error\"\n indicatorType=\"danger\"\n [ngClass]=\"{\n 'sky-margin-stacked-lg':\n formErrors.indexOf(formError) < formErrors.length - 1,\n 'footer-error': true\n }\"\n >\n {{ formError.message }}\n </sky-status-indicator>\n }\n </div>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: ["sky-modal-footer{display:block}.sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:10px}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i3$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1283
1319
|
}
|
|
1284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
|
|
1285
1321
|
type: Component,
|
|
1286
|
-
args: [{ hostDirectives: [SkyResponsiveHostDirective],
|
|
1322
|
+
args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-modal-footer', encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyStatusIndicatorModule], template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <div aria-live=\"polite\">\n @if (errorsSvc.formErrors | async; as formErrors) {\n @if (formErrors.length > 0) {\n <div class=\"sky-modal-footer-errors sky-margin-stacked-lg\">\n @for (formError of formErrors; track formError) {\n <sky-status-indicator\n descriptionType=\"error\"\n indicatorType=\"danger\"\n [ngClass]=\"{\n 'sky-margin-stacked-lg':\n formErrors.indexOf(formError) < formErrors.length - 1,\n 'footer-error': true\n }\"\n >\n {{ formError.message }}\n </sky-status-indicator>\n }\n </div>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: ["sky-modal-footer{display:block}.sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:10px}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
|
|
1287
1323
|
}] });
|
|
1288
1324
|
|
|
1289
1325
|
/**
|
|
@@ -1354,10 +1390,10 @@ class SkyModalIsDirtyDirective {
|
|
|
1354
1390
|
handler.closeModal();
|
|
1355
1391
|
}
|
|
1356
1392
|
}
|
|
1357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1358
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalIsDirtyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1394
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: SkyModalIsDirtyDirective, isStandalone: true, selector: "sky-modal[isDirty]", inputs: { isDirty: "isDirty" }, host: { properties: { "attr.data-sky-modal-is-dirty": "this.isDirty" } }, ngImport: i0 }); }
|
|
1359
1395
|
}
|
|
1360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalIsDirtyDirective, decorators: [{
|
|
1361
1397
|
type: Directive,
|
|
1362
1398
|
args: [{
|
|
1363
1399
|
standalone: true,
|
|
@@ -1374,8 +1410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1374
1410
|
}] } });
|
|
1375
1411
|
|
|
1376
1412
|
class SkyModalModule {
|
|
1377
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1378
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1414
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyModalModule, imports: [SkyModalComponent,
|
|
1379
1415
|
SkyModalContentComponent,
|
|
1380
1416
|
SkyModalFooterComponent,
|
|
1381
1417
|
SkyModalHeaderComponent,
|
|
@@ -1384,11 +1420,11 @@ class SkyModalModule {
|
|
|
1384
1420
|
SkyModalFooterComponent,
|
|
1385
1421
|
SkyModalHeaderComponent,
|
|
1386
1422
|
SkyModalIsDirtyDirective] }); }
|
|
1387
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1423
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalModule, imports: [SkyModalComponent,
|
|
1388
1424
|
SkyModalFooterComponent,
|
|
1389
1425
|
SkyModalHeaderComponent] }); }
|
|
1390
1426
|
}
|
|
1391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
1392
1428
|
type: NgModule,
|
|
1393
1429
|
args: [{
|
|
1394
1430
|
imports: [
|