@skyux/indicators 9.0.0-alpha.8 → 9.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +1384 -1356
- package/esm2022/lib/modules/alert/alert.component.mjs +3 -3
- package/esm2022/lib/modules/icon/icon-class-list.pipe.mjs +3 -3
- package/esm2022/lib/modules/icon/icon-resolver.service.mjs +24 -24
- package/esm2022/lib/modules/icon/icon-stack-item.mjs +1 -1
- package/esm2022/lib/modules/icon/icon-stack.component.mjs +3 -3
- package/esm2022/lib/modules/icon/icon.component.mjs +3 -3
- package/esm2022/lib/modules/shared/sky-indicators-resources.module.mjs +4 -2
- package/esm2022/lib/modules/tokens/token.component.mjs +3 -3
- package/esm2022/lib/modules/wait/wait-page.component.mjs +4 -4
- package/esm2022/lib/modules/wait/wait.component.mjs +11 -9
- package/esm2022/lib/modules/wait/wait.module.mjs +4 -8
- package/esm2022/lib/modules/wait/wait.service.mjs +7 -6
- package/esm2022/testing/icon/icon-harness.mjs +2 -1
- package/fesm2022/skyux-indicators-testing.mjs +1 -0
- package/fesm2022/skyux-indicators-testing.mjs.map +1 -1
- package/fesm2022/skyux-indicators.mjs +65 -63
- package/fesm2022/skyux-indicators.mjs.map +1 -1
- package/lib/modules/icon/icon-class-list.pipe.d.ts +1 -1
- package/lib/modules/icon/icon-resolver.service.d.ts +1 -1
- package/lib/modules/icon/icon-stack-item.d.ts +1 -0
- package/lib/modules/icon/icon.component.d.ts +1 -0
- package/lib/modules/wait/wait-page.component.d.ts +1 -1
- package/lib/modules/wait/wait.component.d.ts +1 -1
- package/lib/modules/wait/wait.module.d.ts +1 -4
- package/package.json +5 -5
- package/testing/icon/icon-harness.d.ts +1 -0
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, Injectable, Pipe, Component, Input, ChangeDetectionStrategy, NgModule, EventEmitter, Output, ChangeDetectorRef, ElementRef, Directive, ViewChild, ViewChildren } from '@angular/core';
|
|
4
|
+
import { inject, Injectable, Pipe, Component, Input, ChangeDetectionStrategy, NgModule, EventEmitter, Output, ChangeDetectorRef, ElementRef, Directive, ViewChild, ViewChildren, EnvironmentInjector } from '@angular/core';
|
|
5
5
|
import * as i2 from '@skyux/theme';
|
|
6
6
|
import { SkyThemeIconManifestService, SkyThemeService, SkyThemeModule } from '@skyux/theme';
|
|
7
7
|
import * as i5 from '@skyux/i18n';
|
|
8
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS
|
|
8
|
+
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
9
9
|
import * as i2$1 from '@skyux/core';
|
|
10
|
-
import { SkyLogService, SkyTrimModule, SkyMutationObserverService, SkyLiveAnnouncerService, SkyAppWindowRef, SkyDynamicComponentService
|
|
10
|
+
import { SkyLogService, SkyTrimModule, SkyMutationObserverService, SkyLiveAnnouncerService, SkyAppWindowRef, SkyDynamicComponentService } from '@skyux/core';
|
|
11
11
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
12
12
|
import { Subject, BehaviorSubject, defer } from 'rxjs';
|
|
13
13
|
import { takeUntil, take, finalize } from 'rxjs/operators';
|
|
@@ -24,33 +24,33 @@ class SkyIconResolverService {
|
|
|
24
24
|
this.#glyphMap.set(glyph.name, glyph);
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
resolveIcon(icon, variant,
|
|
28
|
-
iconType
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
27
|
+
resolveIcon(icon, variant, themeSettings) {
|
|
28
|
+
let iconType = 'fa';
|
|
29
|
+
const variantIcon = variant && `${icon}-${variant}`;
|
|
30
|
+
const lineIcon = `${icon}-line`;
|
|
31
|
+
// Get the specified variant, or fall back to the line variant.
|
|
32
|
+
// If the icon has no variants, try to fall back to the icon name without a variant suffix.
|
|
33
|
+
// If no icon is found, fall back to the first glyph with the icon name as a FA alias.
|
|
34
|
+
const glyph = this.#glyphMap.get(variantIcon) ??
|
|
35
|
+
this.#glyphMap.get(lineIcon) ??
|
|
36
|
+
this.#glyphMap.get(icon) ??
|
|
37
|
+
Array.from(this.#glyphMap.values()).find((glyph) => glyph.faName === icon ||
|
|
38
|
+
glyph.aliases?.includes(variantIcon) ||
|
|
39
|
+
glyph.aliases?.includes(lineIcon) ||
|
|
40
|
+
glyph.aliases?.includes(icon));
|
|
41
|
+
if (glyph) {
|
|
42
|
+
// If a glyph is found, use it for modern theme or if no FA fallback exists.
|
|
43
|
+
if (themeSettings?.theme.name === 'modern' || !glyph.faName) {
|
|
44
|
+
icon = glyph.name;
|
|
45
|
+
iconType = 'skyux';
|
|
44
46
|
}
|
|
45
47
|
else {
|
|
46
|
-
//
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
icon = faName;
|
|
50
|
-
iconType = 'fa';
|
|
51
|
-
}
|
|
48
|
+
// For default theme, use known FA fallback.
|
|
49
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
50
|
+
icon = glyph.faName;
|
|
52
51
|
}
|
|
53
52
|
}
|
|
53
|
+
// If no SKY UX glyph is found, assume icon is part of FA and pass it along.
|
|
54
54
|
return {
|
|
55
55
|
icon,
|
|
56
56
|
iconType,
|
|
@@ -71,9 +71,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
71
71
|
*/
|
|
72
72
|
class SkyIconClassListPipe {
|
|
73
73
|
#resolver = inject(SkyIconResolverService);
|
|
74
|
-
transform(icon, themeSettings,
|
|
74
|
+
transform(icon, themeSettings, size, fixedWidth, variant) {
|
|
75
75
|
let classList;
|
|
76
|
-
const { icon: resolvedIcon, iconType: resolvedIconType } = this.#resolver.resolveIcon(icon, variant,
|
|
76
|
+
const { icon: resolvedIcon, iconType: resolvedIconType } = this.#resolver.resolveIcon(icon, variant, themeSettings);
|
|
77
77
|
if (resolvedIconType === 'skyux') {
|
|
78
78
|
classList = ['sky-i-' + resolvedIcon];
|
|
79
79
|
}
|
|
@@ -106,11 +106,11 @@ class SkyIconStackComponent {
|
|
|
106
106
|
this.themeSvc = inject(SkyThemeService, { optional: true });
|
|
107
107
|
}
|
|
108
108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyIconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n aria-hidden=\"true\"\n class=\"sky-icon-stack fa-stack\"\n [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n <i\n *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"\n baseIcon.icon\n | skyIconClassList
|
|
109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n aria-hidden=\"true\"\n class=\"sky-icon-stack fa-stack\"\n [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n <i\n *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"\n baseIcon.icon\n | skyIconClassList : (themeSvc?.settingsChange | async)?.currentSettings\n \"\n ></i>\n <i\n *ngIf=\"topIcon\"\n class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n [ngClass]=\"\n topIcon.icon\n | skyIconClassList : (themeSvc?.settingsChange | async)?.currentSettings\n \"\n ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-icon-inverse{color:var(--sky-icon-stack-top-icon-color-override, #ffffff)}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SkyIconClassListPipe, name: "skyIconClassList" }] }); }
|
|
110
110
|
}
|
|
111
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyIconStackComponent, decorators: [{
|
|
112
112
|
type: Component,
|
|
113
|
-
args: [{ selector: 'sky-icon-stack', template: "<span\n aria-hidden=\"true\"\n class=\"sky-icon-stack fa-stack\"\n [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n <i\n *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"\n baseIcon.icon\n | skyIconClassList
|
|
113
|
+
args: [{ selector: 'sky-icon-stack', template: "<span\n aria-hidden=\"true\"\n class=\"sky-icon-stack fa-stack\"\n [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n <i\n *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"\n baseIcon.icon\n | skyIconClassList : (themeSvc?.settingsChange | async)?.currentSettings\n \"\n ></i>\n <i\n *ngIf=\"topIcon\"\n class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n [ngClass]=\"\n topIcon.icon\n | skyIconClassList : (themeSvc?.settingsChange | async)?.currentSettings\n \"\n ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-icon-inverse{color:var(--sky-icon-stack-top-icon-color-override, #ffffff)}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"] }]
|
|
114
114
|
}], propDecorators: { size: [{
|
|
115
115
|
type: Input
|
|
116
116
|
}], baseIcon: [{
|
|
@@ -124,11 +124,11 @@ class SkyIconComponent {
|
|
|
124
124
|
this.themeSvc = inject(SkyThemeService, { optional: true });
|
|
125
125
|
}
|
|
126
126
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyIconComponent, selector: "sky-icon", inputs: { icon: "icon", iconType: "iconType", size: "size", fixedWidth: "fixedWidth", variant: "variant" }, ngImport: i0, template: "<i\n *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [attr.data-sky-icon]=\"icon\"\n [attr.data-sky-icon-type]=\"iconType\"\n [attr.data-sky-icon-variant]=\"variant\"\n [ngClass]=\"\n icon\n | skyIconClassList\n : (themeSvc?.settingsChange | async)?.currentSettings\n :
|
|
127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyIconComponent, selector: "sky-icon", inputs: { icon: "icon", iconType: "iconType", size: "size", fixedWidth: "fixedWidth", variant: "variant" }, ngImport: i0, template: "<i\n *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [attr.data-sky-icon]=\"icon\"\n [attr.data-sky-icon-type]=\"iconType\"\n [attr.data-sky-icon-variant]=\"variant\"\n [ngClass]=\"\n icon\n | skyIconClassList\n : (themeSvc?.settingsChange | async)?.currentSettings\n : size\n : fixedWidth\n : variant\n \"\n></i>\n", styles: [":host{display:inline-block}i{display:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SkyIconClassListPipe, name: "skyIconClassList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
128
128
|
}
|
|
129
129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyIconComponent, decorators: [{
|
|
130
130
|
type: Component,
|
|
131
|
-
args: [{ selector: 'sky-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i\n *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [attr.data-sky-icon]=\"icon\"\n [attr.data-sky-icon-type]=\"iconType\"\n [attr.data-sky-icon-variant]=\"variant\"\n [ngClass]=\"\n icon\n | skyIconClassList\n : (themeSvc?.settingsChange | async)?.currentSettings\n :
|
|
131
|
+
args: [{ selector: 'sky-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i\n *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [attr.data-sky-icon]=\"icon\"\n [attr.data-sky-icon-type]=\"iconType\"\n [attr.data-sky-icon-variant]=\"variant\"\n [ngClass]=\"\n icon\n | skyIconClassList\n : (themeSvc?.settingsChange | async)?.currentSettings\n : size\n : fixedWidth\n : variant\n \"\n></i>\n", styles: [":host{display:inline-block}i{display:inherit}\n"] }]
|
|
132
132
|
}], propDecorators: { icon: [{
|
|
133
133
|
type: Input
|
|
134
134
|
}], iconType: [{
|
|
@@ -155,6 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
155
155
|
}]
|
|
156
156
|
}] });
|
|
157
157
|
|
|
158
|
+
/* istanbul ignore file */
|
|
158
159
|
/**
|
|
159
160
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
160
161
|
* The contents of this file were automatically generated by
|
|
@@ -209,6 +210,7 @@ const RESOURCES = {
|
|
|
209
210
|
},
|
|
210
211
|
},
|
|
211
212
|
};
|
|
213
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
212
214
|
class SkyIndicatorsResourcesProvider {
|
|
213
215
|
getString(localeInfo, name) {
|
|
214
216
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -386,11 +388,11 @@ class SkyAlertComponent {
|
|
|
386
388
|
}
|
|
387
389
|
}
|
|
388
390
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n class=\"sky-alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n role=\"alert\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n </sky-icon-stack>\n </div>\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <div class=\"sky-alert-content\">\n <ng-content></ng-content>\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon
|
|
391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n class=\"sky-alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n role=\"alert\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n </sky-icon-stack>\n </div>\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <div class=\"sky-alert-content\">\n <ng-content></ng-content>\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon icon=\"close\"> </sky-icon>\n </span>\n </button>\n</div>\n", styles: [":host{display:block}.sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-btn-active-border: none;--sky-alert-close-btn-border-radius: 3px;--sky-alert-close-btn-focus-border: none;--sky-alert-close-btn-focus-box-shadow: none;--sky-alert-close-btn-opacity: .8;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-btn-active-border: var( --sky-background-color-primary-dark ) solid 2px;--sky-alert-close-btn-border-radius: 6px;--sky-alert-close-btn-focus-border: var(--sky-background-color-primary-dark) solid 1px;--sky-alert-close-btn-focus-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-alert-close-btn-opacity: 1;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-btn-active-border: var( --sky-background-color-primary-dark ) solid 2px;--sky-alert-close-btn-border-radius: 6px;--sky-alert-close-btn-focus-border: var(--sky-background-color-primary-dark) solid 1px;--sky-alert-close-btn-focus-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-alert-close-btn-opacity: 1;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert:not(.sky-alert-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:var(--sky-alert-close-btn-opacity);border:none;border-radius:var(--sky-alert-close-btn-border-radius);background-color:transparent;display:none;flex-shrink:0}.sky-alert-close:hover{opacity:1;border:var(--sky-alert-close-btn-focus-border)}.sky-alert-close:focus-visible{border:var(--sky-background-color-primary-dark) solid 2px;outline:none}.sky-alert-close:active{border:var(--sky-alert-close-btn-active-border)}.sky-alert-close:focus-visible:not(:active){box-shadow:var(--sky-alert-close-btn-focus-box-shadow)}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
390
392
|
}
|
|
391
393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAlertComponent, decorators: [{
|
|
392
394
|
type: Component,
|
|
393
|
-
args: [{ selector: 'sky-alert', template: "<div\n class=\"sky-alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n role=\"alert\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n </sky-icon-stack>\n </div>\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <div class=\"sky-alert-content\">\n <ng-content></ng-content>\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon
|
|
395
|
+
args: [{ selector: 'sky-alert', template: "<div\n class=\"sky-alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n role=\"alert\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertTypeOrDefault === 'info',\n 'sky-alert-success': alertTypeOrDefault === 'success',\n 'sky-alert-warning': alertTypeOrDefault === 'warning',\n 'sky-alert-danger': alertTypeOrDefault === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n </sky-icon-stack>\n </div>\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <div class=\"sky-alert-content\">\n <ng-content></ng-content>\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon icon=\"close\"> </sky-icon>\n </span>\n </button>\n</div>\n", styles: [":host{display:block}.sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-btn-active-border: none;--sky-alert-close-btn-border-radius: 3px;--sky-alert-close-btn-focus-border: none;--sky-alert-close-btn-focus-box-shadow: none;--sky-alert-close-btn-opacity: .8;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-btn-active-border: var( --sky-background-color-primary-dark ) solid 2px;--sky-alert-close-btn-border-radius: 6px;--sky-alert-close-btn-focus-border: var(--sky-background-color-primary-dark) solid 1px;--sky-alert-close-btn-focus-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-alert-close-btn-opacity: 1;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-btn-active-border: var( --sky-background-color-primary-dark ) solid 2px;--sky-alert-close-btn-border-radius: 6px;--sky-alert-close-btn-focus-border: var(--sky-background-color-primary-dark) solid 1px;--sky-alert-close-btn-focus-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-alert-close-btn-opacity: 1;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert:not(.sky-alert-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:var(--sky-alert-close-btn-opacity);border:none;border-radius:var(--sky-alert-close-btn-border-radius);background-color:transparent;display:none;flex-shrink:0}.sky-alert-close:hover{opacity:1;border:var(--sky-alert-close-btn-focus-border)}.sky-alert-close:focus-visible{border:var(--sky-background-color-primary-dark) solid 2px;outline:none}.sky-alert-close:active{border:var(--sky-alert-close-btn-active-border)}.sky-alert-close:focus-visible:not(:active){box-shadow:var(--sky-alert-close-btn-focus-box-shadow)}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"] }]
|
|
394
396
|
}], propDecorators: { alertType: [{
|
|
395
397
|
type: Input
|
|
396
398
|
}], closeable: [{
|
|
@@ -1193,11 +1195,11 @@ class SkyTokenComponent {
|
|
|
1193
1195
|
this.closeActive = closeActive;
|
|
1194
1196
|
}
|
|
1195
1197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable", role: "role" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, viewQueries: [{ propertyName: "actionButtonRef", first: true, predicate: ["actionButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n class=\"sky-token-cell\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n #actionButton\n >\n <ng-content></ng-content>\n </button>\n </span>\n <span\n *ngIf=\"dismissible\"\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon
|
|
1198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable", role: "role" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, viewQueries: [{ propertyName: "actionButtonRef", first: true, predicate: ["actionButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n class=\"sky-token-cell\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n #actionButton\n >\n <ng-content></ng-content>\n </button>\n </span>\n <span\n *ngIf=\"dismissible\"\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon class=\"sky-token-btn-close-icon\" icon=\"close\"></sky-icon>\n </button>\n </span>\n</div>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;padding:0;display:inline-block}.sky-token:hover,.sky-token.sky-token-focused{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token.sky-token-focused{box-shadow:0 0 8px #00b4f199;border:1px solid var(--sky-highlight-color-info);outline:none}.sky-token.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn{background-color:transparent;border:0;padding:2px 8px}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close{margin-left:-2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;font-size:14px}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible{padding-right:1px}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token.sky-token-focused,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}:host-context(.sky-theme-modern) .sky-token-btn.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token-btn-action{font-size:14px}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon{width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;font-size:14px}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}.sky-theme-modern .sky-token.sky-token-dismissible{padding-right:1px}.sky-theme-modern .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token.sky-token-focused,.sky-theme-modern .sky-token:hover{background-color:#ebfbff}.sky-theme-modern .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}.sky-theme-modern .sky-token-btn.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token-btn-action{font-size:14px}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}.sky-theme-modern .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus-visible{outline:none}.sky-theme-modern .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon{width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1197
1199
|
}
|
|
1198
1200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
1199
1201
|
type: Component,
|
|
1200
|
-
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n class=\"sky-token-cell\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n #actionButton\n >\n <ng-content></ng-content>\n </button>\n </span>\n <span\n *ngIf=\"dismissible\"\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon
|
|
1202
|
+
args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n [attr.role]=\"role\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-disabled': disabled,\n 'sky-token-dismissible': dismissible,\n 'sky-token-active': tokenActive && !closeActive,\n 'sky-token-focused': isFocused\n }\"\n (document:mouseup)=\"setTokenActive(false)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <span\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n class=\"sky-token-cell\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-token-btn sky-token-btn-action\"\n type=\"button\"\n [attr.tabindex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled\n }\"\n #actionButton\n >\n <ng-content></ng-content>\n </button>\n </span>\n <span\n *ngIf=\"dismissible\"\n class=\"sky-token-cell\"\n [attr.role]=\"role === 'row' ? 'gridcell' : undefined\"\n >\n <button\n class=\"sky-btn sky-token-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"\n ariaLabel || ('skyux_tokens_dismiss_button_title' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon class=\"sky-token-btn-close-icon\" icon=\"close\"></sky-icon>\n </button>\n </span>\n</div>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;padding:0;display:inline-block}.sky-token:hover,.sky-token.sky-token-focused{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token.sky-token-focused{box-shadow:0 0 8px #00b4f199;border:1px solid var(--sky-highlight-color-info);outline:none}.sky-token.sky-btn-disabled .sky-btn-disabled{opacity:1}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn{background-color:transparent;border:0;padding:2px 8px}.sky-token-btn-action:focus-visible{outline:none}.sky-token-btn-close{margin-left:-2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus-visible{opacity:1}.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;font-size:14px}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible{padding-right:1px}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token.sky-token-focused,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#ebfbff}:host-context(.sky-theme-modern) .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}:host-context(.sky-theme-modern) .sky-token-btn.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token-btn-action{font-size:14px}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon{width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;font-size:14px}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7;background-color:#ebfbff}.sky-theme-modern .sky-token.sky-token-dismissible{padding-right:1px}.sky-theme-modern .sky-token.sky-token-dismissible .sky-token-btn-action{padding-right:0}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token.sky-token-focused:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token.sky-token-focused,.sky-theme-modern .sky-token:hover{background-color:#ebfbff}.sky-theme-modern .sky-token-btn{padding:1px 5px;border:0;box-shadow:none;background-color:transparent}.sky-theme-modern .sky-token-btn.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token-btn-action{font-size:14px}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px;padding:0}.sky-theme-modern .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus-visible{outline:none}.sky-theme-modern .sky-token-btn-close:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon{width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"] }]
|
|
1201
1203
|
}], propDecorators: { disabled: [{
|
|
1202
1204
|
type: Input
|
|
1203
1205
|
}], ariaLabel: [{
|
|
@@ -1807,11 +1809,11 @@ class SkyWaitComponent {
|
|
|
1807
1809
|
this.ariaLiveText = '';
|
|
1808
1810
|
this.screenReaderCompletedTextStream = new BehaviorSubject('');
|
|
1809
1811
|
this.#id = `sky-wait-${++nextId}`;
|
|
1810
|
-
this.#
|
|
1812
|
+
this.#ngUnsubscribe = new Subject();
|
|
1811
1813
|
this.#adapterService = inject(SkyWaitAdapterService);
|
|
1814
|
+
this.#elRef = inject(ElementRef);
|
|
1812
1815
|
this.#liveAnnouncer = inject(SkyLiveAnnouncerService);
|
|
1813
1816
|
this.#resourceSvc = inject(SkyLibResourcesService);
|
|
1814
|
-
this.#ngUnsubscribe = new Subject();
|
|
1815
1817
|
}
|
|
1816
1818
|
/**
|
|
1817
1819
|
* The ARIA label for the wait icon.
|
|
@@ -1898,14 +1900,14 @@ class SkyWaitComponent {
|
|
|
1898
1900
|
#customAriaLabel;
|
|
1899
1901
|
#customScreenReaderCompletedText;
|
|
1900
1902
|
#id;
|
|
1901
|
-
#elRef;
|
|
1902
|
-
#adapterService;
|
|
1903
|
-
#liveAnnouncer;
|
|
1904
|
-
#resourceSvc;
|
|
1905
1903
|
#ngUnsubscribe;
|
|
1906
1904
|
#_isFullPage;
|
|
1907
1905
|
#_isNonBlocking;
|
|
1908
1906
|
#_isWaiting;
|
|
1907
|
+
#adapterService;
|
|
1908
|
+
#elRef;
|
|
1909
|
+
#liveAnnouncer;
|
|
1910
|
+
#resourceSvc;
|
|
1909
1911
|
ngOnInit() {
|
|
1910
1912
|
this.#publishAriaLabel();
|
|
1911
1913
|
this.#publishScreenReaderCompletedText();
|
|
@@ -1946,11 +1948,11 @@ class SkyWaitComponent {
|
|
|
1946
1948
|
}
|
|
1947
1949
|
}
|
|
1948
1950
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyWaitComponent, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking", screenReaderCompletedText: "screenReaderCompletedText" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div\n class=\"sky-wait-container\"\n [ngClass]=\"{\n 'sky-wait-full-page': isFullPage,\n 'sky-wait-non-blocking': isNonBlocking\n }\"\n>\n <div\n *ngIf=\"isWaiting\"\n class=\"sky-wait-mask\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
1951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyWaitComponent, isStandalone: true, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking", screenReaderCompletedText: "screenReaderCompletedText" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div\n class=\"sky-wait-container\"\n [ngClass]=\"{\n 'sky-wait-full-page': isFullPage,\n 'sky-wait-non-blocking': isNonBlocking\n }\"\n>\n <div\n *ngIf=\"isWaiting\"\n class=\"sky-wait-mask\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyIndicatorsResourcesModule }] }); }
|
|
1950
1952
|
}
|
|
1951
1953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitComponent, decorators: [{
|
|
1952
1954
|
type: Component,
|
|
1953
|
-
args: [{ selector: 'sky-wait', providers: [SkyWaitAdapterService], template: "<div\n class=\"sky-wait-container\"\n [ngClass]=\"{\n 'sky-wait-full-page': isFullPage,\n 'sky-wait-non-blocking': isNonBlocking\n }\"\n>\n <div\n *ngIf=\"isWaiting\"\n class=\"sky-wait-mask\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"] }]
|
|
1955
|
+
args: [{ standalone: true, selector: 'sky-wait', providers: [SkyWaitAdapterService], imports: [CommonModule, SkyIndicatorsResourcesModule], template: "<div\n class=\"sky-wait-container\"\n [ngClass]=\"{\n 'sky-wait-full-page': isFullPage,\n 'sky-wait-non-blocking': isNonBlocking\n }\"\n>\n <div\n *ngIf=\"isWaiting\"\n class=\"sky-wait-mask\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"] }]
|
|
1954
1956
|
}], propDecorators: { ariaLabel: [{
|
|
1955
1957
|
type: Input
|
|
1956
1958
|
}], isWaiting: [{
|
|
@@ -1963,41 +1965,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1963
1965
|
type: Input
|
|
1964
1966
|
}] } });
|
|
1965
1967
|
|
|
1968
|
+
class SkyWaitModule {
|
|
1969
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1970
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, imports: [SkyWaitComponent], exports: [SkyWaitComponent] }); }
|
|
1971
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, imports: [SkyWaitComponent] }); }
|
|
1972
|
+
}
|
|
1973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, decorators: [{
|
|
1974
|
+
type: NgModule,
|
|
1975
|
+
args: [{
|
|
1976
|
+
imports: [SkyWaitComponent],
|
|
1977
|
+
exports: [SkyWaitComponent],
|
|
1978
|
+
}]
|
|
1979
|
+
}] });
|
|
1980
|
+
|
|
1966
1981
|
/**
|
|
1967
1982
|
* @internal
|
|
1968
1983
|
*/
|
|
1969
1984
|
class SkyWaitPageComponent {
|
|
1970
1985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1971
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyWaitPageComponent, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n <sky-wait\n data-sky-id=\"page-wait-non-blocking\"\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n >\n </sky-wait>\n <sky-wait\n data-sky-id=\"page-wait-blocking\"\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n >\n </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], dependencies: [{ kind: "component", type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
|
|
1986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyWaitPageComponent, isStandalone: true, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n <sky-wait\n data-sky-id=\"page-wait-non-blocking\"\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n >\n </sky-wait>\n <sky-wait\n data-sky-id=\"page-wait-blocking\"\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n >\n </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], dependencies: [{ kind: "component", type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
|
|
1972
1987
|
}
|
|
1973
1988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitPageComponent, decorators: [{
|
|
1974
1989
|
type: Component,
|
|
1975
|
-
args: [{ selector: 'sky-wait-page', template: "<div class=\"sky-wait-page\">\n <sky-wait\n data-sky-id=\"page-wait-non-blocking\"\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n >\n </sky-wait>\n <sky-wait\n data-sky-id=\"page-wait-blocking\"\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n >\n </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"] }]
|
|
1990
|
+
args: [{ standalone: true, selector: 'sky-wait-page', imports: [SkyWaitComponent], template: "<div class=\"sky-wait-page\">\n <sky-wait\n data-sky-id=\"page-wait-non-blocking\"\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n >\n </sky-wait>\n <sky-wait\n data-sky-id=\"page-wait-blocking\"\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n >\n </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"] }]
|
|
1976
1991
|
}], propDecorators: { hasBlockingWait: [{
|
|
1977
1992
|
type: Input
|
|
1978
1993
|
}], hasNonBlockingWait: [{
|
|
1979
1994
|
type: Input
|
|
1980
1995
|
}] } });
|
|
1981
1996
|
|
|
1982
|
-
class SkyWaitModule {
|
|
1983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1984
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, declarations: [SkyWaitComponent, SkyWaitPageComponent], imports: [CommonModule, SkyIndicatorsResourcesModule], exports: [SkyWaitComponent] }); }
|
|
1985
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, imports: [CommonModule, SkyIndicatorsResourcesModule] }); }
|
|
1986
|
-
}
|
|
1987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitModule, decorators: [{
|
|
1988
|
-
type: NgModule,
|
|
1989
|
-
args: [{
|
|
1990
|
-
declarations: [SkyWaitComponent, SkyWaitPageComponent],
|
|
1991
|
-
imports: [CommonModule, SkyIndicatorsResourcesModule],
|
|
1992
|
-
exports: [SkyWaitComponent],
|
|
1993
|
-
}]
|
|
1994
|
-
}] });
|
|
1995
|
-
|
|
1996
1997
|
let waitComponent;
|
|
1997
1998
|
let waitComponentRef;
|
|
1998
1999
|
let pageWaitBlockingCount = 0;
|
|
1999
2000
|
let pageWaitNonBlockingCount = 0;
|
|
2000
2001
|
class SkyWaitService {
|
|
2002
|
+
#environmentInjector = inject(EnvironmentInjector);
|
|
2001
2003
|
#windowSvc = inject(SkyAppWindowRef);
|
|
2002
2004
|
#dynamicComponentService = inject(SkyDynamicComponentService);
|
|
2003
2005
|
/**
|
|
@@ -2086,7 +2088,7 @@ class SkyWaitService {
|
|
|
2086
2088
|
// with any other waits that are created.
|
|
2087
2089
|
if (!waitComponent) {
|
|
2088
2090
|
waitComponentRef = this.#dynamicComponentService.createComponent(SkyWaitPageComponent, {
|
|
2089
|
-
|
|
2091
|
+
environmentInjector: this.#environmentInjector,
|
|
2090
2092
|
});
|
|
2091
2093
|
waitComponent = waitComponentRef.instance;
|
|
2092
2094
|
}
|
|
@@ -2136,12 +2138,12 @@ class SkyWaitService {
|
|
|
2136
2138
|
}
|
|
2137
2139
|
}
|
|
2138
2140
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2139
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitService, providedIn: '
|
|
2141
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitService, providedIn: 'root' }); }
|
|
2140
2142
|
}
|
|
2141
2143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyWaitService, decorators: [{
|
|
2142
2144
|
type: Injectable,
|
|
2143
2145
|
args: [{
|
|
2144
|
-
providedIn: '
|
|
2146
|
+
providedIn: 'root',
|
|
2145
2147
|
}]
|
|
2146
2148
|
}] });
|
|
2147
2149
|
|