@skyux/modals 11.26.0 → 11.28.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 +634 -634
- package/esm2022/lib/modules/confirm/confirm.component.mjs +4 -4
- package/esm2022/lib/modules/confirm/confirm.module.mjs +5 -5
- package/esm2022/lib/modules/confirm/confirm.service.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-adapter.service.mjs +38 -14
- package/esm2022/lib/modules/modal/modal-component-adapter.service.mjs +5 -27
- package/esm2022/lib/modules/modal/modal-configuration.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-content.component.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-errors.service.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-footer.component.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-header.component.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-host-context.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-host.component.mjs +18 -12
- package/esm2022/lib/modules/modal/modal-host.service.mjs +4 -4
- package/esm2022/lib/modules/modal/modal-is-dirty.directive.mjs +4 -4
- package/esm2022/lib/modules/modal/modal.component.mjs +5 -12
- package/esm2022/lib/modules/modal/modal.module.mjs +5 -5
- package/esm2022/lib/modules/modal/modal.service.mjs +7 -7
- package/esm2022/lib/modules/shared/sky-modals-resources.module.mjs +5 -5
- package/esm2022/testing/modules/confirm/confirm-testing.module.mjs +5 -5
- package/esm2022/testing/modules/modal/controller/modal-testing.module.mjs +5 -5
- package/esm2022/testing/modules/modal/controller/modal-testing.service.mjs +4 -4
- package/fesm2022/skyux-modals-testing.mjs +11 -11
- package/fesm2022/skyux-modals-testing.mjs.map +1 -1
- package/fesm2022/skyux-modals.mjs +107 -106
- package/fesm2022/skyux-modals.mjs.map +1 -1
- package/lib/modules/modal/modal-adapter.service.d.ts +1 -0
- package/lib/modules/modal/modal-component-adapter.service.d.ts +0 -3
- package/package.json +11 -11
|
@@ -4,7 +4,7 @@ import { NgModule, InjectionToken, Component, ViewEncapsulation, Injectable, inj
|
|
|
4
4
|
import * as i1$2 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
import * as i1 from '@skyux/core';
|
|
7
|
-
import { SkyResponsiveHostDirective, SkyTrimModule, SkyCoreAdapterService, SkyDockService, SkyLiveAnnouncerService,
|
|
7
|
+
import { SkyResponsiveHostDirective, SkyTrimModule, SkyCoreAdapterService, SkyDockService, SkyLiveAnnouncerService, SkyDockLocation, SkyIdModule, SkyScrollShadowDirective, SkyIdService, SkyDynamicComponentService, SkyAppWindowRef, SKY_STACKING_CONTEXT } from '@skyux/core';
|
|
8
8
|
import * as i5 from '@skyux/i18n';
|
|
9
9
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
10
10
|
import * as i1$1 from '@skyux/theme';
|
|
@@ -68,11 +68,11 @@ var SkyConfirmType;
|
|
|
68
68
|
* @deprecated The `SkyConfirmModule` is no longer needed and can be removed from your application.
|
|
69
69
|
*/
|
|
70
70
|
class SkyConfirmModule {
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
72
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
73
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
72
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmModule }); }
|
|
73
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmModule }); }
|
|
74
74
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmModule, decorators: [{
|
|
76
76
|
type: NgModule,
|
|
77
77
|
args: [{}]
|
|
78
78
|
}] });
|
|
@@ -86,10 +86,10 @@ const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
|
|
|
86
86
|
* Specifies content to display in the modal's body.
|
|
87
87
|
*/
|
|
88
88
|
class SkyModalContentComponent {
|
|
89
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
90
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
89
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
90
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalContentComponent, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
94
|
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
95
|
}] });
|
|
@@ -267,11 +267,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
267
267
|
* Import into any component library module that needs to use resource strings.
|
|
268
268
|
*/
|
|
269
269
|
class SkyModalsResourcesModule {
|
|
270
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
271
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
272
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
270
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
271
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] }); }
|
|
272
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalsResourcesModule, imports: [SkyI18nModule] }); }
|
|
273
273
|
}
|
|
274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
|
|
275
275
|
type: NgModule,
|
|
276
276
|
args: [{
|
|
277
277
|
exports: [SkyI18nModule],
|
|
@@ -282,10 +282,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
282
282
|
* @internal
|
|
283
283
|
*/
|
|
284
284
|
class SkyModalComponentAdapterService {
|
|
285
|
-
#coreAdapter;
|
|
286
|
-
constructor(coreAdapter) {
|
|
287
|
-
this.#coreAdapter = coreAdapter;
|
|
288
|
-
}
|
|
289
285
|
handleWindowChange(modalEl) {
|
|
290
286
|
const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
|
|
291
287
|
const fullPageModalEl = modalEl.nativeElement.querySelector('.sky-modal-full-page');
|
|
@@ -343,23 +339,6 @@ class SkyModalComponentAdapterService {
|
|
|
343
339
|
modalContentHasDirectChildViewkeeper(modalContentEl) {
|
|
344
340
|
return !!modalContentEl.nativeElement.querySelector('sky-modal-content > .sky-viewkeeper-fixed');
|
|
345
341
|
}
|
|
346
|
-
modalOpened(modalEl) {
|
|
347
|
-
/* istanbul ignore else */
|
|
348
|
-
/* handle the case where somehow there is a focused element already in the modal */
|
|
349
|
-
if (!(document.activeElement &&
|
|
350
|
-
modalEl.nativeElement.contains(document.activeElement))) {
|
|
351
|
-
const currentScrollX = window.pageXOffset;
|
|
352
|
-
const currentScrollY = window.pageYOffset;
|
|
353
|
-
const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
|
|
354
|
-
if (inputWithAutofocus) {
|
|
355
|
-
inputWithAutofocus.focus();
|
|
356
|
-
}
|
|
357
|
-
else {
|
|
358
|
-
this.#coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
|
|
359
|
-
}
|
|
360
|
-
window.scrollTo(currentScrollX, currentScrollY);
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
342
|
#setFullPageHeight(fullPageModalEl) {
|
|
364
343
|
const windowHeight = window.innerHeight;
|
|
365
344
|
const fullPageModalStyle = getComputedStyle(fullPageModalEl);
|
|
@@ -369,12 +348,12 @@ class SkyModalComponentAdapterService {
|
|
|
369
348
|
fullPageModalEl.style.height = fullPageModalHeight;
|
|
370
349
|
fullPageModalEl.style.maxHeight = fullPageModalHeight;
|
|
371
350
|
}
|
|
372
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
373
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
351
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
352
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService }); }
|
|
374
353
|
}
|
|
375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
|
|
376
355
|
type: Injectable
|
|
377
|
-
}]
|
|
356
|
+
}] });
|
|
378
357
|
|
|
379
358
|
/**
|
|
380
359
|
* @internal
|
|
@@ -383,10 +362,10 @@ class SkyModalConfiguration {
|
|
|
383
362
|
constructor() {
|
|
384
363
|
this.size = 'medium';
|
|
385
364
|
}
|
|
386
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
387
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
365
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
366
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalConfiguration }); }
|
|
388
367
|
}
|
|
389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
368
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalConfiguration, decorators: [{
|
|
390
369
|
type: Injectable
|
|
391
370
|
}], ctorParameters: () => [] });
|
|
392
371
|
|
|
@@ -401,10 +380,10 @@ class SkyModalErrorsService {
|
|
|
401
380
|
updateErrors(value) {
|
|
402
381
|
this.#formErrors.next(value);
|
|
403
382
|
}
|
|
404
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
405
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
383
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
384
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalErrorsService }); }
|
|
406
385
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalErrorsService, decorators: [{
|
|
408
387
|
type: Injectable
|
|
409
388
|
}], ctorParameters: () => [] });
|
|
410
389
|
|
|
@@ -412,10 +391,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
412
391
|
* Specifies a header for the modal.
|
|
413
392
|
*/
|
|
414
393
|
class SkyModalHeaderComponent {
|
|
415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
394
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
395
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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]" }] }); }
|
|
417
396
|
}
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
|
|
419
398
|
type: Component,
|
|
420
399
|
args: [{ standalone: true, 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"] }]
|
|
421
400
|
}] });
|
|
@@ -475,10 +454,10 @@ class SkyModalHostService {
|
|
|
475
454
|
return currentMaxZIndex + 10;
|
|
476
455
|
}
|
|
477
456
|
}
|
|
478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
479
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
457
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
458
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostService, providedIn: 'root' }); }
|
|
480
459
|
}
|
|
481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
482
461
|
type: Injectable,
|
|
483
462
|
args: [{
|
|
484
463
|
providedIn: 'root',
|
|
@@ -538,7 +517,6 @@ class SkyModalComponent {
|
|
|
538
517
|
#errorsSvc;
|
|
539
518
|
#hostService;
|
|
540
519
|
#liveAnnouncerSvc;
|
|
541
|
-
#windowRef;
|
|
542
520
|
/**
|
|
543
521
|
* This provider is optional to account for situations where a modal component
|
|
544
522
|
* is implemented without the modal service. For example, when a consumer tests
|
|
@@ -565,7 +543,6 @@ class SkyModalComponent {
|
|
|
565
543
|
this.#errorsSvc = inject(SkyModalErrorsService);
|
|
566
544
|
this.#hostService = inject(SkyModalHostService);
|
|
567
545
|
this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
|
|
568
|
-
this.#windowRef = inject(SkyAppWindowRef);
|
|
569
546
|
/**
|
|
570
547
|
* This provider is optional to account for situations where a modal component
|
|
571
548
|
* is implemented without the modal service. For example, when a consumer tests
|
|
@@ -649,11 +626,6 @@ class SkyModalComponent {
|
|
|
649
626
|
}
|
|
650
627
|
ngAfterViewInit() {
|
|
651
628
|
this.#componentAdapter.handleWindowChange(this.#elRef);
|
|
652
|
-
// Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
|
|
653
|
-
// https://stackoverflow.com/questions/40562845
|
|
654
|
-
this.#windowRef.nativeWindow.setTimeout(() => {
|
|
655
|
-
this.#componentAdapter.modalOpened(this.#elRef);
|
|
656
|
-
});
|
|
657
629
|
this.#dockService.setDockOptions({
|
|
658
630
|
location: SkyDockLocation.ElementBottom,
|
|
659
631
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
@@ -684,14 +656,14 @@ class SkyModalComponent {
|
|
|
684
656
|
viewkeeperEnabled() {
|
|
685
657
|
return this.#componentAdapter.modalContentHasDirectChildViewkeeper(this.#elRef);
|
|
686
658
|
}
|
|
687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: [
|
|
689
661
|
SkyModalComponentAdapterService,
|
|
690
662
|
SkyModalErrorsService,
|
|
691
663
|
SkyDockService,
|
|
692
664
|
], 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" }] }); }
|
|
693
665
|
}
|
|
694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
695
667
|
type: Component,
|
|
696
668
|
args: [{ standalone: true, selector: 'sky-modal', providers: [
|
|
697
669
|
SkyModalComponentAdapterService,
|
|
@@ -856,10 +828,10 @@ class SkyConfirmComponent {
|
|
|
856
828
|
autofocus: config.autofocus || false,
|
|
857
829
|
}));
|
|
858
830
|
}
|
|
859
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
860
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
831
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
832
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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"] }] }); }
|
|
861
833
|
}
|
|
862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
863
835
|
type: Component,
|
|
864
836
|
args: [{ standalone: true, selector: 'sky-confirm', imports: [
|
|
865
837
|
CommonModule,
|
|
@@ -880,10 +852,10 @@ class SkyModalHostContext {
|
|
|
880
852
|
constructor(args) {
|
|
881
853
|
this.args = args;
|
|
882
854
|
}
|
|
883
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
884
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
855
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
856
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostContext }); }
|
|
885
857
|
}
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostContext, decorators: [{
|
|
887
859
|
type: Injectable
|
|
888
860
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
889
861
|
type: Inject,
|
|
@@ -898,6 +870,7 @@ class SkyModalAdapterService {
|
|
|
898
870
|
static { this.MODAL_BODY_CLASS = 'sky-modal-body-open'; }
|
|
899
871
|
#docRef;
|
|
900
872
|
#bodyEl;
|
|
873
|
+
#coreAdapter = inject(SkyCoreAdapterService);
|
|
901
874
|
#windowRef;
|
|
902
875
|
#hostSiblingAriaHiddenCache = new Map();
|
|
903
876
|
constructor(windowRef) {
|
|
@@ -939,16 +912,38 @@ class SkyModalAdapterService {
|
|
|
939
912
|
*/
|
|
940
913
|
hideHostSiblingsFromScreenReaders(hostElRef) {
|
|
941
914
|
const hostElement = hostElRef.nativeElement;
|
|
942
|
-
const hostSiblings = hostElement.parentElement
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
915
|
+
const hostSiblings = hostElement.parentElement?.children;
|
|
916
|
+
if (hostSiblings) {
|
|
917
|
+
for (const element of hostSiblings) {
|
|
918
|
+
if (element.contains(document.activeElement)) {
|
|
919
|
+
document.body.focus();
|
|
920
|
+
}
|
|
921
|
+
if (element !== hostElement &&
|
|
922
|
+
!element.hasAttribute('aria-live') &&
|
|
923
|
+
element.nodeName.toLowerCase() !== 'script' &&
|
|
924
|
+
element.nodeName.toLowerCase() !== 'style') {
|
|
925
|
+
// preserve previous aria-hidden status of elements outside of modal host
|
|
926
|
+
this.#hostSiblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
|
|
927
|
+
element.setAttribute('aria-hidden', 'true');
|
|
928
|
+
}
|
|
929
|
+
}
|
|
930
|
+
}
|
|
931
|
+
}
|
|
932
|
+
focusFirstElement(modalEl) {
|
|
933
|
+
/* istanbul ignore else */
|
|
934
|
+
/* handle the case where somehow there is a focused element already in the modal */
|
|
935
|
+
if (!(document.activeElement &&
|
|
936
|
+
modalEl.nativeElement.contains(document.activeElement))) {
|
|
937
|
+
const currentScrollX = window.pageXOffset;
|
|
938
|
+
const currentScrollY = window.pageYOffset;
|
|
939
|
+
const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
|
|
940
|
+
if (inputWithAutofocus) {
|
|
941
|
+
inputWithAutofocus.focus();
|
|
942
|
+
}
|
|
943
|
+
else {
|
|
944
|
+
this.#coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
|
|
951
945
|
}
|
|
946
|
+
window.scrollTo(currentScrollX, currentScrollY);
|
|
952
947
|
}
|
|
953
948
|
}
|
|
954
949
|
/**
|
|
@@ -978,10 +973,10 @@ class SkyModalAdapterService {
|
|
|
978
973
|
topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
|
|
979
974
|
}
|
|
980
975
|
}
|
|
981
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
982
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
976
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
977
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalAdapterService }); }
|
|
983
978
|
}
|
|
984
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalAdapterService, decorators: [{
|
|
985
980
|
type: Injectable
|
|
986
981
|
}], ctorParameters: () => [{ type: i1.SkyAppWindowRef }] });
|
|
987
982
|
|
|
@@ -1003,6 +998,7 @@ class SkyModalHostComponent {
|
|
|
1003
998
|
#environmentInjector = inject(EnvironmentInjector);
|
|
1004
999
|
#modalHostContext = inject(SkyModalHostContext);
|
|
1005
1000
|
#router = inject(Router, { optional: true });
|
|
1001
|
+
#windowRef = inject(SkyAppWindowRef);
|
|
1006
1002
|
ngOnDestroy() {
|
|
1007
1003
|
// Close all modal instances before disposing of the host container.
|
|
1008
1004
|
this.#closeAllModalInstances();
|
|
@@ -1049,13 +1045,18 @@ class SkyModalHostComponent {
|
|
|
1049
1045
|
modalInstance.adapter = this.#adapter;
|
|
1050
1046
|
modalInstance.componentRef = modalComponentRef;
|
|
1051
1047
|
this.#registerModalInstance(modalInstance);
|
|
1052
|
-
//
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
// hiding the
|
|
1057
|
-
this.#adapter.
|
|
1058
|
-
|
|
1048
|
+
// Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
|
|
1049
|
+
// https://stackoverflow.com/questions/40562845
|
|
1050
|
+
this.#windowRef.nativeWindow.setTimeout(() => {
|
|
1051
|
+
this.#adapter.focusFirstElement(modalElement);
|
|
1052
|
+
// hiding all elements at the modal-host level from screen readers when the a modal is opened
|
|
1053
|
+
this.#adapter.hideHostSiblingsFromScreenReaders(this.#elRef);
|
|
1054
|
+
if (SkyModalHostService.openModalCount > 1 &&
|
|
1055
|
+
SkyModalHostService.topModal === hostService) {
|
|
1056
|
+
// hiding the lower modals when more than one modal is opened
|
|
1057
|
+
this.#adapter.hidePreviousModalFromScreenReaders(modalElement);
|
|
1058
|
+
}
|
|
1059
|
+
});
|
|
1059
1060
|
const closeModal = () => {
|
|
1060
1061
|
// unhide siblings if last modal is closing
|
|
1061
1062
|
if (SkyModalHostService.openModalCount === 1) {
|
|
@@ -1106,10 +1107,10 @@ class SkyModalHostComponent {
|
|
|
1106
1107
|
instance.close();
|
|
1107
1108
|
}
|
|
1108
1109
|
}
|
|
1109
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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]=\"!modalOpen\"\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] }); }
|
|
1111
1112
|
}
|
|
1112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
1113
1114
|
type: Component,
|
|
1114
1115
|
args: [{ standalone: true, selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], imports: [CommonModule, RouterModule, SkyModalsResourcesModule], template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\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"] }]
|
|
1115
1116
|
}], propDecorators: { target: [{
|
|
@@ -1200,10 +1201,10 @@ class SkyModalService {
|
|
|
1200
1201
|
});
|
|
1201
1202
|
return componentRef;
|
|
1202
1203
|
}
|
|
1203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1204
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
1204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalService, deps: [{ token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1205
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalService, providedIn: 'root' }); }
|
|
1205
1206
|
}
|
|
1206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalService, decorators: [{
|
|
1207
1208
|
type: Injectable,
|
|
1208
1209
|
args: [{
|
|
1209
1210
|
providedIn: 'root',
|
|
@@ -1219,10 +1220,10 @@ class SkyModalLegacyService extends SkyModalService {
|
|
|
1219
1220
|
constructor(dynamicComponentSvc) {
|
|
1220
1221
|
super(dynamicComponentSvc);
|
|
1221
1222
|
}
|
|
1222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1223
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
1223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalLegacyService, deps: [{ token: i1.SkyDynamicComponentLegacyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1224
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalLegacyService, providedIn: 'any' }); }
|
|
1224
1225
|
}
|
|
1225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalLegacyService, decorators: [{
|
|
1226
1227
|
type: Injectable,
|
|
1227
1228
|
args: [{
|
|
1228
1229
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
@@ -1260,10 +1261,10 @@ class SkyConfirmService {
|
|
|
1260
1261
|
});
|
|
1261
1262
|
return confirmInstance;
|
|
1262
1263
|
}
|
|
1263
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1264
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
1264
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1265
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmService, providedIn: 'root' }); }
|
|
1265
1266
|
}
|
|
1266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyConfirmService, decorators: [{
|
|
1267
1268
|
type: Injectable,
|
|
1268
1269
|
args: [{
|
|
1269
1270
|
providedIn: 'root',
|
|
@@ -1277,10 +1278,10 @@ class SkyModalFooterComponent {
|
|
|
1277
1278
|
constructor() {
|
|
1278
1279
|
this.errorsSvc = inject(SkyModalErrorsService);
|
|
1279
1280
|
}
|
|
1280
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1281
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
1281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
1282
1283
|
}
|
|
1283
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
|
|
1284
1285
|
type: Component,
|
|
1285
1286
|
args: [{ hostDirectives: [SkyResponsiveHostDirective], standalone: true, 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"] }]
|
|
1286
1287
|
}] });
|
|
@@ -1353,10 +1354,10 @@ class SkyModalIsDirtyDirective {
|
|
|
1353
1354
|
handler.closeModal();
|
|
1354
1355
|
}
|
|
1355
1356
|
}
|
|
1356
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1357
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
1357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalIsDirtyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1358
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SkyModalIsDirtyDirective, isStandalone: true, selector: "sky-modal[isDirty]", inputs: { isDirty: "isDirty" }, host: { properties: { "attr.data-sky-modal-is-dirty": "this.isDirty" } }, ngImport: i0 }); }
|
|
1358
1359
|
}
|
|
1359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalIsDirtyDirective, decorators: [{
|
|
1360
1361
|
type: Directive,
|
|
1361
1362
|
args: [{
|
|
1362
1363
|
standalone: true,
|
|
@@ -1373,8 +1374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1373
1374
|
}] } });
|
|
1374
1375
|
|
|
1375
1376
|
class SkyModalModule {
|
|
1376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1377
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1378
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyModalModule, imports: [SkyModalComponent,
|
|
1378
1379
|
SkyModalContentComponent,
|
|
1379
1380
|
SkyModalFooterComponent,
|
|
1380
1381
|
SkyModalHeaderComponent,
|
|
@@ -1383,11 +1384,11 @@ class SkyModalModule {
|
|
|
1383
1384
|
SkyModalFooterComponent,
|
|
1384
1385
|
SkyModalHeaderComponent,
|
|
1385
1386
|
SkyModalIsDirtyDirective] }); }
|
|
1386
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1387
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalModule, imports: [SkyModalComponent,
|
|
1387
1388
|
SkyModalFooterComponent,
|
|
1388
1389
|
SkyModalHeaderComponent] }); }
|
|
1389
1390
|
}
|
|
1390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
1391
1392
|
type: NgModule,
|
|
1392
1393
|
args: [{
|
|
1393
1394
|
imports: [
|