@skyux/modals 7.0.0-beta.1 → 7.0.0-beta.11
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 +297 -219
- package/esm2020/index.mjs +1 -3
- package/esm2020/lib/modules/confirm/confirm-button.mjs +1 -1
- package/esm2020/lib/modules/confirm/confirm.component.mjs +58 -76
- package/esm2020/lib/modules/modal/modal-header.component.mjs +4 -3
- package/esm2020/lib/modules/modal/modal-host.component.mjs +10 -8
- package/esm2020/lib/modules/modal/modal-host.service.mjs +15 -12
- package/esm2020/lib/modules/modal/modal-scroll-shadow.directive.mjs +4 -4
- package/esm2020/lib/modules/modal/modal.component.mjs +3 -3
- package/esm2020/lib/modules/modal/modal.interface.mjs +1 -3
- package/esm2020/lib/modules/modal/modal.module.mjs +7 -3
- package/esm2020/lib/modules/modal/modal.service.mjs +1 -3
- package/fesm2015/skyux-modals.mjs +94 -107
- package/fesm2015/skyux-modals.mjs.map +1 -1
- package/fesm2020/skyux-modals.mjs +91 -109
- package/fesm2020/skyux-modals.mjs.map +1 -1
- package/index.d.ts +0 -1
- package/lib/modules/confirm/confirm-button.d.ts +1 -1
- package/lib/modules/confirm/confirm.component.d.ts +1 -1
- package/lib/modules/modal/modal-header.component.d.ts +1 -1
- package/lib/modules/modal/modal-host.component.d.ts +2 -2
- package/lib/modules/modal/modal-host.service.d.ts +1 -1
- package/lib/modules/modal/modal-scroll-shadow.directive.d.ts +2 -2
- package/lib/modules/modal/modal.component.d.ts +1 -1
- package/lib/modules/modal/modal.interface.d.ts +3 -1
- package/lib/modules/modal/modal.module.d.ts +2 -1
- package/lib/modules/modal/modal.service.d.ts +1 -1
- package/package.json +5 -5
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, ViewChild, Directive,
|
|
2
|
+
import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, Directive, Output, HostListener, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
|
|
3
3
|
import * as i5 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@skyux/theme';
|
|
6
6
|
import { SkyTheme, SkyThemeModule } from '@skyux/theme';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i3$1 from '@angular/router';
|
|
8
8
|
import { NavigationStart, RouterModule } from '@angular/router';
|
|
9
|
+
import * as i3 from '@skyux/core';
|
|
10
|
+
import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SkyDockLocation, SkyDockService, SkyTrimModule } from '@skyux/core';
|
|
9
11
|
import * as i6 from '@skyux/indicators';
|
|
10
12
|
import { SkyIconModule } from '@skyux/indicators';
|
|
11
|
-
import * as i2$
|
|
13
|
+
import * as i2$1 from '@skyux/i18n';
|
|
12
14
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
13
15
|
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
import { takeWhile, takeUntil } from 'rxjs/operators';
|
|
17
|
-
import { Subject, BehaviorSubject, zip } from 'rxjs';
|
|
16
|
+
import { takeWhile, takeUntil, take } from 'rxjs/operators';
|
|
17
|
+
import { Subject, ReplaySubject } from 'rxjs';
|
|
18
18
|
|
|
19
19
|
class SkyConfirmInstance {
|
|
20
20
|
constructor() {
|
|
@@ -132,10 +132,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
132
132
|
class SkyModalHeaderComponent {
|
|
133
133
|
}
|
|
134
134
|
SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
|
|
135
|
+
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n skyTrim\n>\n <ng-content></ng-content>\n</h1>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h1{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }] });
|
|
136
136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
|
|
137
137
|
type: Component,
|
|
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"] }]
|
|
138
|
+
args: [{ selector: 'sky-modal-header', template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n skyTrim\n>\n <ng-content></ng-content>\n</h1>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h1{margin:0;line-height:1.2;display:inline}: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
141
|
var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_hostSiblingAriaHiddenCache, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
|
|
@@ -249,6 +249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
249
249
|
}]
|
|
250
250
|
}], ctorParameters: function () { return []; } });
|
|
251
251
|
|
|
252
|
+
var _SkyModalHostService_instances, _SkyModalHostService_calculateZIndex;
|
|
252
253
|
const BASE_Z_INDEX = 1040;
|
|
253
254
|
const modalHosts = [];
|
|
254
255
|
/**
|
|
@@ -257,10 +258,11 @@ const modalHosts = [];
|
|
|
257
258
|
*/
|
|
258
259
|
class SkyModalHostService {
|
|
259
260
|
constructor() {
|
|
261
|
+
_SkyModalHostService_instances.add(this);
|
|
260
262
|
this.close = new Subject();
|
|
261
263
|
this.fullPage = false;
|
|
262
264
|
this.openHelp = new Subject();
|
|
263
|
-
this.zIndex = this.
|
|
265
|
+
this.zIndex = __classPrivateFieldGet(this, _SkyModalHostService_instances, "m", _SkyModalHostService_calculateZIndex).call(this);
|
|
264
266
|
modalHosts.push(this);
|
|
265
267
|
}
|
|
266
268
|
static get openModalCount() {
|
|
@@ -288,17 +290,17 @@ class SkyModalHostService {
|
|
|
288
290
|
destroy() {
|
|
289
291
|
modalHosts.splice(modalHosts.indexOf(this), 1);
|
|
290
292
|
}
|
|
291
|
-
calculateZIndex() {
|
|
292
|
-
const zIndexArray = modalHosts.map((hostService) => hostService.zIndex);
|
|
293
|
-
if (zIndexArray.length === 0) {
|
|
294
|
-
return BASE_Z_INDEX + 11;
|
|
295
|
-
}
|
|
296
|
-
else {
|
|
297
|
-
const currentMaxZIndex = Math.max(...zIndexArray);
|
|
298
|
-
return currentMaxZIndex + 10;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
293
|
}
|
|
294
|
+
_SkyModalHostService_instances = new WeakSet(), _SkyModalHostService_calculateZIndex = function _SkyModalHostService_calculateZIndex() {
|
|
295
|
+
const zIndexArray = modalHosts.map((hostService) => hostService.zIndex);
|
|
296
|
+
if (zIndexArray.length === 0) {
|
|
297
|
+
return BASE_Z_INDEX + 11;
|
|
298
|
+
}
|
|
299
|
+
else {
|
|
300
|
+
const currentMaxZIndex = Math.max(...zIndexArray);
|
|
301
|
+
return currentMaxZIndex + 10;
|
|
302
|
+
}
|
|
303
|
+
};
|
|
302
304
|
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
303
305
|
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
|
|
304
306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
@@ -334,7 +336,7 @@ var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModal
|
|
|
334
336
|
* @internal
|
|
335
337
|
*/
|
|
336
338
|
class SkyModalHostComponent {
|
|
337
|
-
constructor(resolver, adapter, injector,
|
|
339
|
+
constructor(resolver, adapter, injector, changeDetector, modalHostContext, elRef, router) {
|
|
338
340
|
_SkyModalHostComponent_instances.add(this);
|
|
339
341
|
_SkyModalHostComponent_resolver.set(this, void 0);
|
|
340
342
|
_SkyModalHostComponent_adapter.set(this, void 0);
|
|
@@ -364,6 +366,7 @@ class SkyModalHostComponent {
|
|
|
364
366
|
__classPrivateFieldGet(this, _SkyModalHostComponent_modalHostContext, "f").args.teardownCallback();
|
|
365
367
|
}
|
|
366
368
|
open(modalInstance, component, config) {
|
|
369
|
+
var _a;
|
|
367
370
|
/* Ignore coverage as we specify the target element and so the view child should never be undefined unless
|
|
368
371
|
* we were to call the `open` method in an early lifecycle hook. */
|
|
369
372
|
/* istanbul ignore next */
|
|
@@ -435,7 +438,7 @@ class SkyModalHostComponent {
|
|
|
435
438
|
hostService.close.subscribe(() => {
|
|
436
439
|
modalInstance.close();
|
|
437
440
|
});
|
|
438
|
-
__classPrivateFieldGet(this, _SkyModalHostComponent_router, "f").events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
|
|
441
|
+
(_a = __classPrivateFieldGet(this, _SkyModalHostComponent_router, "f")) === null || _a === void 0 ? void 0 : _a.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
|
|
439
442
|
/* istanbul ignore else */
|
|
440
443
|
if (event instanceof NavigationStart) {
|
|
441
444
|
modalInstance.close();
|
|
@@ -459,12 +462,16 @@ _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter
|
|
|
459
462
|
instance.close();
|
|
460
463
|
}
|
|
461
464
|
};
|
|
462
|
-
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token:
|
|
465
|
+
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }, { token: i3$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
463
466
|
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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;inset:0}\n"], dependencies: [{ kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
|
|
464
467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
465
468
|
type: Component,
|
|
466
469
|
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;inset:0}\n"] }]
|
|
467
|
-
}], ctorParameters: function () {
|
|
470
|
+
}], ctorParameters: function () {
|
|
471
|
+
return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }, { type: i0.ElementRef }, { type: i3$1.Router, decorators: [{
|
|
472
|
+
type: Optional
|
|
473
|
+
}] }];
|
|
474
|
+
}, propDecorators: { target: [{
|
|
468
475
|
type: ViewChild,
|
|
469
476
|
args: ['target', {
|
|
470
477
|
read: ViewContainerRef,
|
|
@@ -572,7 +579,7 @@ _SkyModalScrollShadowDirective_currentShadow = new WeakMap(), _SkyModalScrollSha
|
|
|
572
579
|
__classPrivateFieldSet(this, _SkyModalScrollShadowDirective_currentShadow, shadow, "f");
|
|
573
580
|
}
|
|
574
581
|
};
|
|
575
|
-
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.
|
|
582
|
+
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.SkyMutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
576
583
|
SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
|
|
577
584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
|
|
578
585
|
type: Directive,
|
|
@@ -580,7 +587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
580
587
|
selector: '[skyModalScrollShadow]',
|
|
581
588
|
}]
|
|
582
589
|
}], ctorParameters: function () {
|
|
583
|
-
return [{ type: i0.ElementRef }, { type: i3.
|
|
590
|
+
return [{ type: i0.ElementRef }, { type: i3.SkyMutationObserverService }, { type: i0.NgZone }, { type: i2.SkyThemeService, decorators: [{
|
|
584
591
|
type: Optional
|
|
585
592
|
}] }];
|
|
586
593
|
}, propDecorators: { skyModalScrollShadow: [{
|
|
@@ -833,10 +840,10 @@ class SkyModalComponent {
|
|
|
833
840
|
}
|
|
834
841
|
_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();
|
|
835
842
|
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 });
|
|
836
|
-
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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=\"
|
|
843
|
+
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
|
|
837
844
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
838
845
|
type: Component,
|
|
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=\"
|
|
846
|
+
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"] }]
|
|
840
847
|
}], ctorParameters: function () {
|
|
841
848
|
return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
842
849
|
type: Host
|
|
@@ -873,7 +880,8 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
873
880
|
RouterModule,
|
|
874
881
|
SkyIconModule,
|
|
875
882
|
SkyModalsResourcesModule,
|
|
876
|
-
SkyThemeModule
|
|
883
|
+
SkyThemeModule,
|
|
884
|
+
SkyTrimModule], exports: [SkyModalComponent,
|
|
877
885
|
SkyModalContentComponent,
|
|
878
886
|
SkyModalFooterComponent,
|
|
879
887
|
SkyModalHeaderComponent] });
|
|
@@ -881,7 +889,8 @@ SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
881
889
|
RouterModule,
|
|
882
890
|
SkyIconModule,
|
|
883
891
|
SkyModalsResourcesModule,
|
|
884
|
-
SkyThemeModule
|
|
892
|
+
SkyThemeModule,
|
|
893
|
+
SkyTrimModule] });
|
|
885
894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
886
895
|
type: NgModule,
|
|
887
896
|
args: [{
|
|
@@ -899,6 +908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
899
908
|
SkyIconModule,
|
|
900
909
|
SkyModalsResourcesModule,
|
|
901
910
|
SkyThemeModule,
|
|
911
|
+
SkyTrimModule,
|
|
902
912
|
],
|
|
903
913
|
exports: [
|
|
904
914
|
SkyModalComponent,
|
|
@@ -1047,7 +1057,9 @@ class SkyConfirmComponent {
|
|
|
1047
1057
|
this.buttons = __classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getCustomButtons).call(this, config.buttons);
|
|
1048
1058
|
}
|
|
1049
1059
|
else {
|
|
1050
|
-
__classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getPresetButtons).call(this)
|
|
1060
|
+
__classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getPresetButtons).call(this)
|
|
1061
|
+
.pipe(take(1))
|
|
1062
|
+
.subscribe((buttons) => {
|
|
1051
1063
|
this.buttons = buttons;
|
|
1052
1064
|
});
|
|
1053
1065
|
}
|
|
@@ -1064,88 +1076,67 @@ class SkyConfirmComponent {
|
|
|
1064
1076
|
}
|
|
1065
1077
|
}
|
|
1066
1078
|
_SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new WeakMap(), _SkyConfirmComponent_resourcesService = new WeakMap(), _SkyConfirmComponent_instances = new WeakSet(), _SkyConfirmComponent_getPresetButtons = function _SkyConfirmComponent_getPresetButtons() {
|
|
1067
|
-
const emitter = new
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
{
|
|
1088
|
-
text: values
|
|
1089
|
-
autofocus: true,
|
|
1090
|
-
styleType: 'primary',
|
|
1091
|
-
action: 'yes',
|
|
1092
|
-
},
|
|
1093
|
-
{
|
|
1094
|
-
text: values[1],
|
|
1079
|
+
const emitter = new ReplaySubject(1);
|
|
1080
|
+
__classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f")
|
|
1081
|
+
.getStrings({
|
|
1082
|
+
cancel: 'skyux_confirm_dialog_default_cancel_text',
|
|
1083
|
+
no: 'skyux_confirm_dialog_default_no_text',
|
|
1084
|
+
ok: 'skyux_confirm_dialog_default_ok_text',
|
|
1085
|
+
yes: 'skyux_confirm_dialog_default_yes_text',
|
|
1086
|
+
})
|
|
1087
|
+
.subscribe((values) => {
|
|
1088
|
+
const confirmButtons = [];
|
|
1089
|
+
switch (__classPrivateFieldGet(this, _SkyConfirmComponent_config, "f").type) {
|
|
1090
|
+
case SkyConfirmType.YesNoCancel:
|
|
1091
|
+
case SkyConfirmType.YesCancel:
|
|
1092
|
+
confirmButtons.push({
|
|
1093
|
+
text: values.yes,
|
|
1094
|
+
autofocus: true,
|
|
1095
|
+
styleType: 'primary',
|
|
1096
|
+
action: 'yes',
|
|
1097
|
+
});
|
|
1098
|
+
if (__classPrivateFieldGet(this, _SkyConfirmComponent_config, "f").type === SkyConfirmType.YesNoCancel) {
|
|
1099
|
+
confirmButtons.push({
|
|
1100
|
+
text: values.no,
|
|
1095
1101
|
styleType: 'default',
|
|
1096
1102
|
action: 'no',
|
|
1097
|
-
}
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
},
|
|
1115
|
-
{
|
|
1116
|
-
text: values[1],
|
|
1117
|
-
styleType: 'link',
|
|
1118
|
-
action: 'cancel',
|
|
1119
|
-
},
|
|
1120
|
-
]);
|
|
1121
|
-
});
|
|
1122
|
-
break;
|
|
1123
|
-
}
|
|
1124
|
-
return emitter;
|
|
1125
|
-
}, _SkyConfirmComponent_getCustomButtons = function _SkyConfirmComponent_getCustomButtons(buttonConfig) {
|
|
1126
|
-
const buttons = [];
|
|
1127
|
-
buttonConfig.forEach((config) => {
|
|
1128
|
-
buttons.push({
|
|
1129
|
-
text: config.text,
|
|
1130
|
-
action: config.action,
|
|
1131
|
-
styleType: config.styleType || 'default',
|
|
1132
|
-
autofocus: config.autofocus || false,
|
|
1133
|
-
});
|
|
1103
|
+
});
|
|
1104
|
+
}
|
|
1105
|
+
confirmButtons.push({
|
|
1106
|
+
text: values.cancel,
|
|
1107
|
+
styleType: 'link',
|
|
1108
|
+
action: 'cancel',
|
|
1109
|
+
});
|
|
1110
|
+
break;
|
|
1111
|
+
default:
|
|
1112
|
+
confirmButtons.push({
|
|
1113
|
+
text: values.ok,
|
|
1114
|
+
autofocus: true,
|
|
1115
|
+
styleType: 'primary',
|
|
1116
|
+
action: 'ok',
|
|
1117
|
+
});
|
|
1118
|
+
}
|
|
1119
|
+
emitter.next(confirmButtons);
|
|
1134
1120
|
});
|
|
1135
|
-
return
|
|
1121
|
+
return emitter.asObservable();
|
|
1122
|
+
}, _SkyConfirmComponent_getCustomButtons = function _SkyConfirmComponent_getCustomButtons(buttonConfig) {
|
|
1123
|
+
return buttonConfig.map((config) => ({
|
|
1124
|
+
text: config.text,
|
|
1125
|
+
action: config.action,
|
|
1126
|
+
styleType: config.styleType || 'default',
|
|
1127
|
+
autofocus: config.autofocus || false,
|
|
1128
|
+
}));
|
|
1136
1129
|
};
|
|
1137
|
-
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$
|
|
1138
|
-
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\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
|
|
1130
|
+
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1131
|
+
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal ariaRole=\"alertdialog\">\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 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 >{{ message }}</div\n >\n\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 *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\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"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
|
|
1139
1132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
1140
1133
|
type: Component,
|
|
1141
|
-
args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\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
|
|
1134
|
+
args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal ariaRole=\"alertdialog\">\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 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 >{{ message }}</div\n >\n\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 *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\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"] }]
|
|
1142
1135
|
}], ctorParameters: function () {
|
|
1143
1136
|
return [{ type: undefined, decorators: [{
|
|
1144
1137
|
type: Inject,
|
|
1145
1138
|
args: [SKY_CONFIRM_CONFIG]
|
|
1146
|
-
}] }, { type: SkyModalInstance }, { type: i2$
|
|
1147
|
-
type: Optional
|
|
1148
|
-
}] }];
|
|
1139
|
+
}] }, { type: SkyModalInstance }, { type: i2$1.SkyLibResourcesService }];
|
|
1149
1140
|
} });
|
|
1150
1141
|
|
|
1151
1142
|
class SkyConfirmModule {
|
|
@@ -1179,8 +1170,6 @@ var _SkyModalService_instances, _SkyModalService_dynamicComponentService, _SkyMo
|
|
|
1179
1170
|
* @dynamic
|
|
1180
1171
|
*/
|
|
1181
1172
|
class SkyModalService {
|
|
1182
|
-
// TODO: Make `dynamicComponentService` required. It is optional today to maintain binary compatibility for consumers when they construct
|
|
1183
|
-
// the service for unit testing.
|
|
1184
1173
|
constructor(dynamicComponentService) {
|
|
1185
1174
|
_SkyModalService_instances.add(this);
|
|
1186
1175
|
_SkyModalService_dynamicComponentService.set(this, void 0);
|
|
@@ -1316,8 +1305,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1316
1305
|
}]
|
|
1317
1306
|
}], ctorParameters: function () { return [{ type: SkyModalService }]; } });
|
|
1318
1307
|
|
|
1319
|
-
// TODO: confirm-button is internal and should be removed in a future version
|
|
1320
|
-
|
|
1321
1308
|
/**
|
|
1322
1309
|
* Generated bundle index. Do not edit.
|
|
1323
1310
|
*/
|