@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;
|
|
@@ -268,6 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
268
268
|
args: ['SkyModalHostContextArgs']
|
|
269
269
|
}] }]; } });
|
|
270
270
|
|
|
271
|
+
var _SkyModalHostService_instances, _SkyModalHostService_calculateZIndex;
|
|
271
272
|
const BASE_Z_INDEX = 1040;
|
|
272
273
|
const modalHosts = [];
|
|
273
274
|
/**
|
|
@@ -276,10 +277,11 @@ const modalHosts = [];
|
|
|
276
277
|
*/
|
|
277
278
|
class SkyModalHostService {
|
|
278
279
|
constructor() {
|
|
280
|
+
_SkyModalHostService_instances.add(this);
|
|
279
281
|
this.close = new Subject();
|
|
280
282
|
this.fullPage = false;
|
|
281
283
|
this.openHelp = new Subject();
|
|
282
|
-
this.zIndex = this.
|
|
284
|
+
this.zIndex = __classPrivateFieldGet(this, _SkyModalHostService_instances, "m", _SkyModalHostService_calculateZIndex).call(this);
|
|
283
285
|
modalHosts.push(this);
|
|
284
286
|
}
|
|
285
287
|
static get openModalCount() {
|
|
@@ -307,17 +309,17 @@ class SkyModalHostService {
|
|
|
307
309
|
destroy() {
|
|
308
310
|
modalHosts.splice(modalHosts.indexOf(this), 1);
|
|
309
311
|
}
|
|
310
|
-
calculateZIndex() {
|
|
311
|
-
const zIndexArray = modalHosts.map((hostService) => hostService.zIndex);
|
|
312
|
-
if (zIndexArray.length === 0) {
|
|
313
|
-
return BASE_Z_INDEX + 11;
|
|
314
|
-
}
|
|
315
|
-
else {
|
|
316
|
-
const currentMaxZIndex = Math.max(...zIndexArray);
|
|
317
|
-
return currentMaxZIndex + 10;
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
312
|
}
|
|
313
|
+
_SkyModalHostService_instances = new WeakSet(), _SkyModalHostService_calculateZIndex = function _SkyModalHostService_calculateZIndex() {
|
|
314
|
+
const zIndexArray = modalHosts.map((hostService) => hostService.zIndex);
|
|
315
|
+
if (zIndexArray.length === 0) {
|
|
316
|
+
return BASE_Z_INDEX + 11;
|
|
317
|
+
}
|
|
318
|
+
else {
|
|
319
|
+
const currentMaxZIndex = Math.max(...zIndexArray);
|
|
320
|
+
return currentMaxZIndex + 10;
|
|
321
|
+
}
|
|
322
|
+
};
|
|
321
323
|
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
322
324
|
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
|
|
323
325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
@@ -332,7 +334,7 @@ var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModal
|
|
|
332
334
|
* @internal
|
|
333
335
|
*/
|
|
334
336
|
class SkyModalHostComponent {
|
|
335
|
-
constructor(resolver, adapter, injector,
|
|
337
|
+
constructor(resolver, adapter, injector, changeDetector, modalHostContext, elRef, router) {
|
|
336
338
|
_SkyModalHostComponent_instances.add(this);
|
|
337
339
|
_SkyModalHostComponent_resolver.set(this, void 0);
|
|
338
340
|
_SkyModalHostComponent_adapter.set(this, void 0);
|
|
@@ -433,7 +435,7 @@ class SkyModalHostComponent {
|
|
|
433
435
|
hostService.close.subscribe(() => {
|
|
434
436
|
modalInstance.close();
|
|
435
437
|
});
|
|
436
|
-
__classPrivateFieldGet(this, _SkyModalHostComponent_router, "f")
|
|
438
|
+
__classPrivateFieldGet(this, _SkyModalHostComponent_router, "f")?.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
|
|
437
439
|
/* istanbul ignore else */
|
|
438
440
|
if (event instanceof NavigationStart) {
|
|
439
441
|
modalInstance.close();
|
|
@@ -457,12 +459,14 @@ _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter
|
|
|
457
459
|
instance.close();
|
|
458
460
|
}
|
|
459
461
|
};
|
|
460
|
-
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:
|
|
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: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }, { token: i3$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
461
463
|
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] });
|
|
462
464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
463
465
|
type: Component,
|
|
464
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;inset:0}\n"] }]
|
|
465
|
-
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type:
|
|
467
|
+
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }, { type: i0.ElementRef }, { type: i3$1.Router, decorators: [{
|
|
468
|
+
type: Optional
|
|
469
|
+
}] }]; }, propDecorators: { target: [{
|
|
466
470
|
type: ViewChild,
|
|
467
471
|
args: ['target', {
|
|
468
472
|
read: ViewContainerRef,
|
|
@@ -570,14 +574,14 @@ _SkyModalScrollShadowDirective_currentShadow = new WeakMap(), _SkyModalScrollSha
|
|
|
570
574
|
__classPrivateFieldSet(this, _SkyModalScrollShadowDirective_currentShadow, shadow, "f");
|
|
571
575
|
}
|
|
572
576
|
};
|
|
573
|
-
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.
|
|
577
|
+
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 });
|
|
574
578
|
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 });
|
|
575
579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
|
|
576
580
|
type: Directive,
|
|
577
581
|
args: [{
|
|
578
582
|
selector: '[skyModalScrollShadow]',
|
|
579
583
|
}]
|
|
580
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.
|
|
584
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.SkyMutationObserverService }, { type: i0.NgZone }, { type: i2.SkyThemeService, decorators: [{
|
|
581
585
|
type: Optional
|
|
582
586
|
}] }]; }, propDecorators: { skyModalScrollShadow: [{
|
|
583
587
|
type: Output
|
|
@@ -828,10 +832,10 @@ class SkyModalComponent {
|
|
|
828
832
|
}
|
|
829
833
|
_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();
|
|
830
834
|
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 });
|
|
831
|
-
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=\"
|
|
835
|
+
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" }] });
|
|
832
836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
833
837
|
type: Component,
|
|
834
|
-
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=\"
|
|
838
|
+
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"] }]
|
|
835
839
|
}], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
836
840
|
type: Host
|
|
837
841
|
}] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
|
|
@@ -866,7 +870,8 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
866
870
|
RouterModule,
|
|
867
871
|
SkyIconModule,
|
|
868
872
|
SkyModalsResourcesModule,
|
|
869
|
-
SkyThemeModule
|
|
873
|
+
SkyThemeModule,
|
|
874
|
+
SkyTrimModule], exports: [SkyModalComponent,
|
|
870
875
|
SkyModalContentComponent,
|
|
871
876
|
SkyModalFooterComponent,
|
|
872
877
|
SkyModalHeaderComponent] });
|
|
@@ -874,7 +879,8 @@ SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
874
879
|
RouterModule,
|
|
875
880
|
SkyIconModule,
|
|
876
881
|
SkyModalsResourcesModule,
|
|
877
|
-
SkyThemeModule
|
|
882
|
+
SkyThemeModule,
|
|
883
|
+
SkyTrimModule] });
|
|
878
884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
879
885
|
type: NgModule,
|
|
880
886
|
args: [{
|
|
@@ -892,6 +898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
892
898
|
SkyIconModule,
|
|
893
899
|
SkyModalsResourcesModule,
|
|
894
900
|
SkyThemeModule,
|
|
901
|
+
SkyTrimModule,
|
|
895
902
|
],
|
|
896
903
|
exports: [
|
|
897
904
|
SkyModalComponent,
|
|
@@ -1040,7 +1047,9 @@ class SkyConfirmComponent {
|
|
|
1040
1047
|
this.buttons = __classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getCustomButtons).call(this, config.buttons);
|
|
1041
1048
|
}
|
|
1042
1049
|
else {
|
|
1043
|
-
__classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getPresetButtons).call(this)
|
|
1050
|
+
__classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getPresetButtons).call(this)
|
|
1051
|
+
.pipe(take(1))
|
|
1052
|
+
.subscribe((buttons) => {
|
|
1044
1053
|
this.buttons = buttons;
|
|
1045
1054
|
});
|
|
1046
1055
|
}
|
|
@@ -1057,87 +1066,66 @@ class SkyConfirmComponent {
|
|
|
1057
1066
|
}
|
|
1058
1067
|
}
|
|
1059
1068
|
_SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new WeakMap(), _SkyConfirmComponent_resourcesService = new WeakMap(), _SkyConfirmComponent_instances = new WeakSet(), _SkyConfirmComponent_getPresetButtons = function _SkyConfirmComponent_getPresetButtons() {
|
|
1060
|
-
const emitter = new
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
{
|
|
1081
|
-
text: values
|
|
1082
|
-
autofocus: true,
|
|
1083
|
-
styleType: 'primary',
|
|
1084
|
-
action: 'yes',
|
|
1085
|
-
},
|
|
1086
|
-
{
|
|
1087
|
-
text: values[1],
|
|
1069
|
+
const emitter = new ReplaySubject(1);
|
|
1070
|
+
__classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f")
|
|
1071
|
+
.getStrings({
|
|
1072
|
+
cancel: 'skyux_confirm_dialog_default_cancel_text',
|
|
1073
|
+
no: 'skyux_confirm_dialog_default_no_text',
|
|
1074
|
+
ok: 'skyux_confirm_dialog_default_ok_text',
|
|
1075
|
+
yes: 'skyux_confirm_dialog_default_yes_text',
|
|
1076
|
+
})
|
|
1077
|
+
.subscribe((values) => {
|
|
1078
|
+
const confirmButtons = [];
|
|
1079
|
+
switch (__classPrivateFieldGet(this, _SkyConfirmComponent_config, "f").type) {
|
|
1080
|
+
case SkyConfirmType.YesNoCancel:
|
|
1081
|
+
case SkyConfirmType.YesCancel:
|
|
1082
|
+
confirmButtons.push({
|
|
1083
|
+
text: values.yes,
|
|
1084
|
+
autofocus: true,
|
|
1085
|
+
styleType: 'primary',
|
|
1086
|
+
action: 'yes',
|
|
1087
|
+
});
|
|
1088
|
+
if (__classPrivateFieldGet(this, _SkyConfirmComponent_config, "f").type === SkyConfirmType.YesNoCancel) {
|
|
1089
|
+
confirmButtons.push({
|
|
1090
|
+
text: values.no,
|
|
1088
1091
|
styleType: 'default',
|
|
1089
1092
|
action: 'no',
|
|
1090
|
-
}
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
},
|
|
1108
|
-
{
|
|
1109
|
-
text: values[1],
|
|
1110
|
-
styleType: 'link',
|
|
1111
|
-
action: 'cancel',
|
|
1112
|
-
},
|
|
1113
|
-
]);
|
|
1114
|
-
});
|
|
1115
|
-
break;
|
|
1116
|
-
}
|
|
1117
|
-
return emitter;
|
|
1118
|
-
}, _SkyConfirmComponent_getCustomButtons = function _SkyConfirmComponent_getCustomButtons(buttonConfig) {
|
|
1119
|
-
const buttons = [];
|
|
1120
|
-
buttonConfig.forEach((config) => {
|
|
1121
|
-
buttons.push({
|
|
1122
|
-
text: config.text,
|
|
1123
|
-
action: config.action,
|
|
1124
|
-
styleType: config.styleType || 'default',
|
|
1125
|
-
autofocus: config.autofocus || false,
|
|
1126
|
-
});
|
|
1093
|
+
});
|
|
1094
|
+
}
|
|
1095
|
+
confirmButtons.push({
|
|
1096
|
+
text: values.cancel,
|
|
1097
|
+
styleType: 'link',
|
|
1098
|
+
action: 'cancel',
|
|
1099
|
+
});
|
|
1100
|
+
break;
|
|
1101
|
+
default:
|
|
1102
|
+
confirmButtons.push({
|
|
1103
|
+
text: values.ok,
|
|
1104
|
+
autofocus: true,
|
|
1105
|
+
styleType: 'primary',
|
|
1106
|
+
action: 'ok',
|
|
1107
|
+
});
|
|
1108
|
+
}
|
|
1109
|
+
emitter.next(confirmButtons);
|
|
1127
1110
|
});
|
|
1128
|
-
return
|
|
1111
|
+
return emitter.asObservable();
|
|
1112
|
+
}, _SkyConfirmComponent_getCustomButtons = function _SkyConfirmComponent_getCustomButtons(buttonConfig) {
|
|
1113
|
+
return buttonConfig.map((config) => ({
|
|
1114
|
+
text: config.text,
|
|
1115
|
+
action: config.action,
|
|
1116
|
+
styleType: config.styleType || 'default',
|
|
1117
|
+
autofocus: config.autofocus || false,
|
|
1118
|
+
}));
|
|
1129
1119
|
};
|
|
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$
|
|
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 <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
|
|
1120
|
+
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 });
|
|
1121
|
+
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"] }] });
|
|
1132
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
1133
1123
|
type: Component,
|
|
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 <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
|
|
1124
|
+
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"] }]
|
|
1135
1125
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1136
1126
|
type: Inject,
|
|
1137
1127
|
args: [SKY_CONFIRM_CONFIG]
|
|
1138
|
-
}] }, { type: SkyModalInstance }, { type: i2$
|
|
1139
|
-
type: Optional
|
|
1140
|
-
}] }]; } });
|
|
1128
|
+
}] }, { type: SkyModalInstance }, { type: i2$1.SkyLibResourcesService }]; } });
|
|
1141
1129
|
|
|
1142
1130
|
class SkyConfirmModule {
|
|
1143
1131
|
}
|
|
@@ -1170,8 +1158,6 @@ var _SkyModalService_instances, _SkyModalService_dynamicComponentService, _SkyMo
|
|
|
1170
1158
|
* @dynamic
|
|
1171
1159
|
*/
|
|
1172
1160
|
class SkyModalService {
|
|
1173
|
-
// TODO: Make `dynamicComponentService` required. It is optional today to maintain binary compatibility for consumers when they construct
|
|
1174
|
-
// the service for unit testing.
|
|
1175
1161
|
constructor(dynamicComponentService) {
|
|
1176
1162
|
_SkyModalService_instances.add(this);
|
|
1177
1163
|
_SkyModalService_dynamicComponentService.set(this, void 0);
|
|
@@ -1307,10 +1293,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1307
1293
|
}]
|
|
1308
1294
|
}], ctorParameters: function () { return [{ type: SkyModalService }]; } });
|
|
1309
1295
|
|
|
1310
|
-
// TODO: defaults won't show in the generated docs until this work is done:
|
|
1311
|
-
|
|
1312
|
-
// TODO: confirm-button is internal and should be removed in a future version
|
|
1313
|
-
|
|
1314
1296
|
/**
|
|
1315
1297
|
* Generated bundle index. Do not edit.
|
|
1316
1298
|
*/
|