@skyux/modals 6.16.0 → 6.18.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 +223 -261
- package/esm2020/lib/modules/confirm/confirm.component.mjs +2 -2
- package/esm2020/lib/modules/modal/modal-adapter.service.mjs +50 -3
- package/esm2020/lib/modules/modal/modal-host.component.mjs +28 -9
- package/esm2020/lib/modules/modal/modal-host.service.mjs +7 -6
- package/esm2020/lib/modules/modal/modal-instance.mjs +1 -1
- package/esm2020/lib/modules/modal/modal.component.mjs +6 -4
- package/esm2020/testing/modal-fixture.mjs +2 -1
- package/fesm2015/skyux-modals-testing.mjs +1 -0
- package/fesm2015/skyux-modals-testing.mjs.map +1 -1
- package/fesm2015/skyux-modals.mjs +86 -18
- package/fesm2015/skyux-modals.mjs.map +1 -1
- package/fesm2020/skyux-modals-testing.mjs +1 -0
- package/fesm2020/skyux-modals-testing.mjs.map +1 -1
- package/fesm2020/skyux-modals.mjs +86 -18
- package/fesm2020/skyux-modals.mjs.map +1 -1
- package/lib/modules/modal/modal-adapter.service.d.ts +12 -0
- package/lib/modules/modal/modal-host.component.d.ts +2 -2
- package/lib/modules/modal/modal-host.service.d.ts +4 -4
- package/lib/modules/modal/modal-instance.d.ts +1 -1
- package/package.json +5 -5
- package/testing/modal-fixture.d.ts +1 -0
|
@@ -138,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
138
138
|
args: [{ selector: 'sky-modal-header', template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"] }]
|
|
139
139
|
}] });
|
|
140
140
|
|
|
141
|
-
var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
|
|
141
|
+
var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_hostSiblingAriaHiddenCache, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
|
|
142
142
|
/**
|
|
143
143
|
* @internal
|
|
144
144
|
*/
|
|
@@ -148,6 +148,7 @@ class SkyModalAdapterService {
|
|
|
148
148
|
_SkyModalAdapterService_docRef.set(this, void 0);
|
|
149
149
|
_SkyModalAdapterService_bodyEl.set(this, void 0);
|
|
150
150
|
_SkyModalAdapterService_windowRef.set(this, void 0);
|
|
151
|
+
_SkyModalAdapterService_hostSiblingAriaHiddenCache.set(this, new Map());
|
|
151
152
|
__classPrivateFieldSet(this, _SkyModalAdapterService_windowRef, windowRef, "f");
|
|
152
153
|
__classPrivateFieldSet(this, _SkyModalAdapterService_docRef, __classPrivateFieldGet(this, _SkyModalAdapterService_windowRef, "f").nativeWindow.document, "f");
|
|
153
154
|
__classPrivateFieldSet(this, _SkyModalAdapterService_bodyEl, __classPrivateFieldGet(this, _SkyModalAdapterService_windowRef, "f").nativeWindow.document.body, "f");
|
|
@@ -171,8 +172,54 @@ class SkyModalAdapterService {
|
|
|
171
172
|
getModalOpener() {
|
|
172
173
|
return __classPrivateFieldGet(this, _SkyModalAdapterService_docRef, "f").activeElement;
|
|
173
174
|
}
|
|
175
|
+
/**
|
|
176
|
+
* Hides siblings of modal-host from screen readers
|
|
177
|
+
* @param hostElRef reference to modal-host element
|
|
178
|
+
*/
|
|
179
|
+
hideHostSiblingsFromScreenReaders(hostElRef) {
|
|
180
|
+
const hostElement = hostElRef.nativeElement;
|
|
181
|
+
const hostSiblings = hostElement.parentElement.children;
|
|
182
|
+
for (let i = 0; i < hostSiblings.length; i++) {
|
|
183
|
+
const element = hostSiblings[i];
|
|
184
|
+
if (element !== hostElement &&
|
|
185
|
+
!element.hasAttribute('aria-live') &&
|
|
186
|
+
element.nodeName.toLowerCase() !== 'script' &&
|
|
187
|
+
element.nodeName.toLowerCase() !== 'style') {
|
|
188
|
+
// preserve previous aria-hidden status of elements outside of modal host
|
|
189
|
+
__classPrivateFieldGet(this, _SkyModalAdapterService_hostSiblingAriaHiddenCache, "f").set(element, element.getAttribute('aria-hidden'));
|
|
190
|
+
element.setAttribute('aria-hidden', 'true');
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
* Restores modal-host siblings to screenreader status prior to modals being opened
|
|
196
|
+
*/
|
|
197
|
+
unhideOrRestoreHostSiblingsFromScreenReaders() {
|
|
198
|
+
__classPrivateFieldGet(this, _SkyModalAdapterService_hostSiblingAriaHiddenCache, "f").forEach((previousValue, element) => {
|
|
199
|
+
// if element had aria-hidden status prior, restore status
|
|
200
|
+
if (element.parentElement) {
|
|
201
|
+
if (previousValue) {
|
|
202
|
+
element.setAttribute('aria-hidden', previousValue);
|
|
203
|
+
}
|
|
204
|
+
else {
|
|
205
|
+
element.removeAttribute('aria-hidden');
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
__classPrivateFieldGet(this, _SkyModalAdapterService_hostSiblingAriaHiddenCache, "f").clear();
|
|
210
|
+
}
|
|
211
|
+
hidePreviousModalFromScreenReaders(topModal) {
|
|
212
|
+
if (topModal && topModal.nativeElement.previousElementSibling) {
|
|
213
|
+
topModal.nativeElement.previousElementSibling.setAttribute('aria-hidden', 'true');
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
unhidePreviousModalFromScreenReaders(topModal) {
|
|
217
|
+
if (topModal && topModal.nativeElement.previousElementSibling) {
|
|
218
|
+
topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
|
|
219
|
+
}
|
|
220
|
+
}
|
|
174
221
|
}
|
|
175
|
-
_SkyModalAdapterService_docRef = new WeakMap(), _SkyModalAdapterService_bodyEl = new WeakMap(), _SkyModalAdapterService_windowRef = new WeakMap(), _SkyModalAdapterService_instances = new WeakSet(), _SkyModalAdapterService_addClassToBody = function _SkyModalAdapterService_addClassToBody(className) {
|
|
222
|
+
_SkyModalAdapterService_docRef = new WeakMap(), _SkyModalAdapterService_bodyEl = new WeakMap(), _SkyModalAdapterService_windowRef = new WeakMap(), _SkyModalAdapterService_hostSiblingAriaHiddenCache = new WeakMap(), _SkyModalAdapterService_instances = new WeakSet(), _SkyModalAdapterService_addClassToBody = function _SkyModalAdapterService_addClassToBody(className) {
|
|
176
223
|
__classPrivateFieldGet(this, _SkyModalAdapterService_bodyEl, "f").classList.add(className);
|
|
177
224
|
}, _SkyModalAdapterService_removeClassFromBody = function _SkyModalAdapterService_removeClassFromBody(className) {
|
|
178
225
|
__classPrivateFieldGet(this, _SkyModalAdapterService_bodyEl, "f").classList.remove(className);
|
|
@@ -210,9 +257,9 @@ const modalHosts = [];
|
|
|
210
257
|
*/
|
|
211
258
|
class SkyModalHostService {
|
|
212
259
|
constructor() {
|
|
213
|
-
this.close = new
|
|
260
|
+
this.close = new Subject();
|
|
214
261
|
this.fullPage = false;
|
|
215
|
-
this.openHelp = new
|
|
262
|
+
this.openHelp = new Subject();
|
|
216
263
|
this.zIndex = this.calculateZIndex();
|
|
217
264
|
modalHosts.push(this);
|
|
218
265
|
}
|
|
@@ -233,10 +280,10 @@ class SkyModalHostService {
|
|
|
233
280
|
return this.zIndex;
|
|
234
281
|
}
|
|
235
282
|
onClose() {
|
|
236
|
-
this.close.
|
|
283
|
+
this.close.next();
|
|
237
284
|
}
|
|
238
285
|
onOpenHelp(helpKey) {
|
|
239
|
-
this.openHelp.
|
|
286
|
+
this.openHelp.next(helpKey);
|
|
240
287
|
}
|
|
241
288
|
destroy() {
|
|
242
289
|
modalHosts.splice(modalHosts.indexOf(this), 1);
|
|
@@ -282,12 +329,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
282
329
|
}] }];
|
|
283
330
|
} });
|
|
284
331
|
|
|
285
|
-
var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModalHostComponent_adapter, _SkyModalHostComponent_injector, _SkyModalHostComponent_router, _SkyModalHostComponent_changeDetector, _SkyModalHostComponent_modalHostContext, _SkyModalHostComponent_modalInstances, _SkyModalHostComponent_registerModalInstance, _SkyModalHostComponent_unregisterModalInstance, _SkyModalHostComponent_closeAllModalInstances;
|
|
332
|
+
var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModalHostComponent_adapter, _SkyModalHostComponent_injector, _SkyModalHostComponent_router, _SkyModalHostComponent_changeDetector, _SkyModalHostComponent_modalHostContext, _SkyModalHostComponent_elRef, _SkyModalHostComponent_modalInstances, _SkyModalHostComponent_registerModalInstance, _SkyModalHostComponent_unregisterModalInstance, _SkyModalHostComponent_closeAllModalInstances;
|
|
286
333
|
/**
|
|
287
334
|
* @internal
|
|
288
335
|
*/
|
|
289
336
|
class SkyModalHostComponent {
|
|
290
|
-
constructor(resolver, adapter, injector, router, changeDetector, modalHostContext) {
|
|
337
|
+
constructor(resolver, adapter, injector, router, changeDetector, modalHostContext, elRef) {
|
|
291
338
|
_SkyModalHostComponent_instances.add(this);
|
|
292
339
|
_SkyModalHostComponent_resolver.set(this, void 0);
|
|
293
340
|
_SkyModalHostComponent_adapter.set(this, void 0);
|
|
@@ -295,6 +342,7 @@ class SkyModalHostComponent {
|
|
|
295
342
|
_SkyModalHostComponent_router.set(this, void 0);
|
|
296
343
|
_SkyModalHostComponent_changeDetector.set(this, void 0);
|
|
297
344
|
_SkyModalHostComponent_modalHostContext.set(this, void 0);
|
|
345
|
+
_SkyModalHostComponent_elRef.set(this, void 0);
|
|
298
346
|
_SkyModalHostComponent_modalInstances.set(this, []);
|
|
299
347
|
__classPrivateFieldSet(this, _SkyModalHostComponent_resolver, resolver, "f");
|
|
300
348
|
__classPrivateFieldSet(this, _SkyModalHostComponent_adapter, adapter, "f");
|
|
@@ -302,6 +350,7 @@ class SkyModalHostComponent {
|
|
|
302
350
|
__classPrivateFieldSet(this, _SkyModalHostComponent_router, router, "f");
|
|
303
351
|
__classPrivateFieldSet(this, _SkyModalHostComponent_changeDetector, changeDetector, "f");
|
|
304
352
|
__classPrivateFieldSet(this, _SkyModalHostComponent_modalHostContext, modalHostContext, "f");
|
|
353
|
+
__classPrivateFieldSet(this, _SkyModalHostComponent_elRef, elRef, "f");
|
|
305
354
|
}
|
|
306
355
|
get modalOpen() {
|
|
307
356
|
return SkyModalHostService.openModalCount > 0;
|
|
@@ -350,9 +399,26 @@ class SkyModalHostComponent {
|
|
|
350
399
|
parent: __classPrivateFieldGet(this, _SkyModalHostComponent_injector, "f"),
|
|
351
400
|
});
|
|
352
401
|
const modalComponentRef = this.target.createComponent(factory, undefined, injector);
|
|
402
|
+
// modal element that was just opened
|
|
403
|
+
const modalElement = modalComponentRef.location;
|
|
353
404
|
modalInstance.componentInstance = modalComponentRef.instance;
|
|
354
405
|
__classPrivateFieldGet(this, _SkyModalHostComponent_instances, "m", _SkyModalHostComponent_registerModalInstance).call(this, modalInstance);
|
|
355
|
-
|
|
406
|
+
// hidding all elements at the modal-host level from screenreaders when the a modal is opened
|
|
407
|
+
__classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").hideHostSiblingsFromScreenReaders(__classPrivateFieldGet(this, _SkyModalHostComponent_elRef, "f"));
|
|
408
|
+
if (SkyModalHostService.openModalCount > 1 &&
|
|
409
|
+
SkyModalHostService.topModal === hostService) {
|
|
410
|
+
// hiding the lower modals when more than one modal is opened
|
|
411
|
+
__classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").hidePreviousModalFromScreenReaders(modalElement);
|
|
412
|
+
}
|
|
413
|
+
const closeModal = () => {
|
|
414
|
+
// unhide siblings if last modal is closing
|
|
415
|
+
if (SkyModalHostService.openModalCount === 1) {
|
|
416
|
+
__classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").unhideOrRestoreHostSiblingsFromScreenReaders();
|
|
417
|
+
}
|
|
418
|
+
else if (SkyModalHostService.topModal === hostService) {
|
|
419
|
+
// if there are more than 1 modal then unhide the one behind this one before closing it
|
|
420
|
+
__classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").unhidePreviousModalFromScreenReaders(modalElement);
|
|
421
|
+
}
|
|
356
422
|
hostService.destroy();
|
|
357
423
|
adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
|
|
358
424
|
adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
|
|
@@ -362,7 +428,7 @@ class SkyModalHostComponent {
|
|
|
362
428
|
modalOpener.focus();
|
|
363
429
|
}
|
|
364
430
|
modalComponentRef.destroy();
|
|
365
|
-
}
|
|
431
|
+
};
|
|
366
432
|
hostService.openHelp.subscribe((helpKey) => {
|
|
367
433
|
modalInstance.openHelp(helpKey);
|
|
368
434
|
});
|
|
@@ -384,7 +450,7 @@ class SkyModalHostComponent {
|
|
|
384
450
|
__classPrivateFieldGet(this, _SkyModalHostComponent_changeDetector, "f").detectChanges();
|
|
385
451
|
}
|
|
386
452
|
}
|
|
387
|
-
_SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter = new WeakMap(), _SkyModalHostComponent_injector = new WeakMap(), _SkyModalHostComponent_router = new WeakMap(), _SkyModalHostComponent_changeDetector = new WeakMap(), _SkyModalHostComponent_modalHostContext = new WeakMap(), _SkyModalHostComponent_modalInstances = new WeakMap(), _SkyModalHostComponent_instances = new WeakSet(), _SkyModalHostComponent_registerModalInstance = function _SkyModalHostComponent_registerModalInstance(instance) {
|
|
453
|
+
_SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter = new WeakMap(), _SkyModalHostComponent_injector = new WeakMap(), _SkyModalHostComponent_router = new WeakMap(), _SkyModalHostComponent_changeDetector = new WeakMap(), _SkyModalHostComponent_modalHostContext = new WeakMap(), _SkyModalHostComponent_elRef = new WeakMap(), _SkyModalHostComponent_modalInstances = new WeakMap(), _SkyModalHostComponent_instances = new WeakSet(), _SkyModalHostComponent_registerModalInstance = function _SkyModalHostComponent_registerModalInstance(instance) {
|
|
388
454
|
__classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").push(instance);
|
|
389
455
|
}, _SkyModalHostComponent_unregisterModalInstance = function _SkyModalHostComponent_unregisterModalInstance(instance) {
|
|
390
456
|
__classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").slice(__classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").indexOf(instance), 1);
|
|
@@ -393,12 +459,12 @@ _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter
|
|
|
393
459
|
instance.close();
|
|
394
460
|
}
|
|
395
461
|
};
|
|
396
|
-
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }], target: i0.ɵɵFactoryTarget.Component });
|
|
462
|
+
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
397
463
|
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalHostComponent, 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;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
|
|
398
464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
399
465
|
type: Component,
|
|
400
466
|
args: [{ selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], 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;top:0;left:0;bottom:0;right:0}\n"] }]
|
|
401
|
-
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }]; }, propDecorators: { target: [{
|
|
467
|
+
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }, { type: i0.ElementRef }]; }, propDecorators: { target: [{
|
|
402
468
|
type: ViewChild,
|
|
403
469
|
args: ['target', {
|
|
404
470
|
read: ViewContainerRef,
|
|
@@ -748,7 +814,9 @@ class SkyModalComponent {
|
|
|
748
814
|
}
|
|
749
815
|
}
|
|
750
816
|
helpButtonClick() {
|
|
751
|
-
|
|
817
|
+
if (this.helpKey) {
|
|
818
|
+
__classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onOpenHelp(this.helpKey);
|
|
819
|
+
}
|
|
752
820
|
}
|
|
753
821
|
closeButtonClick() {
|
|
754
822
|
__classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onClose();
|
|
@@ -765,10 +833,10 @@ class SkyModalComponent {
|
|
|
765
833
|
}
|
|
766
834
|
_SkyModalComponent_hostService = new WeakMap(), _SkyModalComponent_elRef = new WeakMap(), _SkyModalComponent_windowRef = new WeakMap(), _SkyModalComponent_componentAdapter = new WeakMap(), _SkyModalComponent_coreAdapter = new WeakMap(), _SkyModalComponent_dockService = new WeakMap(), _SkyModalComponent_mediaQueryService = new WeakMap(), _SkyModalComponent__ariaRole = new WeakMap();
|
|
767
835
|
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }, { token: i3.SkyResizeObserverMediaQueryService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
768
|
-
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], 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\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\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 [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\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\"></sky-icon>\n </button>\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\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-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\"></ng-content>\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}@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-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;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-footer ::ng-deep
|
|
836
|
+
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], 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\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\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 [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\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\"></sky-icon>\n </button>\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\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-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\"></ng-content>\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}@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-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;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-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.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}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.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;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;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-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}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i2$2.SkyLibResourcesPipe } });
|
|
769
837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
770
838
|
type: Component,
|
|
771
|
-
args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\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 [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\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\"></sky-icon>\n </button>\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\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-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\"></ng-content>\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}@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-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;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-footer ::ng-deep
|
|
839
|
+
args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\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 [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\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\"></sky-icon>\n </button>\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\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-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\"></ng-content>\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}@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-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;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-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.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}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.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;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;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-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}\n"] }]
|
|
772
840
|
}], ctorParameters: function () {
|
|
773
841
|
return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
774
842
|
type: Host
|
|
@@ -1067,10 +1135,10 @@ _SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new We
|
|
|
1067
1135
|
return buttons;
|
|
1068
1136
|
};
|
|
1069
1137
|
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1070
|
-
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\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 (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm
|
|
1138
|
+
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\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 (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\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"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1071
1139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
1072
1140
|
type: Component,
|
|
1073
|
-
args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\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 (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm
|
|
1141
|
+
args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\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 (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\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"] }]
|
|
1074
1142
|
}], ctorParameters: function () {
|
|
1075
1143
|
return [{ type: undefined, decorators: [{
|
|
1076
1144
|
type: Inject,
|