@skyux/indicators 8.7.0 → 9.0.0-alpha.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/{esm2020 → esm2022}/lib/modules/alert/alert.component.mjs +56 -55
- package/{esm2020 → esm2022}/lib/modules/alert/alert.module.mjs +13 -13
- package/{esm2020 → esm2022}/lib/modules/chevron/chevron.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/chevron/chevron.module.mjs +13 -13
- package/{esm2020 → esm2022}/lib/modules/expansion-indicator/expansion-indicator.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/expansion-indicator/expansion-indicator.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/modules/help-inline/help-inline-aria-expanded.pipe.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/help-inline/help-inline.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/help-inline/help-inline.module.mjs +13 -13
- package/esm2022/lib/modules/icon/icon-class-list.pipe.mjs +35 -0
- package/esm2022/lib/modules/icon/icon-resolver.service.mjs +57 -0
- package/{esm2020 → esm2022}/lib/modules/icon/icon-stack.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/icon/icon.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/icon/icon.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/modules/key-info/key-info-label.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/key-info/key-info-value.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/key-info/key-info.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/key-info/key-info.module.mjs +9 -9
- package/esm2022/lib/modules/label/label.component.mjs +118 -0
- package/{esm2020 → esm2022}/lib/modules/label/label.module.mjs +11 -11
- package/{esm2020 → esm2022}/lib/modules/shared/sky-indicators-resources.module.mjs +11 -11
- package/esm2022/lib/modules/status-indicator/status-indicator.component.mjs +104 -0
- package/{esm2020 → esm2022}/lib/modules/status-indicator/status-indicator.module.mjs +13 -13
- package/esm2022/lib/modules/text-highlight/text-highlight.directive.mjs +151 -0
- package/{esm2020 → esm2022}/lib/modules/text-highlight/text-highlight.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/modules/tokens/token.component.mjs +15 -15
- package/esm2022/lib/modules/tokens/tokens.component.mjs +332 -0
- package/{esm2020 → esm2022}/lib/modules/tokens/tokens.module.mjs +11 -11
- package/esm2022/lib/modules/wait/wait-adapter.service.mjs +224 -0
- package/{esm2020 → esm2022}/lib/modules/wait/wait-page.component.mjs +4 -4
- package/esm2022/lib/modules/wait/wait.component.mjs +171 -0
- package/{esm2020 → esm2022}/lib/modules/wait/wait.module.mjs +5 -5
- package/esm2022/lib/modules/wait/wait.service.mjs +159 -0
- package/esm2022/testing/alert/alert-harness.mjs +112 -0
- package/esm2022/testing/alert-fixture.mjs +70 -0
- package/esm2022/testing/chevron/chevron-harness.mjs +38 -0
- package/esm2022/testing/help-inline/help-inline-harness.mjs +25 -0
- package/esm2022/testing/icon/icon-harness.mjs +86 -0
- package/esm2022/testing/key-info/key-info-harness.mjs +43 -0
- package/{esm2020 → esm2022}/testing/key-info/key-info-label-harness.mjs +5 -5
- package/{esm2020 → esm2022}/testing/key-info/key-info-value-harness.mjs +5 -5
- package/esm2022/testing/label/label-harness.mjs +88 -0
- package/esm2022/testing/label-fixture.mjs +42 -0
- package/esm2022/testing/tokens/token-harness.mjs +63 -0
- package/esm2022/testing/tokens/tokens-harness.mjs +45 -0
- package/esm2022/testing/wait/wait-harness.mjs +60 -0
- package/esm2022/testing/wait-fixture.mjs +28 -0
- package/{fesm2020 → fesm2022}/skyux-indicators-testing.mjs +146 -190
- package/{fesm2020 → fesm2022}/skyux-indicators-testing.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/skyux-indicators.mjs +756 -737
- package/fesm2022/skyux-indicators.mjs.map +1 -0
- package/lib/modules/alert/alert.component.d.ts +1 -1
- package/lib/modules/chevron/chevron.component.d.ts +1 -1
- package/lib/modules/expansion-indicator/expansion-indicator.component.d.ts +1 -1
- package/lib/modules/help-inline/help-inline.component.d.ts +1 -1
- package/lib/modules/icon/icon-stack.component.d.ts +1 -1
- package/lib/modules/icon/icon.component.d.ts +1 -1
- package/lib/modules/key-info/key-info.component.d.ts +1 -1
- package/lib/modules/label/label.component.d.ts +1 -1
- package/lib/modules/status-indicator/status-indicator.component.d.ts +1 -1
- package/lib/modules/text-highlight/text-highlight.directive.d.ts +1 -1
- package/lib/modules/tokens/token.component.d.ts +1 -1
- package/lib/modules/tokens/tokens.component.d.ts +1 -1
- package/lib/modules/wait/wait-page.component.d.ts +1 -1
- package/lib/modules/wait/wait.component.d.ts +1 -1
- package/package.json +17 -25
- package/esm2020/lib/modules/icon/icon-class-list.pipe.mjs +0 -40
- package/esm2020/lib/modules/icon/icon-resolver.service.mjs +0 -60
- package/esm2020/lib/modules/label/label.component.mjs +0 -116
- package/esm2020/lib/modules/status-indicator/status-indicator.component.mjs +0 -104
- package/esm2020/lib/modules/text-highlight/text-highlight.directive.mjs +0 -154
- package/esm2020/lib/modules/tokens/tokens.component.mjs +0 -320
- package/esm2020/lib/modules/wait/wait-adapter.service.mjs +0 -221
- package/esm2020/lib/modules/wait/wait.component.mjs +0 -167
- package/esm2020/lib/modules/wait/wait.service.mjs +0 -161
- package/esm2020/testing/alert/alert-harness.mjs +0 -118
- package/esm2020/testing/alert-fixture.mjs +0 -72
- package/esm2020/testing/chevron/chevron-harness.mjs +0 -44
- package/esm2020/testing/help-inline/help-inline-harness.mjs +0 -31
- package/esm2020/testing/icon/icon-harness.mjs +0 -90
- package/esm2020/testing/key-info/key-info-harness.mjs +0 -49
- package/esm2020/testing/label/label-harness.mjs +0 -94
- package/esm2020/testing/label-fixture.mjs +0 -45
- package/esm2020/testing/tokens/token-harness.mjs +0 -69
- package/esm2020/testing/tokens/tokens-harness.mjs +0 -45
- package/esm2020/testing/wait/wait-harness.mjs +0 -66
- package/esm2020/testing/wait-fixture.mjs +0 -31
- package/fesm2015/skyux-indicators-testing.mjs +0 -854
- package/fesm2015/skyux-indicators-testing.mjs.map +0 -1
- package/fesm2015/skyux-indicators.mjs +0 -2172
- package/fesm2015/skyux-indicators.mjs.map +0 -1
- package/fesm2020/skyux-indicators.mjs.map +0 -1
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/icon/icon-stack-item.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/icon/types/icon-resolved.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/icon/types/icon-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/icon/types/icon-variant-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/key-info/key-info-layout-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/label/label-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/shared/indicator-description-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/shared/indicator-icon-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/shared/indicator-icon-utility.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/shared/indicator-icon.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/tokens/types/token-selected-event-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/tokens/types/token.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/tokens/types/tokens-message-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/tokens/types/tokens-message.mjs +0 -0
- /package/{esm2020 → esm2022}/skyux-indicators.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/alert/alert-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/help-inline/help-inline-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/icon/icon-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/key-info/key-info-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/label/label-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/skyux-indicators-testing.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/tokens/token-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/tokens/tokens-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/wait/wait-harness-filters.mjs +0 -0
|
@@ -1,2172 +0,0 @@
|
|
|
1
|
-
import * as i1 from '@angular/common';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
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';
|
|
5
|
-
import * as i5 from '@skyux/i18n';
|
|
6
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService } from '@skyux/i18n';
|
|
7
|
-
import * as i2 from '@skyux/theme';
|
|
8
|
-
import { SkyThemeIconManifestService, SkyThemeService, SkyThemeModule } from '@skyux/theme';
|
|
9
|
-
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
10
|
-
import * as i2$1 from '@skyux/core';
|
|
11
|
-
import { SkyLogService, SkyTrimModule, SkyMutationObserverService, SkyLiveAnnouncerService, SkyAppWindowRef, SkyDynamicComponentService, SkyDynamicComponentLocation } from '@skyux/core';
|
|
12
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
13
|
-
import { Subject, BehaviorSubject, defer } from 'rxjs';
|
|
14
|
-
import { takeUntil, take, finalize } from 'rxjs/operators';
|
|
15
|
-
|
|
16
|
-
var _SkyIconResolverService_glyphMap, _SkyIconResolverService_manifestSvc;
|
|
17
|
-
/**
|
|
18
|
-
* @internal
|
|
19
|
-
*/
|
|
20
|
-
class SkyIconResolverService {
|
|
21
|
-
constructor() {
|
|
22
|
-
_SkyIconResolverService_glyphMap.set(this, new Map());
|
|
23
|
-
_SkyIconResolverService_manifestSvc.set(this, inject(SkyThemeIconManifestService));
|
|
24
|
-
// Map the icons by name for more efficient lookup.
|
|
25
|
-
for (const glyph of __classPrivateFieldGet(this, _SkyIconResolverService_manifestSvc, "f").getManifest().glyphs) {
|
|
26
|
-
__classPrivateFieldGet(this, _SkyIconResolverService_glyphMap, "f").set(glyph.name, glyph);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
resolveIcon(icon, variant, iconType, themeSettings) {
|
|
30
|
-
var _a;
|
|
31
|
-
iconType || (iconType = 'fa');
|
|
32
|
-
if (iconType === 'skyux') {
|
|
33
|
-
if ((themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.theme.name) === 'modern') {
|
|
34
|
-
const variantIcon = variant && `${icon}-${variant}`;
|
|
35
|
-
if (variantIcon && __classPrivateFieldGet(this, _SkyIconResolverService_glyphMap, "f").has(variantIcon)) {
|
|
36
|
-
// A variant was specified and exists; use it.
|
|
37
|
-
icon = variantIcon;
|
|
38
|
-
}
|
|
39
|
-
else if (variant !== 'line' && !__classPrivateFieldGet(this, _SkyIconResolverService_glyphMap, "f").has(icon)) {
|
|
40
|
-
// Either the solid variant was specified and doesn't exist, or no variant was
|
|
41
|
-
// specified and a non-variant doesn't exist; fall back to the line variant.
|
|
42
|
-
const lineIcon = `${icon}-line`;
|
|
43
|
-
if (__classPrivateFieldGet(this, _SkyIconResolverService_glyphMap, "f").has(lineIcon)) {
|
|
44
|
-
icon = lineIcon;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
// Use the Font Awesome equivalent in default theme if one exists.
|
|
50
|
-
const faName = (_a = __classPrivateFieldGet(this, _SkyIconResolverService_glyphMap, "f").get(icon)) === null || _a === void 0 ? void 0 : _a.faName;
|
|
51
|
-
if (faName) {
|
|
52
|
-
icon = faName;
|
|
53
|
-
iconType = 'fa';
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
return {
|
|
58
|
-
icon,
|
|
59
|
-
iconType,
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
_SkyIconResolverService_glyphMap = new WeakMap(), _SkyIconResolverService_manifestSvc = new WeakMap();
|
|
64
|
-
SkyIconResolverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
65
|
-
SkyIconResolverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconResolverService, providedIn: 'root' });
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconResolverService, decorators: [{
|
|
67
|
-
type: Injectable,
|
|
68
|
-
args: [{
|
|
69
|
-
providedIn: 'root',
|
|
70
|
-
}]
|
|
71
|
-
}], ctorParameters: function () { return []; } });
|
|
72
|
-
|
|
73
|
-
var _SkyIconClassListPipe_resolver;
|
|
74
|
-
/**
|
|
75
|
-
* @internal
|
|
76
|
-
*/
|
|
77
|
-
class SkyIconClassListPipe {
|
|
78
|
-
constructor() {
|
|
79
|
-
_SkyIconClassListPipe_resolver.set(this, inject(SkyIconResolverService));
|
|
80
|
-
}
|
|
81
|
-
transform(icon, themeSettings, iconType, size, fixedWidth, variant) {
|
|
82
|
-
let classList;
|
|
83
|
-
const { icon: resolvedIcon, iconType: resolvedIconType } = __classPrivateFieldGet(this, _SkyIconClassListPipe_resolver, "f").resolveIcon(icon, variant, iconType, themeSettings);
|
|
84
|
-
if (resolvedIconType === 'skyux') {
|
|
85
|
-
classList = ['sky-i-' + resolvedIcon];
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
classList = ['fa', 'fa-' + resolvedIcon];
|
|
89
|
-
}
|
|
90
|
-
if (size) {
|
|
91
|
-
classList.push('fa-' + size);
|
|
92
|
-
}
|
|
93
|
-
if (fixedWidth) {
|
|
94
|
-
classList.push('fa-fw');
|
|
95
|
-
}
|
|
96
|
-
return classList;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
_SkyIconClassListPipe_resolver = new WeakMap();
|
|
100
|
-
SkyIconClassListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconClassListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
101
|
-
SkyIconClassListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyIconClassListPipe, name: "skyIconClassList" });
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconClassListPipe, decorators: [{
|
|
103
|
-
type: Pipe,
|
|
104
|
-
args: [{
|
|
105
|
-
name: 'skyIconClassList',
|
|
106
|
-
}]
|
|
107
|
-
}] });
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* @internal
|
|
111
|
-
*/
|
|
112
|
-
class SkyIconStackComponent {
|
|
113
|
-
constructor() {
|
|
114
|
-
this.themeSvc = inject(SkyThemeService, { optional: true });
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
SkyIconStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
-
SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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\n : (themeSvc?.settingsChange | async)?.currentSettings\n : baseIcon.iconType\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\n : (themeSvc?.settingsChange | async)?.currentSettings\n : topIcon.iconType\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" }] });
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconStackComponent, decorators: [{
|
|
120
|
-
type: Component,
|
|
121
|
-
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\n : (themeSvc?.settingsChange | async)?.currentSettings\n : baseIcon.iconType\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\n : (themeSvc?.settingsChange | async)?.currentSettings\n : topIcon.iconType\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"] }]
|
|
122
|
-
}], propDecorators: { size: [{
|
|
123
|
-
type: Input
|
|
124
|
-
}], baseIcon: [{
|
|
125
|
-
type: Input
|
|
126
|
-
}], topIcon: [{
|
|
127
|
-
type: Input
|
|
128
|
-
}] } });
|
|
129
|
-
|
|
130
|
-
class SkyIconComponent {
|
|
131
|
-
constructor() {
|
|
132
|
-
this.themeSvc = inject(SkyThemeService, { optional: true });
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
SkyIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
136
|
-
SkyIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 : iconType\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 });
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconComponent, decorators: [{
|
|
138
|
-
type: Component,
|
|
139
|
-
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 : iconType\n : size\n : fixedWidth\n : variant\n \"\n></i>\n", styles: [":host{display:inline-block}i{display:inherit}\n"] }]
|
|
140
|
-
}], propDecorators: { icon: [{
|
|
141
|
-
type: Input
|
|
142
|
-
}], iconType: [{
|
|
143
|
-
type: Input
|
|
144
|
-
}], size: [{
|
|
145
|
-
type: Input
|
|
146
|
-
}], fixedWidth: [{
|
|
147
|
-
type: Input
|
|
148
|
-
}], variant: [{
|
|
149
|
-
type: Input
|
|
150
|
-
}] } });
|
|
151
|
-
|
|
152
|
-
class SkyIconModule {
|
|
153
|
-
}
|
|
154
|
-
SkyIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
155
|
-
SkyIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyIconModule, declarations: [SkyIconClassListPipe, SkyIconComponent, SkyIconStackComponent], imports: [CommonModule], exports: [SkyIconComponent, SkyIconStackComponent] });
|
|
156
|
-
SkyIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconModule, imports: [CommonModule] });
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIconModule, decorators: [{
|
|
158
|
-
type: NgModule,
|
|
159
|
-
args: [{
|
|
160
|
-
declarations: [SkyIconClassListPipe, SkyIconComponent, SkyIconStackComponent],
|
|
161
|
-
imports: [CommonModule],
|
|
162
|
-
exports: [SkyIconComponent, SkyIconStackComponent],
|
|
163
|
-
}]
|
|
164
|
-
}] });
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
168
|
-
* The contents of this file were automatically generated by
|
|
169
|
-
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-indicators' schematic.
|
|
170
|
-
* To update this file, simply rerun the command.
|
|
171
|
-
*/
|
|
172
|
-
const RESOURCES = {
|
|
173
|
-
'EN-US': {
|
|
174
|
-
skyux_alert_close: { message: 'Close the alert' },
|
|
175
|
-
skyux_alert_sr_attention: { message: 'Attention:' },
|
|
176
|
-
skyux_alert_sr_caution: { message: 'Caution:' },
|
|
177
|
-
skyux_alert_sr_completed: { message: 'Completed:' },
|
|
178
|
-
skyux_alert_sr_danger: { message: 'Danger:' },
|
|
179
|
-
skyux_alert_sr_error: { message: 'Error:' },
|
|
180
|
-
skyux_alert_sr_important_info: { message: 'Important information:' },
|
|
181
|
-
skyux_alert_sr_important_warning: { message: 'Important warning:' },
|
|
182
|
-
skyux_alert_sr_success: { message: 'Success:' },
|
|
183
|
-
skyux_alert_sr_warning: { message: 'Warning:' },
|
|
184
|
-
skyux_help_inline_button_title: { message: 'Show help content' },
|
|
185
|
-
skyux_label_sr_attention: { message: 'Attention:' },
|
|
186
|
-
skyux_label_sr_caution: { message: 'Caution:' },
|
|
187
|
-
skyux_label_sr_completed: { message: 'Completed:' },
|
|
188
|
-
skyux_label_sr_danger: { message: 'Danger:' },
|
|
189
|
-
skyux_label_sr_error: { message: 'Error:' },
|
|
190
|
-
skyux_label_sr_important_info: { message: 'Important information:' },
|
|
191
|
-
skyux_label_sr_important_warning: { message: 'Important warning:' },
|
|
192
|
-
skyux_label_sr_success: { message: 'Success:' },
|
|
193
|
-
skyux_label_sr_warning: { message: 'Warning:' },
|
|
194
|
-
skyux_status_indicator_sr_attention: { message: 'Attention:' },
|
|
195
|
-
skyux_status_indicator_sr_caution: { message: 'Caution:' },
|
|
196
|
-
skyux_status_indicator_sr_completed: { message: 'Completed:' },
|
|
197
|
-
skyux_status_indicator_sr_danger: { message: 'Danger:' },
|
|
198
|
-
skyux_status_indicator_sr_error: { message: 'Error:' },
|
|
199
|
-
skyux_status_indicator_sr_important_info: {
|
|
200
|
-
message: 'Important information:',
|
|
201
|
-
},
|
|
202
|
-
skyux_status_indicator_sr_important_warning: {
|
|
203
|
-
message: 'Important warning:',
|
|
204
|
-
},
|
|
205
|
-
skyux_status_indicator_sr_success: { message: 'Success:' },
|
|
206
|
-
skyux_status_indicator_sr_warning: { message: 'Warning:' },
|
|
207
|
-
skyux_tokens_dismiss_button_title: { message: 'Remove item' },
|
|
208
|
-
skyux_wait_aria_alt_text: { message: 'Loading.' },
|
|
209
|
-
skyux_wait_blocking_aria_alt_text: { message: 'Loading. Please wait.' },
|
|
210
|
-
skyux_wait_page_aria_alt_text: { message: 'Page loading.' },
|
|
211
|
-
skyux_wait_page_blocking_aria_alt_text: {
|
|
212
|
-
message: 'Page loading. Please wait.',
|
|
213
|
-
},
|
|
214
|
-
skyux_wait_screen_reader_completed_text: { message: 'Loading complete.' },
|
|
215
|
-
skyux_wait_page_screen_reader_completed_text: {
|
|
216
|
-
message: 'Page loading complete.',
|
|
217
|
-
},
|
|
218
|
-
},
|
|
219
|
-
};
|
|
220
|
-
class SkyIndicatorsResourcesProvider {
|
|
221
|
-
getString(localeInfo, name) {
|
|
222
|
-
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
/**
|
|
226
|
-
* Import into any component library module that needs to use resource strings.
|
|
227
|
-
*/
|
|
228
|
-
class SkyIndicatorsResourcesModule {
|
|
229
|
-
}
|
|
230
|
-
SkyIndicatorsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIndicatorsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
231
|
-
SkyIndicatorsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyIndicatorsResourcesModule, exports: [SkyI18nModule] });
|
|
232
|
-
SkyIndicatorsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIndicatorsResourcesModule, providers: [
|
|
233
|
-
{
|
|
234
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
235
|
-
useClass: SkyIndicatorsResourcesProvider,
|
|
236
|
-
multi: true,
|
|
237
|
-
},
|
|
238
|
-
], imports: [SkyI18nModule] });
|
|
239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIndicatorsResourcesModule, decorators: [{
|
|
240
|
-
type: NgModule,
|
|
241
|
-
args: [{
|
|
242
|
-
exports: [SkyI18nModule],
|
|
243
|
-
providers: [
|
|
244
|
-
{
|
|
245
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
246
|
-
useClass: SkyIndicatorsResourcesProvider,
|
|
247
|
-
multi: true,
|
|
248
|
-
},
|
|
249
|
-
],
|
|
250
|
-
}]
|
|
251
|
-
}] });
|
|
252
|
-
|
|
253
|
-
/**
|
|
254
|
-
* @internal
|
|
255
|
-
*/
|
|
256
|
-
class SkyIndicatorIconUtility {
|
|
257
|
-
static getIconsForType(indicatorType) {
|
|
258
|
-
let icon;
|
|
259
|
-
let baseIcon;
|
|
260
|
-
let topIcon;
|
|
261
|
-
switch (indicatorType) {
|
|
262
|
-
case 'danger':
|
|
263
|
-
case 'warning':
|
|
264
|
-
icon = 'warning';
|
|
265
|
-
baseIcon = 'triangle-solid';
|
|
266
|
-
topIcon = 'exclamation';
|
|
267
|
-
break;
|
|
268
|
-
case 'info':
|
|
269
|
-
icon = 'exclamation-circle';
|
|
270
|
-
baseIcon = 'circle-solid';
|
|
271
|
-
topIcon = 'help-i';
|
|
272
|
-
break;
|
|
273
|
-
case 'success':
|
|
274
|
-
icon = 'check';
|
|
275
|
-
baseIcon = 'circle-solid';
|
|
276
|
-
topIcon = 'check';
|
|
277
|
-
break;
|
|
278
|
-
}
|
|
279
|
-
return {
|
|
280
|
-
defaultThemeIcon: icon,
|
|
281
|
-
modernThemeBaseIcon: {
|
|
282
|
-
icon: baseIcon,
|
|
283
|
-
iconType: 'skyux',
|
|
284
|
-
},
|
|
285
|
-
modernThemeTopIcon: {
|
|
286
|
-
icon: topIcon,
|
|
287
|
-
iconType: 'skyux',
|
|
288
|
-
},
|
|
289
|
-
};
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
var _SkyAlertComponent_instances, _SkyAlertComponent__descriptionType, _SkyAlertComponent__customDescription, _SkyAlertComponent_descriptionTypeResourceSubscription, _SkyAlertComponent_descriptionTypeWarned, _SkyAlertComponent_resources, _SkyAlertComponent_logSvc, _SkyAlertComponent_updateAlertIcon, _SkyAlertComponent_updateDescriptionComputed, _SkyAlertComponent_unsubscribe;
|
|
294
|
-
const ALERT_TYPE_DEFAULT = 'warning';
|
|
295
|
-
class SkyAlertComponent {
|
|
296
|
-
constructor() {
|
|
297
|
-
_SkyAlertComponent_instances.add(this);
|
|
298
|
-
/**
|
|
299
|
-
* Fires when users close the alert.
|
|
300
|
-
*/
|
|
301
|
-
this.closedChange = new EventEmitter();
|
|
302
|
-
this.alertTypeOrDefault = ALERT_TYPE_DEFAULT;
|
|
303
|
-
_SkyAlertComponent__descriptionType.set(this, void 0);
|
|
304
|
-
_SkyAlertComponent__customDescription.set(this, void 0);
|
|
305
|
-
_SkyAlertComponent_descriptionTypeResourceSubscription.set(this, void 0);
|
|
306
|
-
_SkyAlertComponent_descriptionTypeWarned.set(this, void 0);
|
|
307
|
-
_SkyAlertComponent_resources.set(this, inject(SkyLibResourcesService));
|
|
308
|
-
_SkyAlertComponent_logSvc.set(this, inject(SkyLogService));
|
|
309
|
-
}
|
|
310
|
-
/**
|
|
311
|
-
* The style for the alert, which determines the icon and background color.
|
|
312
|
-
* The valid options are `danger`, `info`, `success`, and `warning`.
|
|
313
|
-
* @default "warning"
|
|
314
|
-
*/
|
|
315
|
-
set alertType(value) {
|
|
316
|
-
if (value !== this.alertTypeOrDefault) {
|
|
317
|
-
this.alertTypeOrDefault = value || ALERT_TYPE_DEFAULT;
|
|
318
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_instances, "m", _SkyAlertComponent_updateAlertIcon).call(this);
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
/**
|
|
322
|
-
* The predefined text to be read by screen readers for users who cannot see the alert icon.
|
|
323
|
-
* This property is optional but will be required in future versions of SKY UX.
|
|
324
|
-
*/
|
|
325
|
-
set descriptionType(value) {
|
|
326
|
-
__classPrivateFieldSet(this, _SkyAlertComponent__descriptionType, value, "f");
|
|
327
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_instances, "m", _SkyAlertComponent_updateDescriptionComputed).call(this);
|
|
328
|
-
}
|
|
329
|
-
get descriptionType() {
|
|
330
|
-
return __classPrivateFieldGet(this, _SkyAlertComponent__descriptionType, "f");
|
|
331
|
-
}
|
|
332
|
-
/**
|
|
333
|
-
* The text to be read by screen readers for users who cannot see
|
|
334
|
-
* the indicator icon when `descriptionType` is `custom`.
|
|
335
|
-
*/
|
|
336
|
-
set customDescription(value) {
|
|
337
|
-
__classPrivateFieldSet(this, _SkyAlertComponent__customDescription, value, "f");
|
|
338
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_instances, "m", _SkyAlertComponent_updateDescriptionComputed).call(this);
|
|
339
|
-
}
|
|
340
|
-
get customDescription() {
|
|
341
|
-
return __classPrivateFieldGet(this, _SkyAlertComponent__customDescription, "f");
|
|
342
|
-
}
|
|
343
|
-
ngOnInit() {
|
|
344
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_instances, "m", _SkyAlertComponent_updateAlertIcon).call(this);
|
|
345
|
-
}
|
|
346
|
-
ngAfterViewChecked() {
|
|
347
|
-
if (!this.descriptionType && !__classPrivateFieldGet(this, _SkyAlertComponent_descriptionTypeWarned, "f")) {
|
|
348
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_logSvc, "f").deprecated('SkyAlertComponent without `descriptionType`', {
|
|
349
|
-
deprecationMajorVersion: 8,
|
|
350
|
-
replacementRecommendation: 'Always specify a `descriptionType` property.',
|
|
351
|
-
});
|
|
352
|
-
__classPrivateFieldSet(this, _SkyAlertComponent_descriptionTypeWarned, true, "f");
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
ngOnDestroy() {
|
|
356
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_instances, "m", _SkyAlertComponent_unsubscribe).call(this);
|
|
357
|
-
}
|
|
358
|
-
close() {
|
|
359
|
-
this.closed = true;
|
|
360
|
-
this.closedChange.emit(true);
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
_SkyAlertComponent__descriptionType = new WeakMap(), _SkyAlertComponent__customDescription = new WeakMap(), _SkyAlertComponent_descriptionTypeResourceSubscription = new WeakMap(), _SkyAlertComponent_descriptionTypeWarned = new WeakMap(), _SkyAlertComponent_resources = new WeakMap(), _SkyAlertComponent_logSvc = new WeakMap(), _SkyAlertComponent_instances = new WeakSet(), _SkyAlertComponent_updateAlertIcon = function _SkyAlertComponent_updateAlertIcon() {
|
|
364
|
-
const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.alertTypeOrDefault);
|
|
365
|
-
this.alertBaseIcon = indicatorIcon.modernThemeBaseIcon;
|
|
366
|
-
this.alertTopIcon = indicatorIcon.modernThemeTopIcon;
|
|
367
|
-
}, _SkyAlertComponent_updateDescriptionComputed = function _SkyAlertComponent_updateDescriptionComputed() {
|
|
368
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_instances, "m", _SkyAlertComponent_unsubscribe).call(this);
|
|
369
|
-
if (this.descriptionType) {
|
|
370
|
-
switch (this.descriptionType) {
|
|
371
|
-
case 'none':
|
|
372
|
-
this.descriptionComputed = undefined;
|
|
373
|
-
break;
|
|
374
|
-
case 'custom':
|
|
375
|
-
this.descriptionComputed = this.customDescription;
|
|
376
|
-
break;
|
|
377
|
-
default:
|
|
378
|
-
__classPrivateFieldSet(this, _SkyAlertComponent_descriptionTypeResourceSubscription, __classPrivateFieldGet(this, _SkyAlertComponent_resources, "f")
|
|
379
|
-
.getString('skyux_alert_sr_' + this.descriptionType.replace(/-/g, '_'))
|
|
380
|
-
.subscribe((value) => {
|
|
381
|
-
this.descriptionComputed = value;
|
|
382
|
-
}), "f");
|
|
383
|
-
break;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
else {
|
|
387
|
-
this.descriptionComputed = undefined;
|
|
388
|
-
}
|
|
389
|
-
}, _SkyAlertComponent_unsubscribe = function _SkyAlertComponent_unsubscribe() {
|
|
390
|
-
if (__classPrivateFieldGet(this, _SkyAlertComponent_descriptionTypeResourceSubscription, "f")) {
|
|
391
|
-
__classPrivateFieldGet(this, _SkyAlertComponent_descriptionTypeResourceSubscription, "f").unsubscribe();
|
|
392
|
-
__classPrivateFieldSet(this, _SkyAlertComponent_descriptionTypeResourceSubscription, undefined, "f");
|
|
393
|
-
}
|
|
394
|
-
};
|
|
395
|
-
SkyAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
-
SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n </sky-icon>\n <sky-icon\n class=\"sky-alert-close-icon-theme-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </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-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--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-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--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-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--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-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-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" }] });
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAlertComponent, decorators: [{
|
|
398
|
-
type: Component,
|
|
399
|
-
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 class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n </sky-icon>\n <sky-icon\n class=\"sky-alert-close-icon-theme-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </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-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--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-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--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-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--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-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-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"] }]
|
|
400
|
-
}], propDecorators: { alertType: [{
|
|
401
|
-
type: Input
|
|
402
|
-
}], closeable: [{
|
|
403
|
-
type: Input
|
|
404
|
-
}], closed: [{
|
|
405
|
-
type: Input
|
|
406
|
-
}], descriptionType: [{
|
|
407
|
-
type: Input
|
|
408
|
-
}], customDescription: [{
|
|
409
|
-
type: Input
|
|
410
|
-
}], closedChange: [{
|
|
411
|
-
type: Output
|
|
412
|
-
}] } });
|
|
413
|
-
|
|
414
|
-
class SkyAlertModule {
|
|
415
|
-
}
|
|
416
|
-
SkyAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
417
|
-
SkyAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAlertModule, declarations: [SkyAlertComponent], imports: [CommonModule,
|
|
418
|
-
SkyI18nModule,
|
|
419
|
-
SkyIconModule,
|
|
420
|
-
SkyIndicatorsResourcesModule,
|
|
421
|
-
SkyThemeModule], exports: [SkyAlertComponent] });
|
|
422
|
-
SkyAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAlertModule, imports: [CommonModule,
|
|
423
|
-
SkyI18nModule,
|
|
424
|
-
SkyIconModule,
|
|
425
|
-
SkyIndicatorsResourcesModule,
|
|
426
|
-
SkyThemeModule] });
|
|
427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAlertModule, decorators: [{
|
|
428
|
-
type: NgModule,
|
|
429
|
-
args: [{
|
|
430
|
-
declarations: [SkyAlertComponent],
|
|
431
|
-
imports: [
|
|
432
|
-
CommonModule,
|
|
433
|
-
SkyI18nModule,
|
|
434
|
-
SkyIconModule,
|
|
435
|
-
SkyIndicatorsResourcesModule,
|
|
436
|
-
SkyThemeModule,
|
|
437
|
-
],
|
|
438
|
-
exports: [SkyAlertComponent],
|
|
439
|
-
}]
|
|
440
|
-
}] });
|
|
441
|
-
|
|
442
|
-
/**
|
|
443
|
-
* Displays a chevron icon.
|
|
444
|
-
* @internal
|
|
445
|
-
*/
|
|
446
|
-
class SkyExpansionIndicatorComponent {
|
|
447
|
-
constructor() {
|
|
448
|
-
this.directionOrDefault = 'up';
|
|
449
|
-
}
|
|
450
|
-
/**
|
|
451
|
-
* The direction that the chevron points, which can be up or down.
|
|
452
|
-
*/
|
|
453
|
-
set direction(value) {
|
|
454
|
-
/* istanbul ignore else */
|
|
455
|
-
if (value !== this.directionOrDefault) {
|
|
456
|
-
this.directionOrDefault = value ? value : 'up';
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
SkyExpansionIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyExpansionIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
461
|
-
SkyExpansionIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: { direction: "direction" }, ngImport: i0, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"sky-expansion-indicator-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </span>\n </ng-container>\n</div>\n\n<ng-template #icon>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part{border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator{height:26px;width:26px}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{left:10.5px}.sky-theme-modern .sky-expansion-indicator{height:26px;width:26px}.sky-theme-modern .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}.sky-theme-modern .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}.sky-theme-modern .sky-expansion-indicator-left{border-radius:1px 0 0 1px}.sky-theme-modern .sky-expansion-indicator-right{border-radius:0 1px 1px 0}.sky-theme-modern .sky-expansion-indicator-left{left:4px}.sky-theme-modern .sky-expansion-indicator-right{left:10.5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }] });
|
|
462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyExpansionIndicatorComponent, decorators: [{
|
|
463
|
-
type: Component,
|
|
464
|
-
args: [{ selector: 'sky-expansion-indicator', template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"sky-expansion-indicator-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </span>\n </ng-container>\n</div>\n\n<ng-template #icon>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part{border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator{height:26px;width:26px}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{left:10.5px}.sky-theme-modern .sky-expansion-indicator{height:26px;width:26px}.sky-theme-modern .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}.sky-theme-modern .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}.sky-theme-modern .sky-expansion-indicator-left{border-radius:1px 0 0 1px}.sky-theme-modern .sky-expansion-indicator-right{border-radius:0 1px 1px 0}.sky-theme-modern .sky-expansion-indicator-left{left:4px}.sky-theme-modern .sky-expansion-indicator-right{left:10.5px}\n"] }]
|
|
465
|
-
}], propDecorators: { direction: [{
|
|
466
|
-
type: Input
|
|
467
|
-
}] } });
|
|
468
|
-
|
|
469
|
-
class SkyExpansionIndicatorModule {
|
|
470
|
-
}
|
|
471
|
-
SkyExpansionIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyExpansionIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
472
|
-
SkyExpansionIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyExpansionIndicatorModule, declarations: [SkyExpansionIndicatorComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyExpansionIndicatorComponent] });
|
|
473
|
-
SkyExpansionIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyExpansionIndicatorModule, imports: [CommonModule, SkyThemeModule] });
|
|
474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyExpansionIndicatorModule, decorators: [{
|
|
475
|
-
type: NgModule,
|
|
476
|
-
args: [{
|
|
477
|
-
declarations: [SkyExpansionIndicatorComponent],
|
|
478
|
-
imports: [CommonModule, SkyThemeModule],
|
|
479
|
-
exports: [SkyExpansionIndicatorComponent],
|
|
480
|
-
}]
|
|
481
|
-
}] });
|
|
482
|
-
|
|
483
|
-
/**
|
|
484
|
-
* Creates an accessible button that wraps the chevron icon.
|
|
485
|
-
* @internal
|
|
486
|
-
*/
|
|
487
|
-
class SkyChevronComponent {
|
|
488
|
-
constructor() {
|
|
489
|
-
/**
|
|
490
|
-
* Whether to disable the chevron button.
|
|
491
|
-
*/
|
|
492
|
-
this.disabled = false;
|
|
493
|
-
/**
|
|
494
|
-
* Fires when the direction of the chevron changes.
|
|
495
|
-
*/
|
|
496
|
-
this.directionChange = new EventEmitter();
|
|
497
|
-
this.ariaExpanded = true;
|
|
498
|
-
this.directionOrDefault = 'up';
|
|
499
|
-
}
|
|
500
|
-
/**
|
|
501
|
-
* The direction that the chevron points, which can be up or down.
|
|
502
|
-
*/
|
|
503
|
-
set direction(value) {
|
|
504
|
-
/* istanbul ignore else */
|
|
505
|
-
if (value !== this.directionOrDefault) {
|
|
506
|
-
this.directionOrDefault = value ? value : 'up';
|
|
507
|
-
/* istanbul ignore else */
|
|
508
|
-
if (this.directionOrDefault === 'up') {
|
|
509
|
-
this.ariaExpanded = true;
|
|
510
|
-
}
|
|
511
|
-
else if (this.directionOrDefault === 'down') {
|
|
512
|
-
this.ariaExpanded = false;
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
}
|
|
516
|
-
chevronClick(event) {
|
|
517
|
-
event.stopPropagation();
|
|
518
|
-
this.direction = this.directionOrDefault === 'up' ? 'down' : 'up';
|
|
519
|
-
this.directionChange.emit(this.directionOrDefault);
|
|
520
|
-
}
|
|
521
|
-
chevronKeyDown(event) {
|
|
522
|
-
/* istanbul ignore else */
|
|
523
|
-
if (event.key) {
|
|
524
|
-
switch (event.key.toLowerCase()) {
|
|
525
|
-
case ' ':
|
|
526
|
-
case 'enter':
|
|
527
|
-
this.direction = this.directionOrDefault === 'up' ? 'down' : 'up';
|
|
528
|
-
this.directionChange.emit(this.directionOrDefault);
|
|
529
|
-
event.preventDefault();
|
|
530
|
-
event.stopPropagation();
|
|
531
|
-
break;
|
|
532
|
-
default:
|
|
533
|
-
break;
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
SkyChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
539
|
-
SkyChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyChevronComponent, selector: "sky-chevron", inputs: { ariaControls: "ariaControls", ariaLabel: "ariaLabel", direction: "direction", disabled: "disabled" }, outputs: { directionChange: "directionChange" }, ngImport: i0, template: "<button\n class=\"sky-chevron\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"chevronClick($event)\"\n (keydown)=\"chevronKeyDown($event)\"\n>\n <sky-expansion-indicator\n [direction]=\"directionOrDefault\"\n ></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: ["direction"] }] });
|
|
540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyChevronComponent, decorators: [{
|
|
541
|
-
type: Component,
|
|
542
|
-
args: [{ selector: 'sky-chevron', template: "<button\n class=\"sky-chevron\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"chevronClick($event)\"\n (keydown)=\"chevronKeyDown($event)\"\n>\n <sky-expansion-indicator\n [direction]=\"directionOrDefault\"\n ></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"] }]
|
|
543
|
-
}], propDecorators: { ariaControls: [{
|
|
544
|
-
type: Input
|
|
545
|
-
}], ariaLabel: [{
|
|
546
|
-
type: Input
|
|
547
|
-
}], direction: [{
|
|
548
|
-
type: Input
|
|
549
|
-
}], disabled: [{
|
|
550
|
-
type: Input
|
|
551
|
-
}], directionChange: [{
|
|
552
|
-
type: Output
|
|
553
|
-
}] } });
|
|
554
|
-
|
|
555
|
-
class SkyChevronModule {
|
|
556
|
-
}
|
|
557
|
-
SkyChevronModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyChevronModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
558
|
-
SkyChevronModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyChevronModule, declarations: [SkyChevronComponent], imports: [CommonModule,
|
|
559
|
-
SkyI18nModule,
|
|
560
|
-
SkyIndicatorsResourcesModule,
|
|
561
|
-
SkyThemeModule,
|
|
562
|
-
SkyExpansionIndicatorModule], exports: [SkyChevronComponent] });
|
|
563
|
-
SkyChevronModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyChevronModule, imports: [CommonModule,
|
|
564
|
-
SkyI18nModule,
|
|
565
|
-
SkyIndicatorsResourcesModule,
|
|
566
|
-
SkyThemeModule,
|
|
567
|
-
SkyExpansionIndicatorModule] });
|
|
568
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyChevronModule, decorators: [{
|
|
569
|
-
type: NgModule,
|
|
570
|
-
args: [{
|
|
571
|
-
declarations: [SkyChevronComponent],
|
|
572
|
-
imports: [
|
|
573
|
-
CommonModule,
|
|
574
|
-
SkyI18nModule,
|
|
575
|
-
SkyIndicatorsResourcesModule,
|
|
576
|
-
SkyThemeModule,
|
|
577
|
-
SkyExpansionIndicatorModule,
|
|
578
|
-
],
|
|
579
|
-
exports: [SkyChevronComponent],
|
|
580
|
-
}]
|
|
581
|
-
}] });
|
|
582
|
-
|
|
583
|
-
class SkyHelpInlineAriaExpandedPipe {
|
|
584
|
-
transform(ariaExpanded, ariaControls) {
|
|
585
|
-
return ariaControls ? !!ariaExpanded : null;
|
|
586
|
-
}
|
|
587
|
-
}
|
|
588
|
-
SkyHelpInlineAriaExpandedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineAriaExpandedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
589
|
-
SkyHelpInlineAriaExpandedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineAriaExpandedPipe, name: "skyHelpInlineAriaExpanded" });
|
|
590
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineAriaExpandedPipe, decorators: [{
|
|
591
|
-
type: Pipe,
|
|
592
|
-
args: [{
|
|
593
|
-
name: 'skyHelpInlineAriaExpanded',
|
|
594
|
-
}]
|
|
595
|
-
}] });
|
|
596
|
-
|
|
597
|
-
class SkyHelpInlineComponent {
|
|
598
|
-
constructor() {
|
|
599
|
-
/**
|
|
600
|
-
* Fires when the user clicks the help inline button.
|
|
601
|
-
*/
|
|
602
|
-
this.actionClick = new EventEmitter();
|
|
603
|
-
}
|
|
604
|
-
onClick() {
|
|
605
|
-
this.actionClick.emit();
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
SkyHelpInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
609
|
-
SkyHelpInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyHelpInlineComponent, selector: "sky-help-inline", inputs: { ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", ariaLabel: "ariaLabel" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<button\n class=\"sky-help-inline\"\n type=\"button\"\n [attr.aria-label]=\"\n ariaLabel || 'skyux_help_inline_button_title' | skyLibResources\n \"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded | skyHelpInlineAriaExpanded : ariaControls\"\n (click)=\"onClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"info-circle\"> </sky-icon>\n <sky-icon-stack\n *skyThemeIf=\"'modern'\"\n size=\"xs\"\n [baseIcon]=\"{\n icon: 'circle-solid',\n iconType: 'skyux'\n }\"\n [topIcon]=\"{\n icon: 'help-i',\n iconType: 'skyux'\n }\"\n >\n </sky-icon-stack>\n</button>\n", styles: [".sky-help-inline{color:#0974a1;font-size:15px;background-color:transparent;border:none;display:inline-block}.sky-help-inline:hover{color:#065171;transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline{border-radius:3px;border:none;box-shadow:inset 0 0 0 1px transparent;background-color:transparent;color:#1870b8;padding:1px 6px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;text-decoration:none}:host-context(.sky-theme-modern) .sky-help-inline:hover,:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{color:#1870b8}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8;background-image:none}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible{outline:none}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-theme-modern .sky-help-inline{border-radius:3px;border:none;box-shadow:inset 0 0 0 1px transparent;background-color:transparent;color:#1870b8;padding:1px 6px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}.sky-theme-modern .sky-help-inline:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;text-decoration:none}.sky-theme-modern .sky-help-inline:hover,.sky-theme-modern .sky-help-inline:active,.sky-theme-modern .sky-help-inline.sky-btn-active{color:#1870b8}.sky-theme-modern .sky-help-inline:active,.sky-theme-modern .sky-help-inline.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8;background-image:none}.sky-theme-modern .sky-help-inline.sky-btn-disabled,.sky-theme-modern .sky-help-inline.sky-btn-disabled:hover,.sky-theme-modern .sky-help-inline.sky-btn-disabled:focus-visible,.sky-theme-modern .sky-help-inline.sky-btn-disabled.sky-btn-focus,.sky-theme-modern .sky-help-inline.sky-btn-disabled:active,.sky-theme-modern .sky-help-inline.sky-btn-disabled.sky-btn-active,.sky-theme-modern .sky-help-inline[disabled],.sky-theme-modern .sky-help-inline[disabled]:hover,.sky-theme-modern .sky-help-inline[disabled]:focus-visible,.sky-theme-modern .sky-help-inline[disabled].sky-btn-focus,.sky-theme-modern .sky-help-inline[disabled]:active,.sky-theme-modern .sky-help-inline[disabled].sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern .sky-help-inline:focus-visible{outline:none}.sky-theme-modern .sky-help-inline:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ 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.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyHelpInlineAriaExpandedPipe, name: "skyHelpInlineAriaExpanded" }] });
|
|
610
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineComponent, decorators: [{
|
|
611
|
-
type: Component,
|
|
612
|
-
args: [{ selector: 'sky-help-inline', template: "<button\n class=\"sky-help-inline\"\n type=\"button\"\n [attr.aria-label]=\"\n ariaLabel || 'skyux_help_inline_button_title' | skyLibResources\n \"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaExpanded | skyHelpInlineAriaExpanded : ariaControls\"\n (click)=\"onClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"info-circle\"> </sky-icon>\n <sky-icon-stack\n *skyThemeIf=\"'modern'\"\n size=\"xs\"\n [baseIcon]=\"{\n icon: 'circle-solid',\n iconType: 'skyux'\n }\"\n [topIcon]=\"{\n icon: 'help-i',\n iconType: 'skyux'\n }\"\n >\n </sky-icon-stack>\n</button>\n", styles: [".sky-help-inline{color:#0974a1;font-size:15px;background-color:transparent;border:none;display:inline-block}.sky-help-inline:hover{color:#065171;transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline{border-radius:3px;border:none;box-shadow:inset 0 0 0 1px transparent;background-color:transparent;color:#1870b8;padding:1px 6px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;text-decoration:none}:host-context(.sky-theme-modern) .sky-help-inline:hover,:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{color:#1870b8}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8;background-image:none}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible{outline:none}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-theme-modern .sky-help-inline{border-radius:3px;border:none;box-shadow:inset 0 0 0 1px transparent;background-color:transparent;color:#1870b8;padding:1px 6px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}.sky-theme-modern .sky-help-inline:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;text-decoration:none}.sky-theme-modern .sky-help-inline:hover,.sky-theme-modern .sky-help-inline:active,.sky-theme-modern .sky-help-inline.sky-btn-active{color:#1870b8}.sky-theme-modern .sky-help-inline:active,.sky-theme-modern .sky-help-inline.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8;background-image:none}.sky-theme-modern .sky-help-inline.sky-btn-disabled,.sky-theme-modern .sky-help-inline.sky-btn-disabled:hover,.sky-theme-modern .sky-help-inline.sky-btn-disabled:focus-visible,.sky-theme-modern .sky-help-inline.sky-btn-disabled.sky-btn-focus,.sky-theme-modern .sky-help-inline.sky-btn-disabled:active,.sky-theme-modern .sky-help-inline.sky-btn-disabled.sky-btn-active,.sky-theme-modern .sky-help-inline[disabled],.sky-theme-modern .sky-help-inline[disabled]:hover,.sky-theme-modern .sky-help-inline[disabled]:focus-visible,.sky-theme-modern .sky-help-inline[disabled].sky-btn-focus,.sky-theme-modern .sky-help-inline[disabled]:active,.sky-theme-modern .sky-help-inline[disabled].sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern .sky-help-inline:focus-visible{outline:none}.sky-theme-modern .sky-help-inline:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
|
|
613
|
-
}], propDecorators: { ariaControls: [{
|
|
614
|
-
type: Input
|
|
615
|
-
}], ariaExpanded: [{
|
|
616
|
-
type: Input
|
|
617
|
-
}], ariaLabel: [{
|
|
618
|
-
type: Input
|
|
619
|
-
}], actionClick: [{
|
|
620
|
-
type: Output
|
|
621
|
-
}] } });
|
|
622
|
-
|
|
623
|
-
class SkyHelpInlineModule {
|
|
624
|
-
}
|
|
625
|
-
SkyHelpInlineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
626
|
-
SkyHelpInlineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineModule, declarations: [SkyHelpInlineComponent, SkyHelpInlineAriaExpandedPipe], imports: [CommonModule,
|
|
627
|
-
SkyI18nModule,
|
|
628
|
-
SkyIconModule,
|
|
629
|
-
SkyIndicatorsResourcesModule,
|
|
630
|
-
SkyThemeModule], exports: [SkyHelpInlineComponent] });
|
|
631
|
-
SkyHelpInlineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineModule, imports: [CommonModule,
|
|
632
|
-
SkyI18nModule,
|
|
633
|
-
SkyIconModule,
|
|
634
|
-
SkyIndicatorsResourcesModule,
|
|
635
|
-
SkyThemeModule] });
|
|
636
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyHelpInlineModule, decorators: [{
|
|
637
|
-
type: NgModule,
|
|
638
|
-
args: [{
|
|
639
|
-
declarations: [SkyHelpInlineComponent, SkyHelpInlineAriaExpandedPipe],
|
|
640
|
-
imports: [
|
|
641
|
-
CommonModule,
|
|
642
|
-
SkyI18nModule,
|
|
643
|
-
SkyIconModule,
|
|
644
|
-
SkyIndicatorsResourcesModule,
|
|
645
|
-
SkyThemeModule,
|
|
646
|
-
],
|
|
647
|
-
exports: [SkyHelpInlineComponent],
|
|
648
|
-
}]
|
|
649
|
-
}] });
|
|
650
|
-
|
|
651
|
-
/**
|
|
652
|
-
* Specifies a label to display in smaller text under or beside the value.
|
|
653
|
-
* To display a help button beside the label, include a help button element, such as `sky-help-inline`,
|
|
654
|
-
* in the `sky-key-info` element and a `sky-control-help` CSS class on that help button element.
|
|
655
|
-
* @required
|
|
656
|
-
*/
|
|
657
|
-
class SkyKeyInfoLabelComponent {
|
|
658
|
-
}
|
|
659
|
-
SkyKeyInfoLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
660
|
-
SkyKeyInfoLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyKeyInfoLabelComponent, selector: "sky-key-info-label", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
661
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoLabelComponent, decorators: [{
|
|
662
|
-
type: Component,
|
|
663
|
-
args: [{
|
|
664
|
-
selector: 'sky-key-info-label',
|
|
665
|
-
template: '<ng-content></ng-content>',
|
|
666
|
-
}]
|
|
667
|
-
}] });
|
|
668
|
-
|
|
669
|
-
/**
|
|
670
|
-
* Specifies a value to display in larger, bold text.
|
|
671
|
-
* @required
|
|
672
|
-
*/
|
|
673
|
-
class SkyKeyInfoValueComponent {
|
|
674
|
-
}
|
|
675
|
-
SkyKeyInfoValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
676
|
-
SkyKeyInfoValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyKeyInfoValueComponent, selector: "sky-key-info-value", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
677
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoValueComponent, decorators: [{
|
|
678
|
-
type: Component,
|
|
679
|
-
args: [{
|
|
680
|
-
selector: 'sky-key-info-value',
|
|
681
|
-
template: '<ng-content></ng-content>',
|
|
682
|
-
}]
|
|
683
|
-
}] });
|
|
684
|
-
|
|
685
|
-
class SkyKeyInfoComponent {
|
|
686
|
-
constructor() {
|
|
687
|
-
/**
|
|
688
|
-
* The layout for the key info. The vertical layout places the label under the
|
|
689
|
-
* value, while the horizontal layout places the label beside the value.
|
|
690
|
-
* @default "vertical"
|
|
691
|
-
*/
|
|
692
|
-
this.layout = 'vertical';
|
|
693
|
-
}
|
|
694
|
-
}
|
|
695
|
-
SkyKeyInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
696
|
-
SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { layout: "layout" }, ngImport: i0, template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\"> </ng-content>\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.λ4, selector: "[skyTrim]" }] });
|
|
697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
|
|
698
|
-
type: Component,
|
|
699
|
-
args: [{ selector: 'sky-key-info', template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\"> </ng-content>\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"] }]
|
|
700
|
-
}], propDecorators: { layout: [{
|
|
701
|
-
type: Input
|
|
702
|
-
}] } });
|
|
703
|
-
|
|
704
|
-
class SkyKeyInfoModule {
|
|
705
|
-
}
|
|
706
|
-
SkyKeyInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
707
|
-
SkyKeyInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoModule, declarations: [SkyKeyInfoComponent,
|
|
708
|
-
SkyKeyInfoLabelComponent,
|
|
709
|
-
SkyKeyInfoValueComponent], imports: [CommonModule, SkyTrimModule], exports: [SkyKeyInfoComponent,
|
|
710
|
-
SkyKeyInfoLabelComponent,
|
|
711
|
-
SkyKeyInfoValueComponent] });
|
|
712
|
-
SkyKeyInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoModule, imports: [CommonModule, SkyTrimModule] });
|
|
713
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyKeyInfoModule, decorators: [{
|
|
714
|
-
type: NgModule,
|
|
715
|
-
args: [{
|
|
716
|
-
declarations: [
|
|
717
|
-
SkyKeyInfoComponent,
|
|
718
|
-
SkyKeyInfoLabelComponent,
|
|
719
|
-
SkyKeyInfoValueComponent,
|
|
720
|
-
],
|
|
721
|
-
imports: [CommonModule, SkyTrimModule],
|
|
722
|
-
exports: [
|
|
723
|
-
SkyKeyInfoComponent,
|
|
724
|
-
SkyKeyInfoLabelComponent,
|
|
725
|
-
SkyKeyInfoValueComponent,
|
|
726
|
-
],
|
|
727
|
-
}]
|
|
728
|
-
}] });
|
|
729
|
-
|
|
730
|
-
var _SkyLabelComponent_instances, _SkyLabelComponent__descriptionType, _SkyLabelComponent__customDescription, _SkyLabelComponent_descriptionTypeResourceSubscription, _SkyLabelComponent_descriptionTypeWarned, _SkyLabelComponent_changeDetector, _SkyLabelComponent_resources, _SkyLabelComponent_logSvc, _SkyLabelComponent_updateIcon, _SkyLabelComponent_updateDescriptionComputed, _SkyLabelComponent_unsubscribe;
|
|
731
|
-
const LABEL_TYPE_DEFAULT = 'info';
|
|
732
|
-
class SkyLabelComponent {
|
|
733
|
-
constructor() {
|
|
734
|
-
_SkyLabelComponent_instances.add(this);
|
|
735
|
-
this.labelTypeOrDefault = LABEL_TYPE_DEFAULT;
|
|
736
|
-
_SkyLabelComponent__descriptionType.set(this, void 0);
|
|
737
|
-
_SkyLabelComponent__customDescription.set(this, void 0);
|
|
738
|
-
_SkyLabelComponent_descriptionTypeResourceSubscription.set(this, void 0);
|
|
739
|
-
_SkyLabelComponent_descriptionTypeWarned.set(this, void 0);
|
|
740
|
-
_SkyLabelComponent_changeDetector.set(this, inject(ChangeDetectorRef));
|
|
741
|
-
_SkyLabelComponent_resources.set(this, inject(SkyLibResourcesService));
|
|
742
|
-
_SkyLabelComponent_logSvc.set(this, inject(SkyLogService));
|
|
743
|
-
}
|
|
744
|
-
/**
|
|
745
|
-
* The type of label to display.
|
|
746
|
-
* @default 'info'
|
|
747
|
-
*/
|
|
748
|
-
set labelType(value) {
|
|
749
|
-
this.labelTypeOrDefault = value === undefined ? LABEL_TYPE_DEFAULT : value;
|
|
750
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_instances, "m", _SkyLabelComponent_updateIcon).call(this);
|
|
751
|
-
}
|
|
752
|
-
/**
|
|
753
|
-
* The predefined text to be read by screen readers for users who cannot see the indicator icon.
|
|
754
|
-
* This property is optional but will be required in future versions of SKY UX.
|
|
755
|
-
*/
|
|
756
|
-
set descriptionType(value) {
|
|
757
|
-
__classPrivateFieldSet(this, _SkyLabelComponent__descriptionType, value, "f");
|
|
758
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_instances, "m", _SkyLabelComponent_updateDescriptionComputed).call(this);
|
|
759
|
-
}
|
|
760
|
-
get descriptionType() {
|
|
761
|
-
return __classPrivateFieldGet(this, _SkyLabelComponent__descriptionType, "f");
|
|
762
|
-
}
|
|
763
|
-
/**
|
|
764
|
-
* The text to be read by screen readers for users who cannot see
|
|
765
|
-
* the indicator icon when `descriptionType` is `custom`.
|
|
766
|
-
*/
|
|
767
|
-
set customDescription(value) {
|
|
768
|
-
__classPrivateFieldSet(this, _SkyLabelComponent__customDescription, value, "f");
|
|
769
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_instances, "m", _SkyLabelComponent_updateDescriptionComputed).call(this);
|
|
770
|
-
}
|
|
771
|
-
get customDescription() {
|
|
772
|
-
return __classPrivateFieldGet(this, _SkyLabelComponent__customDescription, "f");
|
|
773
|
-
}
|
|
774
|
-
ngOnInit() {
|
|
775
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_instances, "m", _SkyLabelComponent_updateIcon).call(this);
|
|
776
|
-
}
|
|
777
|
-
ngAfterViewChecked() {
|
|
778
|
-
if (!this.descriptionType && !__classPrivateFieldGet(this, _SkyLabelComponent_descriptionTypeWarned, "f")) {
|
|
779
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_logSvc, "f").deprecated('SkyLabelComponent without `descriptionType`', {
|
|
780
|
-
deprecationMajorVersion: 8,
|
|
781
|
-
replacementRecommendation: 'Always specify a `descriptionType` property.',
|
|
782
|
-
});
|
|
783
|
-
__classPrivateFieldSet(this, _SkyLabelComponent_descriptionTypeWarned, true, "f");
|
|
784
|
-
}
|
|
785
|
-
}
|
|
786
|
-
ngOnDestroy() {
|
|
787
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_instances, "m", _SkyLabelComponent_unsubscribe).call(this);
|
|
788
|
-
}
|
|
789
|
-
}
|
|
790
|
-
_SkyLabelComponent__descriptionType = new WeakMap(), _SkyLabelComponent__customDescription = new WeakMap(), _SkyLabelComponent_descriptionTypeResourceSubscription = new WeakMap(), _SkyLabelComponent_descriptionTypeWarned = new WeakMap(), _SkyLabelComponent_changeDetector = new WeakMap(), _SkyLabelComponent_resources = new WeakMap(), _SkyLabelComponent_logSvc = new WeakMap(), _SkyLabelComponent_instances = new WeakSet(), _SkyLabelComponent_updateIcon = function _SkyLabelComponent_updateIcon() {
|
|
791
|
-
const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.labelTypeOrDefault);
|
|
792
|
-
this.icon = indicatorIcon.defaultThemeIcon;
|
|
793
|
-
this.baseIcon = indicatorIcon.modernThemeBaseIcon;
|
|
794
|
-
this.topIcon = indicatorIcon.modernThemeTopIcon;
|
|
795
|
-
}, _SkyLabelComponent_updateDescriptionComputed = function _SkyLabelComponent_updateDescriptionComputed() {
|
|
796
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_instances, "m", _SkyLabelComponent_unsubscribe).call(this);
|
|
797
|
-
if (this.descriptionType) {
|
|
798
|
-
switch (this.descriptionType) {
|
|
799
|
-
case 'none':
|
|
800
|
-
this.descriptionComputed = undefined;
|
|
801
|
-
break;
|
|
802
|
-
case 'custom':
|
|
803
|
-
this.descriptionComputed = this.customDescription;
|
|
804
|
-
break;
|
|
805
|
-
default:
|
|
806
|
-
__classPrivateFieldSet(this, _SkyLabelComponent_descriptionTypeResourceSubscription, __classPrivateFieldGet(this, _SkyLabelComponent_resources, "f")
|
|
807
|
-
.getString('skyux_label_sr_' + this.descriptionType.replace(/-/g, '_'))
|
|
808
|
-
.subscribe((value) => {
|
|
809
|
-
this.descriptionComputed = value;
|
|
810
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_changeDetector, "f").markForCheck();
|
|
811
|
-
}), "f");
|
|
812
|
-
break;
|
|
813
|
-
}
|
|
814
|
-
}
|
|
815
|
-
else {
|
|
816
|
-
this.descriptionComputed = undefined;
|
|
817
|
-
}
|
|
818
|
-
}, _SkyLabelComponent_unsubscribe = function _SkyLabelComponent_unsubscribe() {
|
|
819
|
-
if (__classPrivateFieldGet(this, _SkyLabelComponent_descriptionTypeResourceSubscription, "f")) {
|
|
820
|
-
__classPrivateFieldGet(this, _SkyLabelComponent_descriptionTypeResourceSubscription, "f").unsubscribe();
|
|
821
|
-
__classPrivateFieldSet(this, _SkyLabelComponent_descriptionTypeResourceSubscription, undefined, "f");
|
|
822
|
-
}
|
|
823
|
-
};
|
|
824
|
-
SkyLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
825
|
-
SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n <span class=\"sky-label-icon-theme-default\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </span>\n <span class=\"sky-label-icon-theme-modern\">\n <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n </sky-icon-stack>\n </span>\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <span class=\"sky-label-text\">\n <ng-content></ng-content>\n </span>\n</span>\n", styles: [".sky-label{--sky-label-display: inline;--sky-label-align-items: initial;--sky-label-line-height: 2.2;--sky-label-info-background-color: var(--sky-background-color-info);--sky-label-icon-default-display: inline;--sky-label-icon-modern-display: none;--sky-label-info-success-padding: .3em .6em .3em .6em;--sky-label-warning-danger-padding: .3em .6em .3em .6em}:host-context(.sky-theme-modern) .sky-label{--sky-label-display: inline-flex;--sky-label-align-items: center;--sky-label-line-height: 1;--sky-label-info-background-color: var(--sky-background-color-info-light);--sky-label-icon-default-display: none;--sky-label-icon-modern-display: block;--sky-label-info-success-padding: 4px 15px 4px 6px;--sky-label-warning-danger-padding: 4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: var(--sky-text-color-default)}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:var(--sky-highlight-color-info)}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:var(--sky-highlight-color-success)}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:var(--sky-highlight-color-warning)}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:var(--sky-highlight-color-danger)}.sky-theme-modern .sky-label{--sky-label-display: inline-flex;--sky-label-align-items: center;--sky-label-line-height: 1;--sky-label-info-background-color: var(--sky-background-color-info-light);--sky-label-icon-default-display: none;--sky-label-icon-modern-display: block;--sky-label-info-success-padding: 4px 15px 4px 6px;--sky-label-warning-danger-padding: 4px 15px 4px 9px}.sky-theme-modern .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: var(--sky-text-color-default)}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:var(--sky-highlight-color-danger)}.sky-label{color:var(--sky-text-color-default);display:var(--sky-label-display);align-items:var(--sky-label-align-items);border-radius:10rem;font-weight:400;line-height:var(--sky-label-line-height);margin:0 3px;white-space:nowrap}.sky-label.sky-label-info,.sky-label.sky-label-success{padding:var(--sky-label-info-success-padding)}.sky-label.sky-label-warning,.sky-label.sky-label-danger{padding:var(--sky-label-warning-danger-padding)}.sky-label-success{background-color:var(--sky-background-color-success)}.sky-label-info{background-color:var(--sky-label-info-background-color)}.sky-label-warning{background-color:var(--sky-background-color-warning)}.sky-label-danger{background-color:var(--sky-background-color-danger)}.sky-label-text{display:inline-block;padding-left:var(--sky-padding-half)}.sky-label-icon-theme-modern{display:var(--sky-label-icon-modern-display)}.sky-label-icon-theme-default{display:var(--sky-label-icon-default-display)}\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"] }] });
|
|
826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLabelComponent, decorators: [{
|
|
827
|
-
type: Component,
|
|
828
|
-
args: [{ selector: 'sky-label', template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n <span class=\"sky-label-icon-theme-default\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </span>\n <span class=\"sky-label-icon-theme-modern\">\n <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n </sky-icon-stack>\n </span>\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <span class=\"sky-label-text\">\n <ng-content></ng-content>\n </span>\n</span>\n", styles: [".sky-label{--sky-label-display: inline;--sky-label-align-items: initial;--sky-label-line-height: 2.2;--sky-label-info-background-color: var(--sky-background-color-info);--sky-label-icon-default-display: inline;--sky-label-icon-modern-display: none;--sky-label-info-success-padding: .3em .6em .3em .6em;--sky-label-warning-danger-padding: .3em .6em .3em .6em}:host-context(.sky-theme-modern) .sky-label{--sky-label-display: inline-flex;--sky-label-align-items: center;--sky-label-line-height: 1;--sky-label-info-background-color: var(--sky-background-color-info-light);--sky-label-icon-default-display: none;--sky-label-icon-modern-display: block;--sky-label-info-success-padding: 4px 15px 4px 6px;--sky-label-warning-danger-padding: 4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: var(--sky-text-color-default)}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:var(--sky-highlight-color-info)}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:var(--sky-highlight-color-success)}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:var(--sky-highlight-color-warning)}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:var(--sky-highlight-color-danger)}.sky-theme-modern .sky-label{--sky-label-display: inline-flex;--sky-label-align-items: center;--sky-label-line-height: 1;--sky-label-info-background-color: var(--sky-background-color-info-light);--sky-label-icon-default-display: none;--sky-label-icon-modern-display: block;--sky-label-info-success-padding: 4px 15px 4px 6px;--sky-label-warning-danger-padding: 4px 15px 4px 9px}.sky-theme-modern .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: var(--sky-text-color-default)}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:var(--sky-highlight-color-danger)}.sky-label{color:var(--sky-text-color-default);display:var(--sky-label-display);align-items:var(--sky-label-align-items);border-radius:10rem;font-weight:400;line-height:var(--sky-label-line-height);margin:0 3px;white-space:nowrap}.sky-label.sky-label-info,.sky-label.sky-label-success{padding:var(--sky-label-info-success-padding)}.sky-label.sky-label-warning,.sky-label.sky-label-danger{padding:var(--sky-label-warning-danger-padding)}.sky-label-success{background-color:var(--sky-background-color-success)}.sky-label-info{background-color:var(--sky-label-info-background-color)}.sky-label-warning{background-color:var(--sky-background-color-warning)}.sky-label-danger{background-color:var(--sky-background-color-danger)}.sky-label-text{display:inline-block;padding-left:var(--sky-padding-half)}.sky-label-icon-theme-modern{display:var(--sky-label-icon-modern-display)}.sky-label-icon-theme-default{display:var(--sky-label-icon-default-display)}\n"] }]
|
|
829
|
-
}], propDecorators: { labelType: [{
|
|
830
|
-
type: Input
|
|
831
|
-
}], descriptionType: [{
|
|
832
|
-
type: Input
|
|
833
|
-
}], customDescription: [{
|
|
834
|
-
type: Input
|
|
835
|
-
}] } });
|
|
836
|
-
|
|
837
|
-
class SkyLabelModule {
|
|
838
|
-
}
|
|
839
|
-
SkyLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
840
|
-
SkyLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyLabelModule, declarations: [SkyLabelComponent], imports: [CommonModule,
|
|
841
|
-
SkyI18nModule,
|
|
842
|
-
SkyIconModule,
|
|
843
|
-
SkyIndicatorsResourcesModule], exports: [SkyLabelComponent] });
|
|
844
|
-
SkyLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLabelModule, imports: [CommonModule,
|
|
845
|
-
SkyI18nModule,
|
|
846
|
-
SkyIconModule,
|
|
847
|
-
SkyIndicatorsResourcesModule] });
|
|
848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLabelModule, decorators: [{
|
|
849
|
-
type: NgModule,
|
|
850
|
-
args: [{
|
|
851
|
-
declarations: [SkyLabelComponent],
|
|
852
|
-
imports: [
|
|
853
|
-
CommonModule,
|
|
854
|
-
SkyI18nModule,
|
|
855
|
-
SkyIconModule,
|
|
856
|
-
SkyIndicatorsResourcesModule,
|
|
857
|
-
],
|
|
858
|
-
exports: [SkyLabelComponent],
|
|
859
|
-
}]
|
|
860
|
-
}] });
|
|
861
|
-
|
|
862
|
-
var _SkyStatusIndicatorComponent_instances, _SkyStatusIndicatorComponent_changeDetector, _SkyStatusIndicatorComponent_resourcesSvc, _SkyStatusIndicatorComponent__descriptionType, _SkyStatusIndicatorComponent__customDescription, _SkyStatusIndicatorComponent_updateIcon, _SkyStatusIndicatorComponent_updateDescriptionComputed;
|
|
863
|
-
const INDICATOR_TYPE_DEFAULT = 'warning';
|
|
864
|
-
/**
|
|
865
|
-
* Displays status text with an icon matching the specified indicator type.
|
|
866
|
-
* To display a help button beside the label, include a help button element, such as
|
|
867
|
-
* `sky-help-inline`, in the `sky-status-indicator` element and a `sky-control-help`
|
|
868
|
-
* CSS class on that help button element.
|
|
869
|
-
*/
|
|
870
|
-
class SkyStatusIndicatorComponent {
|
|
871
|
-
constructor() {
|
|
872
|
-
_SkyStatusIndicatorComponent_instances.add(this);
|
|
873
|
-
this.indicatorTypeOrDefault = INDICATOR_TYPE_DEFAULT;
|
|
874
|
-
_SkyStatusIndicatorComponent_changeDetector.set(this, inject(ChangeDetectorRef));
|
|
875
|
-
_SkyStatusIndicatorComponent_resourcesSvc.set(this, inject(SkyLibResourcesService));
|
|
876
|
-
_SkyStatusIndicatorComponent__descriptionType.set(this, void 0);
|
|
877
|
-
_SkyStatusIndicatorComponent__customDescription.set(this, void 0);
|
|
878
|
-
}
|
|
879
|
-
/**
|
|
880
|
-
* The style for the status indicator, which determines the icon.
|
|
881
|
-
* @default "warning"
|
|
882
|
-
*/
|
|
883
|
-
set indicatorType(value) {
|
|
884
|
-
this.indicatorTypeOrDefault =
|
|
885
|
-
value === undefined ? INDICATOR_TYPE_DEFAULT : value;
|
|
886
|
-
__classPrivateFieldGet(this, _SkyStatusIndicatorComponent_instances, "m", _SkyStatusIndicatorComponent_updateIcon).call(this);
|
|
887
|
-
}
|
|
888
|
-
/**
|
|
889
|
-
* The predefined text to be read by screen readers for users
|
|
890
|
-
* who cannot see the indicator icon.
|
|
891
|
-
* @required
|
|
892
|
-
*/
|
|
893
|
-
set descriptionType(value) {
|
|
894
|
-
__classPrivateFieldSet(this, _SkyStatusIndicatorComponent__descriptionType, value, "f");
|
|
895
|
-
__classPrivateFieldGet(this, _SkyStatusIndicatorComponent_instances, "m", _SkyStatusIndicatorComponent_updateDescriptionComputed).call(this);
|
|
896
|
-
}
|
|
897
|
-
get descriptionType() {
|
|
898
|
-
return __classPrivateFieldGet(this, _SkyStatusIndicatorComponent__descriptionType, "f");
|
|
899
|
-
}
|
|
900
|
-
/**
|
|
901
|
-
* The text to be read by screen readers for users who cannot see
|
|
902
|
-
* the indicator icon when `descriptionType` is `custom`.
|
|
903
|
-
*/
|
|
904
|
-
set customDescription(value) {
|
|
905
|
-
__classPrivateFieldSet(this, _SkyStatusIndicatorComponent__customDescription, value, "f");
|
|
906
|
-
__classPrivateFieldGet(this, _SkyStatusIndicatorComponent_instances, "m", _SkyStatusIndicatorComponent_updateDescriptionComputed).call(this);
|
|
907
|
-
}
|
|
908
|
-
get customDescription() {
|
|
909
|
-
return __classPrivateFieldGet(this, _SkyStatusIndicatorComponent__customDescription, "f");
|
|
910
|
-
}
|
|
911
|
-
ngOnInit() {
|
|
912
|
-
__classPrivateFieldGet(this, _SkyStatusIndicatorComponent_instances, "m", _SkyStatusIndicatorComponent_updateIcon).call(this);
|
|
913
|
-
}
|
|
914
|
-
}
|
|
915
|
-
_SkyStatusIndicatorComponent_changeDetector = new WeakMap(), _SkyStatusIndicatorComponent_resourcesSvc = new WeakMap(), _SkyStatusIndicatorComponent__descriptionType = new WeakMap(), _SkyStatusIndicatorComponent__customDescription = new WeakMap(), _SkyStatusIndicatorComponent_instances = new WeakSet(), _SkyStatusIndicatorComponent_updateIcon = function _SkyStatusIndicatorComponent_updateIcon() {
|
|
916
|
-
const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.indicatorTypeOrDefault);
|
|
917
|
-
this.icon = indicatorIcon.defaultThemeIcon;
|
|
918
|
-
this.baseIcon = indicatorIcon.modernThemeBaseIcon;
|
|
919
|
-
this.topIcon = indicatorIcon.modernThemeTopIcon;
|
|
920
|
-
}, _SkyStatusIndicatorComponent_updateDescriptionComputed = function _SkyStatusIndicatorComponent_updateDescriptionComputed() {
|
|
921
|
-
if (this.descriptionType) {
|
|
922
|
-
switch (this.descriptionType) {
|
|
923
|
-
case 'none':
|
|
924
|
-
this.descriptionComputed = '';
|
|
925
|
-
break;
|
|
926
|
-
case 'custom':
|
|
927
|
-
this.descriptionComputed = this.customDescription;
|
|
928
|
-
break;
|
|
929
|
-
default:
|
|
930
|
-
__classPrivateFieldGet(this, _SkyStatusIndicatorComponent_resourcesSvc, "f")
|
|
931
|
-
.getString('skyux_status_indicator_sr_' +
|
|
932
|
-
this.descriptionType.replace(/-/g, '_'))
|
|
933
|
-
.subscribe((value) => {
|
|
934
|
-
this.descriptionComputed = value;
|
|
935
|
-
__classPrivateFieldGet(this, _SkyStatusIndicatorComponent_changeDetector, "f").markForCheck();
|
|
936
|
-
});
|
|
937
|
-
break;
|
|
938
|
-
}
|
|
939
|
-
}
|
|
940
|
-
else {
|
|
941
|
-
this.descriptionComputed = undefined;
|
|
942
|
-
}
|
|
943
|
-
};
|
|
944
|
-
SkyStatusIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
945
|
-
SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n <div\n aria-hidden=\"true\"\n class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n >\n <span class=\"sky-status-indicator-icon-default\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </span>\n <span class=\"sky-status-indicator-icon-modern\">\n <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n </sky-icon-stack>\n </span>\n </div>\n <div class=\"sky-status-indicator-message-wrapper\">\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <span class=\"sky-status-indicator-message\" skyTrim\n ><ng-content></ng-content></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\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$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
946
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
|
|
947
|
-
type: Component,
|
|
948
|
-
args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n <div\n aria-hidden=\"true\"\n class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n >\n <span class=\"sky-status-indicator-icon-default\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </span>\n <span class=\"sky-status-indicator-icon-modern\">\n <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n </sky-icon-stack>\n </span>\n </div>\n <div class=\"sky-status-indicator-message-wrapper\">\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <span class=\"sky-status-indicator-message\" skyTrim\n ><ng-content></ng-content></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"] }]
|
|
949
|
-
}], propDecorators: { indicatorType: [{
|
|
950
|
-
type: Input
|
|
951
|
-
}], descriptionType: [{
|
|
952
|
-
type: Input
|
|
953
|
-
}], customDescription: [{
|
|
954
|
-
type: Input
|
|
955
|
-
}] } });
|
|
956
|
-
|
|
957
|
-
class SkyStatusIndicatorModule {
|
|
958
|
-
}
|
|
959
|
-
SkyStatusIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyStatusIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
960
|
-
SkyStatusIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyStatusIndicatorModule, declarations: [SkyStatusIndicatorComponent], imports: [CommonModule,
|
|
961
|
-
SkyI18nModule,
|
|
962
|
-
SkyIconModule,
|
|
963
|
-
SkyIndicatorsResourcesModule,
|
|
964
|
-
SkyTrimModule], exports: [SkyStatusIndicatorComponent] });
|
|
965
|
-
SkyStatusIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyStatusIndicatorModule, imports: [CommonModule,
|
|
966
|
-
SkyI18nModule,
|
|
967
|
-
SkyIconModule,
|
|
968
|
-
SkyIndicatorsResourcesModule,
|
|
969
|
-
SkyTrimModule] });
|
|
970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyStatusIndicatorModule, decorators: [{
|
|
971
|
-
type: NgModule,
|
|
972
|
-
args: [{
|
|
973
|
-
declarations: [SkyStatusIndicatorComponent],
|
|
974
|
-
imports: [
|
|
975
|
-
CommonModule,
|
|
976
|
-
SkyI18nModule,
|
|
977
|
-
SkyIconModule,
|
|
978
|
-
SkyIndicatorsResourcesModule,
|
|
979
|
-
SkyTrimModule,
|
|
980
|
-
],
|
|
981
|
-
exports: [SkyStatusIndicatorComponent],
|
|
982
|
-
}]
|
|
983
|
-
}] });
|
|
984
|
-
|
|
985
|
-
var _SkyTextHighlightDirective_instances, _SkyTextHighlightDirective_existingHighlight, _SkyTextHighlightDirective_observer, _SkyTextHighlightDirective_searchTerms, _SkyTextHighlightDirective_el, _SkyTextHighlightDirective_observerSvc, _SkyTextHighlightDirective_disconnectObserver, _SkyTextHighlightDirective_highlight, _SkyTextHighlightDirective_observeDom;
|
|
986
|
-
const CLASS_NAME = 'sky-highlight-mark';
|
|
987
|
-
const SPECIAL_CHAR_REGEX = /[-/\\^$*+?.()|[\]{}]/g;
|
|
988
|
-
function markNode(node, searchRegex) {
|
|
989
|
-
// The search regular expression is reused across calls to markNode(), so reset
|
|
990
|
-
// it so it searches from the start of the string each time.
|
|
991
|
-
searchRegex.lastIndex = 0;
|
|
992
|
-
const text = node.nodeValue;
|
|
993
|
-
if (text) {
|
|
994
|
-
const match = searchRegex.exec(text);
|
|
995
|
-
if (match) {
|
|
996
|
-
// Split apart text node with mark tags in the middle on the search term.
|
|
997
|
-
const matchIndex = match.index;
|
|
998
|
-
const middle = node.splitText(matchIndex);
|
|
999
|
-
middle.splitText(searchRegex.lastIndex - matchIndex);
|
|
1000
|
-
const middleClone = middle.cloneNode(true);
|
|
1001
|
-
const markNode = document.createElement('mark');
|
|
1002
|
-
markNode.className = CLASS_NAME;
|
|
1003
|
-
markNode.appendChild(middleClone);
|
|
1004
|
-
/* istanbul ignore else */
|
|
1005
|
-
if (middle.parentNode) {
|
|
1006
|
-
middle.parentNode.replaceChild(markNode, middle);
|
|
1007
|
-
}
|
|
1008
|
-
return 1;
|
|
1009
|
-
}
|
|
1010
|
-
}
|
|
1011
|
-
return 0;
|
|
1012
|
-
}
|
|
1013
|
-
function markTextNodes(node, searchRegex) {
|
|
1014
|
-
if (node.nodeType === 3) {
|
|
1015
|
-
return markNode(node, searchRegex);
|
|
1016
|
-
}
|
|
1017
|
-
else if (node.nodeType === 1 && node.childNodes) {
|
|
1018
|
-
for (let i = 0; i < node.childNodes.length; i++) {
|
|
1019
|
-
const childNode = node.childNodes[i];
|
|
1020
|
-
i += markTextNodes(childNode, searchRegex);
|
|
1021
|
-
}
|
|
1022
|
-
}
|
|
1023
|
-
return 0;
|
|
1024
|
-
}
|
|
1025
|
-
function removeHighlight(el) {
|
|
1026
|
-
const matchedElements = el.nativeElement.querySelectorAll(`mark.${CLASS_NAME}`);
|
|
1027
|
-
if (matchedElements) {
|
|
1028
|
-
for (let i = 0; i < matchedElements.length; i++) {
|
|
1029
|
-
const node = matchedElements[i];
|
|
1030
|
-
const parentNode = node.parentNode;
|
|
1031
|
-
if (parentNode && node.firstChild) {
|
|
1032
|
-
parentNode.replaceChild(node.firstChild, node);
|
|
1033
|
-
parentNode.normalize();
|
|
1034
|
-
}
|
|
1035
|
-
}
|
|
1036
|
-
}
|
|
1037
|
-
}
|
|
1038
|
-
function createSearchRegex(searchTerms) {
|
|
1039
|
-
let searchRegex;
|
|
1040
|
-
if (searchTerms.length > 0) {
|
|
1041
|
-
// Escape all the special regular expression characters by adding a
|
|
1042
|
-
// preceding '\' to each match.
|
|
1043
|
-
searchTerms = searchTerms.map((searchTerm) => searchTerm.replace(SPECIAL_CHAR_REGEX, '\\$&'));
|
|
1044
|
-
searchRegex = new RegExp(searchTerms.join('|'), 'gi');
|
|
1045
|
-
}
|
|
1046
|
-
return searchRegex;
|
|
1047
|
-
}
|
|
1048
|
-
// Need to add the following to classes which contain static methods.
|
|
1049
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
1050
|
-
// @dynamic
|
|
1051
|
-
/**
|
|
1052
|
-
* Highlights all matching text within the current DOM element.
|
|
1053
|
-
*/
|
|
1054
|
-
class SkyTextHighlightDirective {
|
|
1055
|
-
constructor() {
|
|
1056
|
-
_SkyTextHighlightDirective_instances.add(this);
|
|
1057
|
-
_SkyTextHighlightDirective_existingHighlight.set(this, false);
|
|
1058
|
-
_SkyTextHighlightDirective_observer.set(this, void 0);
|
|
1059
|
-
_SkyTextHighlightDirective_searchTerms.set(this, []);
|
|
1060
|
-
_SkyTextHighlightDirective_el.set(this, inject(ElementRef));
|
|
1061
|
-
_SkyTextHighlightDirective_observerSvc.set(this, inject(SkyMutationObserverService));
|
|
1062
|
-
}
|
|
1063
|
-
/**
|
|
1064
|
-
* The text to highlight.
|
|
1065
|
-
*/
|
|
1066
|
-
set skyHighlight(value) {
|
|
1067
|
-
value = value || [];
|
|
1068
|
-
if (Array.isArray(value)) {
|
|
1069
|
-
__classPrivateFieldSet(this, _SkyTextHighlightDirective_searchTerms, value.filter((item) => !!item), "f");
|
|
1070
|
-
// Reorder strings by their length in descending order to avoid missing matches
|
|
1071
|
-
// that contain substrings of other matches.
|
|
1072
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_searchTerms, "f").sort(function (a, b) {
|
|
1073
|
-
return b.length - a.length;
|
|
1074
|
-
});
|
|
1075
|
-
}
|
|
1076
|
-
else {
|
|
1077
|
-
__classPrivateFieldSet(this, _SkyTextHighlightDirective_searchTerms, [value], "f");
|
|
1078
|
-
}
|
|
1079
|
-
}
|
|
1080
|
-
ngOnChanges(changes) {
|
|
1081
|
-
if (changes['skyHighlight'] && !changes['skyHighlight'].firstChange) {
|
|
1082
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_instances, "m", _SkyTextHighlightDirective_highlight).call(this);
|
|
1083
|
-
}
|
|
1084
|
-
}
|
|
1085
|
-
ngAfterViewInit() {
|
|
1086
|
-
__classPrivateFieldSet(this, _SkyTextHighlightDirective_observer, __classPrivateFieldGet(this, _SkyTextHighlightDirective_observerSvc, "f").create(() => {
|
|
1087
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_instances, "m", _SkyTextHighlightDirective_highlight).call(this);
|
|
1088
|
-
}), "f");
|
|
1089
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_instances, "m", _SkyTextHighlightDirective_highlight).call(this);
|
|
1090
|
-
}
|
|
1091
|
-
ngOnDestroy() {
|
|
1092
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_instances, "m", _SkyTextHighlightDirective_disconnectObserver).call(this);
|
|
1093
|
-
}
|
|
1094
|
-
}
|
|
1095
|
-
_SkyTextHighlightDirective_existingHighlight = new WeakMap(), _SkyTextHighlightDirective_observer = new WeakMap(), _SkyTextHighlightDirective_searchTerms = new WeakMap(), _SkyTextHighlightDirective_el = new WeakMap(), _SkyTextHighlightDirective_observerSvc = new WeakMap(), _SkyTextHighlightDirective_instances = new WeakSet(), _SkyTextHighlightDirective_disconnectObserver = function _SkyTextHighlightDirective_disconnectObserver() {
|
|
1096
|
-
if (__classPrivateFieldGet(this, _SkyTextHighlightDirective_observer, "f")) {
|
|
1097
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_observer, "f").disconnect();
|
|
1098
|
-
}
|
|
1099
|
-
}, _SkyTextHighlightDirective_highlight = function _SkyTextHighlightDirective_highlight() {
|
|
1100
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_instances, "m", _SkyTextHighlightDirective_disconnectObserver).call(this);
|
|
1101
|
-
if (__classPrivateFieldGet(this, _SkyTextHighlightDirective_existingHighlight, "f")) {
|
|
1102
|
-
removeHighlight(__classPrivateFieldGet(this, _SkyTextHighlightDirective_el, "f"));
|
|
1103
|
-
}
|
|
1104
|
-
const node = __classPrivateFieldGet(this, _SkyTextHighlightDirective_el, "f").nativeElement;
|
|
1105
|
-
if (node) {
|
|
1106
|
-
const searchRegex = createSearchRegex(__classPrivateFieldGet(this, _SkyTextHighlightDirective_searchTerms, "f"));
|
|
1107
|
-
// mark all matched text in the DOM
|
|
1108
|
-
if (searchRegex) {
|
|
1109
|
-
markTextNodes(node, searchRegex);
|
|
1110
|
-
__classPrivateFieldSet(this, _SkyTextHighlightDirective_existingHighlight, true, "f");
|
|
1111
|
-
}
|
|
1112
|
-
}
|
|
1113
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_instances, "m", _SkyTextHighlightDirective_observeDom).call(this);
|
|
1114
|
-
}, _SkyTextHighlightDirective_observeDom = function _SkyTextHighlightDirective_observeDom() {
|
|
1115
|
-
if (__classPrivateFieldGet(this, _SkyTextHighlightDirective_observer, "f")) {
|
|
1116
|
-
const config = {
|
|
1117
|
-
attributes: false,
|
|
1118
|
-
childList: true,
|
|
1119
|
-
characterData: true,
|
|
1120
|
-
};
|
|
1121
|
-
__classPrivateFieldGet(this, _SkyTextHighlightDirective_observer, "f").observe(__classPrivateFieldGet(this, _SkyTextHighlightDirective_el, "f").nativeElement, config);
|
|
1122
|
-
}
|
|
1123
|
-
};
|
|
1124
|
-
SkyTextHighlightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTextHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1125
|
-
SkyTextHighlightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: { skyHighlight: "skyHighlight" }, usesOnChanges: true, ngImport: i0 });
|
|
1126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTextHighlightDirective, decorators: [{
|
|
1127
|
-
type: Directive,
|
|
1128
|
-
args: [{
|
|
1129
|
-
selector: '[skyHighlight]',
|
|
1130
|
-
}]
|
|
1131
|
-
}], propDecorators: { skyHighlight: [{
|
|
1132
|
-
type: Input
|
|
1133
|
-
}] } });
|
|
1134
|
-
|
|
1135
|
-
class SkyTextHighlightModule {
|
|
1136
|
-
}
|
|
1137
|
-
SkyTextHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1138
|
-
SkyTextHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTextHighlightModule, declarations: [SkyTextHighlightDirective], exports: [SkyTextHighlightDirective] });
|
|
1139
|
-
SkyTextHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTextHighlightModule, providers: [SkyMutationObserverService] });
|
|
1140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTextHighlightModule, decorators: [{
|
|
1141
|
-
type: NgModule,
|
|
1142
|
-
args: [{
|
|
1143
|
-
declarations: [SkyTextHighlightDirective],
|
|
1144
|
-
exports: [SkyTextHighlightDirective],
|
|
1145
|
-
providers: [SkyMutationObserverService],
|
|
1146
|
-
}]
|
|
1147
|
-
}] });
|
|
1148
|
-
|
|
1149
|
-
var _SkyTokenComponent_elementRef, _SkyTokenComponent__disabled, _SkyTokenComponent__dismissible;
|
|
1150
|
-
class SkyTokenComponent {
|
|
1151
|
-
constructor() {
|
|
1152
|
-
/**
|
|
1153
|
-
* Fires when users click the close button.
|
|
1154
|
-
*/
|
|
1155
|
-
this.dismiss = new EventEmitter();
|
|
1156
|
-
/**
|
|
1157
|
-
* Fires when users place focus on the token by navigating to it with the `Tab` key.
|
|
1158
|
-
*/
|
|
1159
|
-
this.tokenFocus = new EventEmitter();
|
|
1160
|
-
this.isFocused = false;
|
|
1161
|
-
this.tokenActive = false;
|
|
1162
|
-
this.closeActive = false;
|
|
1163
|
-
this.tabIndex = 0;
|
|
1164
|
-
_SkyTokenComponent_elementRef.set(this, inject(ElementRef));
|
|
1165
|
-
_SkyTokenComponent__disabled.set(this, false);
|
|
1166
|
-
_SkyTokenComponent__dismissible.set(this, true);
|
|
1167
|
-
}
|
|
1168
|
-
/**
|
|
1169
|
-
* Whether to disable the token to prevent users from selecting it, dismissing it,
|
|
1170
|
-
* or navigating to it with the arrow keys. When the token is disabled,
|
|
1171
|
-
* users can still place focus on it using the `Tab` key.
|
|
1172
|
-
* @default false
|
|
1173
|
-
*/
|
|
1174
|
-
set disabled(value) {
|
|
1175
|
-
__classPrivateFieldSet(this, _SkyTokenComponent__disabled, !!value, "f");
|
|
1176
|
-
}
|
|
1177
|
-
get disabled() {
|
|
1178
|
-
return __classPrivateFieldGet(this, _SkyTokenComponent__disabled, "f");
|
|
1179
|
-
}
|
|
1180
|
-
/**
|
|
1181
|
-
* Whether users can remove the token from the list by selecting the close button.
|
|
1182
|
-
* @default true
|
|
1183
|
-
*/
|
|
1184
|
-
set dismissible(value) {
|
|
1185
|
-
__classPrivateFieldSet(this, _SkyTokenComponent__dismissible, value !== false, "f");
|
|
1186
|
-
}
|
|
1187
|
-
get dismissible() {
|
|
1188
|
-
return __classPrivateFieldGet(this, _SkyTokenComponent__dismissible, "f");
|
|
1189
|
-
}
|
|
1190
|
-
/**
|
|
1191
|
-
* Whether users can place focus on the token using the `Tab`. This does not
|
|
1192
|
-
* affect the ability to select the token, dismiss it, or navigate to it with the arrow keys.
|
|
1193
|
-
* @default true
|
|
1194
|
-
*/
|
|
1195
|
-
set focusable(value) {
|
|
1196
|
-
this.tabIndex = value !== false ? 0 : -1;
|
|
1197
|
-
}
|
|
1198
|
-
onFocusIn() {
|
|
1199
|
-
if (!this.isFocused) {
|
|
1200
|
-
this.tokenFocus.emit();
|
|
1201
|
-
this.isFocused = true;
|
|
1202
|
-
}
|
|
1203
|
-
}
|
|
1204
|
-
onFocusOut(event) {
|
|
1205
|
-
this.isFocused = __classPrivateFieldGet(this, _SkyTokenComponent_elementRef, "f").nativeElement.contains(event.relatedTarget);
|
|
1206
|
-
}
|
|
1207
|
-
dismissToken(event) {
|
|
1208
|
-
event.stopPropagation();
|
|
1209
|
-
this.dismiss.emit();
|
|
1210
|
-
}
|
|
1211
|
-
focusElement() {
|
|
1212
|
-
var _a;
|
|
1213
|
-
(_a = this.actionButtonRef) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
|
|
1214
|
-
}
|
|
1215
|
-
setTokenActive(tokenActive) {
|
|
1216
|
-
this.tokenActive = tokenActive;
|
|
1217
|
-
}
|
|
1218
|
-
setCloseActive(closeActive) {
|
|
1219
|
-
this.closeActive = closeActive;
|
|
1220
|
-
}
|
|
1221
|
-
}
|
|
1222
|
-
_SkyTokenComponent_elementRef = new WeakMap(), _SkyTokenComponent__disabled = new WeakMap(), _SkyTokenComponent__dismissible = new WeakMap();
|
|
1223
|
-
SkyTokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1224
|
-
SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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\n class=\"sky-token-btn-close-icon-default\"\n icon=\"times\"\n ></sky-icon>\n <sky-icon\n class=\"sky-token-btn-close-icon-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </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}.sky-token-btn-close-icon-modern{display:none}: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-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;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-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;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 });
|
|
1225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
1226
|
-
type: Component,
|
|
1227
|
-
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\n class=\"sky-token-btn-close-icon-default\"\n icon=\"times\"\n ></sky-icon>\n <sky-icon\n class=\"sky-token-btn-close-icon-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </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}.sky-token-btn-close-icon-modern{display:none}: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-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;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-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;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"] }]
|
|
1228
|
-
}], propDecorators: { disabled: [{
|
|
1229
|
-
type: Input
|
|
1230
|
-
}], ariaLabel: [{
|
|
1231
|
-
type: Input
|
|
1232
|
-
}], dismissible: [{
|
|
1233
|
-
type: Input
|
|
1234
|
-
}], focusable: [{
|
|
1235
|
-
type: Input
|
|
1236
|
-
}], role: [{
|
|
1237
|
-
type: Input
|
|
1238
|
-
}], dismiss: [{
|
|
1239
|
-
type: Output
|
|
1240
|
-
}], tokenFocus: [{
|
|
1241
|
-
type: Output
|
|
1242
|
-
}], actionButtonRef: [{
|
|
1243
|
-
type: ViewChild,
|
|
1244
|
-
args: ['actionButton', { read: ElementRef, static: true }]
|
|
1245
|
-
}] } });
|
|
1246
|
-
|
|
1247
|
-
var SkyTokensMessageType;
|
|
1248
|
-
(function (SkyTokensMessageType) {
|
|
1249
|
-
/**
|
|
1250
|
-
* Places focus on the last token in the list.
|
|
1251
|
-
*/
|
|
1252
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusLastToken"] = 0] = "FocusLastToken";
|
|
1253
|
-
/**
|
|
1254
|
-
* Places focus on the token that is currently selected.
|
|
1255
|
-
*/
|
|
1256
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusActiveToken"] = 1] = "FocusActiveToken";
|
|
1257
|
-
/**
|
|
1258
|
-
* Places focus on the token before the currently selected token.
|
|
1259
|
-
*/
|
|
1260
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusPreviousToken"] = 2] = "FocusPreviousToken";
|
|
1261
|
-
/**
|
|
1262
|
-
* Places focus on the token after the currently selected token.
|
|
1263
|
-
*/
|
|
1264
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusNextToken"] = 3] = "FocusNextToken";
|
|
1265
|
-
/**
|
|
1266
|
-
* Removes the token that is currently selected from the list of tokens.
|
|
1267
|
-
*/
|
|
1268
|
-
SkyTokensMessageType[SkyTokensMessageType["RemoveActiveToken"] = 4] = "RemoveActiveToken";
|
|
1269
|
-
})(SkyTokensMessageType || (SkyTokensMessageType = {}));
|
|
1270
|
-
|
|
1271
|
-
var _SkyTokensComponent_instances, _SkyTokensComponent__disabled, _SkyTokensComponent__dismissible, _SkyTokensComponent__focusable, _SkyTokensComponent__tokens, _SkyTokensComponent__displayWith, _SkyTokensComponent_messageStreamSub, _SkyTokensComponent_ngUnsubscribe, _SkyTokensComponent_changeDetector, _SkyTokensComponent__activeIndex, _SkyTokensComponent__messageStream, _SkyTokensComponent_focusPreviousToken, _SkyTokensComponent_focusNextToken, _SkyTokensComponent_focusLastToken, _SkyTokensComponent_focusActiveToken, _SkyTokensComponent_removeActiveToken, _SkyTokensComponent_initMessageStream, _SkyTokensComponent_notifyTokenSelected;
|
|
1272
|
-
const DISPLAY_WITH_DEFAULT = 'name';
|
|
1273
|
-
/**
|
|
1274
|
-
* Creates a container that enables navigation between tokens using keyboard arrow keys.
|
|
1275
|
-
* This is useful when combined with other components where the <kbd>Tab</kbd> key is
|
|
1276
|
-
* reserved for other functions, such as the SKY UX Lookup component.
|
|
1277
|
-
*/
|
|
1278
|
-
class SkyTokensComponent {
|
|
1279
|
-
/**
|
|
1280
|
-
* Whether to disable the tokens list to prevent users from selecting tokens,
|
|
1281
|
-
* dismissing tokens, or navigating through the list with the arrow keys. When the tokens list
|
|
1282
|
-
* is disabled, users can still place focus on items in the list using the `Tab` key.
|
|
1283
|
-
* @default false
|
|
1284
|
-
*/
|
|
1285
|
-
set disabled(value) {
|
|
1286
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__disabled, !!value, "f");
|
|
1287
|
-
}
|
|
1288
|
-
get disabled() {
|
|
1289
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__disabled, "f");
|
|
1290
|
-
}
|
|
1291
|
-
/**
|
|
1292
|
-
* Whether users can remove a token from the list by selecting a token's close button.
|
|
1293
|
-
* @default true
|
|
1294
|
-
*/
|
|
1295
|
-
set dismissible(value) {
|
|
1296
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__dismissible, value !== false, "f");
|
|
1297
|
-
}
|
|
1298
|
-
get dismissible() {
|
|
1299
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__dismissible, "f");
|
|
1300
|
-
}
|
|
1301
|
-
/**
|
|
1302
|
-
* The token property to display for each item in the tokens list.
|
|
1303
|
-
* @default "name"
|
|
1304
|
-
*/
|
|
1305
|
-
set displayWith(value) {
|
|
1306
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__displayWith, value || DISPLAY_WITH_DEFAULT, "f");
|
|
1307
|
-
}
|
|
1308
|
-
get displayWith() {
|
|
1309
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__displayWith, "f");
|
|
1310
|
-
}
|
|
1311
|
-
/**
|
|
1312
|
-
* Whether users can place focus on tokens in the list using the `Tab` key.
|
|
1313
|
-
* This does not affect the ability of users to select tokens, dismiss tokens,
|
|
1314
|
-
* or navigate through the list with the arrow keys.
|
|
1315
|
-
* @default true
|
|
1316
|
-
*/
|
|
1317
|
-
set focusable(value) {
|
|
1318
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__focusable, value !== false, "f");
|
|
1319
|
-
}
|
|
1320
|
-
get focusable() {
|
|
1321
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__focusable, "f");
|
|
1322
|
-
}
|
|
1323
|
-
/**
|
|
1324
|
-
* The array of tokens to include in the list.
|
|
1325
|
-
*/
|
|
1326
|
-
set tokens(value) {
|
|
1327
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__tokens, value || [], "f");
|
|
1328
|
-
// The previous behavior was to set `this._tokens = value`, then emit `this._tokens`,
|
|
1329
|
-
// which would emit `undefined` instead of a default value of `[]` returned by the
|
|
1330
|
-
// get accessor when set to `undefined`. Emitting `value` instead of `this.#_tokensOrDefault`
|
|
1331
|
-
// preserves that behavior.
|
|
1332
|
-
this.tokensChange.emit(value);
|
|
1333
|
-
}
|
|
1334
|
-
get tokens() {
|
|
1335
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__tokens, "f");
|
|
1336
|
-
}
|
|
1337
|
-
/**
|
|
1338
|
-
* The observable of `SkyTokensMessage` that can place focus on a
|
|
1339
|
-
* particular token or remove the active token from the list.
|
|
1340
|
-
*/
|
|
1341
|
-
set messageStream(value) {
|
|
1342
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__messageStream, value || new Subject(), "f");
|
|
1343
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_initMessageStream).call(this);
|
|
1344
|
-
}
|
|
1345
|
-
get messageStream() {
|
|
1346
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__messageStream, "f");
|
|
1347
|
-
}
|
|
1348
|
-
get activeIndex() {
|
|
1349
|
-
return __classPrivateFieldGet(this, _SkyTokensComponent__activeIndex, "f");
|
|
1350
|
-
}
|
|
1351
|
-
set activeIndex(value) {
|
|
1352
|
-
if (value >= __classPrivateFieldGet(this, _SkyTokensComponent__tokens, "f").length) {
|
|
1353
|
-
value = __classPrivateFieldGet(this, _SkyTokensComponent__tokens, "f").length - 1;
|
|
1354
|
-
this.focusIndexOverRange.emit();
|
|
1355
|
-
}
|
|
1356
|
-
if (value < 0) {
|
|
1357
|
-
value = 0;
|
|
1358
|
-
this.focusIndexUnderRange.emit();
|
|
1359
|
-
}
|
|
1360
|
-
__classPrivateFieldSet(this, _SkyTokensComponent__activeIndex, value || 0, "f");
|
|
1361
|
-
}
|
|
1362
|
-
constructor() {
|
|
1363
|
-
_SkyTokensComponent_instances.add(this);
|
|
1364
|
-
/**
|
|
1365
|
-
* Fires when users navigate through the tokens list with the `Tab` key
|
|
1366
|
-
* and attempt to move past the final token in the list.
|
|
1367
|
-
*/
|
|
1368
|
-
this.focusIndexOverRange = new EventEmitter();
|
|
1369
|
-
/**
|
|
1370
|
-
* Fires when users navigate through the tokens list with the `Tab` key
|
|
1371
|
-
* and attempt to move before the first token in the list.
|
|
1372
|
-
*/
|
|
1373
|
-
this.focusIndexUnderRange = new EventEmitter();
|
|
1374
|
-
/**
|
|
1375
|
-
* Fires when users select a token in the list. This event emits the selected token.
|
|
1376
|
-
*/
|
|
1377
|
-
this.tokenSelected = new EventEmitter();
|
|
1378
|
-
/**
|
|
1379
|
-
* Fires when the tokens in the list change.
|
|
1380
|
-
* This event emits an array of the tokens in the updated list.
|
|
1381
|
-
*/
|
|
1382
|
-
this.tokensChange = new EventEmitter();
|
|
1383
|
-
/**
|
|
1384
|
-
* Fires when all animations on the tokens are complete.
|
|
1385
|
-
* @internal
|
|
1386
|
-
*/
|
|
1387
|
-
this.tokensRendered = new EventEmitter();
|
|
1388
|
-
_SkyTokensComponent__disabled.set(this, false);
|
|
1389
|
-
_SkyTokensComponent__dismissible.set(this, true);
|
|
1390
|
-
_SkyTokensComponent__focusable.set(this, true);
|
|
1391
|
-
_SkyTokensComponent__tokens.set(this, []);
|
|
1392
|
-
_SkyTokensComponent__displayWith.set(this, DISPLAY_WITH_DEFAULT);
|
|
1393
|
-
_SkyTokensComponent_messageStreamSub.set(this, void 0);
|
|
1394
|
-
_SkyTokensComponent_ngUnsubscribe.set(this, new Subject());
|
|
1395
|
-
_SkyTokensComponent_changeDetector.set(this, inject(ChangeDetectorRef));
|
|
1396
|
-
_SkyTokensComponent__activeIndex.set(this, 0);
|
|
1397
|
-
_SkyTokensComponent__messageStream.set(this, new Subject());
|
|
1398
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_initMessageStream).call(this);
|
|
1399
|
-
// Angular calls the trackBy function without applying the component instance's scope.
|
|
1400
|
-
// Use a fat-arrow function so the current component instance's trackWith property can
|
|
1401
|
-
// be referenced.
|
|
1402
|
-
this.trackTokenFn = (_index, item) => {
|
|
1403
|
-
if (this.trackWith) {
|
|
1404
|
-
return item.value[this.trackWith];
|
|
1405
|
-
}
|
|
1406
|
-
return item;
|
|
1407
|
-
};
|
|
1408
|
-
}
|
|
1409
|
-
ngOnDestroy() {
|
|
1410
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_ngUnsubscribe, "f").next();
|
|
1411
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_ngUnsubscribe, "f").complete();
|
|
1412
|
-
}
|
|
1413
|
-
onTokenClick(token) {
|
|
1414
|
-
if (this.disabled) {
|
|
1415
|
-
return;
|
|
1416
|
-
}
|
|
1417
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_notifyTokenSelected).call(this, token);
|
|
1418
|
-
}
|
|
1419
|
-
animationDone() {
|
|
1420
|
-
this.tokensRendered.emit();
|
|
1421
|
-
}
|
|
1422
|
-
onTokenKeyDown(event) {
|
|
1423
|
-
if (!this.disabled) {
|
|
1424
|
-
switch (event.key) {
|
|
1425
|
-
case 'Left':
|
|
1426
|
-
case 'ArrowLeft':
|
|
1427
|
-
__classPrivateFieldGet(this, _SkyTokensComponent__messageStream, "f").next({
|
|
1428
|
-
type: SkyTokensMessageType.FocusPreviousToken,
|
|
1429
|
-
});
|
|
1430
|
-
event.preventDefault();
|
|
1431
|
-
break;
|
|
1432
|
-
case 'Right':
|
|
1433
|
-
case 'ArrowRight':
|
|
1434
|
-
__classPrivateFieldGet(this, _SkyTokensComponent__messageStream, "f").next({
|
|
1435
|
-
type: SkyTokensMessageType.FocusNextToken,
|
|
1436
|
-
});
|
|
1437
|
-
event.preventDefault();
|
|
1438
|
-
break;
|
|
1439
|
-
}
|
|
1440
|
-
}
|
|
1441
|
-
}
|
|
1442
|
-
selectToken(token) {
|
|
1443
|
-
if (!this.disabled) {
|
|
1444
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_notifyTokenSelected).call(this, token);
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
removeToken(token) {
|
|
1448
|
-
this.tokens = this.tokens.filter((t) => t !== token);
|
|
1449
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_changeDetector, "f").detectChanges();
|
|
1450
|
-
}
|
|
1451
|
-
}
|
|
1452
|
-
_SkyTokensComponent__disabled = new WeakMap(), _SkyTokensComponent__dismissible = new WeakMap(), _SkyTokensComponent__focusable = new WeakMap(), _SkyTokensComponent__tokens = new WeakMap(), _SkyTokensComponent__displayWith = new WeakMap(), _SkyTokensComponent_messageStreamSub = new WeakMap(), _SkyTokensComponent_ngUnsubscribe = new WeakMap(), _SkyTokensComponent_changeDetector = new WeakMap(), _SkyTokensComponent__activeIndex = new WeakMap(), _SkyTokensComponent__messageStream = new WeakMap(), _SkyTokensComponent_instances = new WeakSet(), _SkyTokensComponent_focusPreviousToken = function _SkyTokensComponent_focusPreviousToken() {
|
|
1453
|
-
this.activeIndex--;
|
|
1454
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
|
|
1455
|
-
}, _SkyTokensComponent_focusNextToken = function _SkyTokensComponent_focusNextToken() {
|
|
1456
|
-
this.activeIndex++;
|
|
1457
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
|
|
1458
|
-
}, _SkyTokensComponent_focusLastToken = function _SkyTokensComponent_focusLastToken() {
|
|
1459
|
-
if (this.tokenComponents) {
|
|
1460
|
-
this.activeIndex = this.tokenComponents.length - 1;
|
|
1461
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
|
|
1462
|
-
}
|
|
1463
|
-
}, _SkyTokensComponent_focusActiveToken = function _SkyTokensComponent_focusActiveToken() {
|
|
1464
|
-
if (this.tokenComponents) {
|
|
1465
|
-
const tokenComponent = this.tokenComponents.find((_comp, i) => {
|
|
1466
|
-
return this.activeIndex === i;
|
|
1467
|
-
});
|
|
1468
|
-
if (tokenComponent) {
|
|
1469
|
-
tokenComponent.focusElement();
|
|
1470
|
-
}
|
|
1471
|
-
}
|
|
1472
|
-
}, _SkyTokensComponent_removeActiveToken = function _SkyTokensComponent_removeActiveToken() {
|
|
1473
|
-
const token = this.tokens[this.activeIndex];
|
|
1474
|
-
if (token) {
|
|
1475
|
-
this.removeToken(token);
|
|
1476
|
-
}
|
|
1477
|
-
}, _SkyTokensComponent_initMessageStream = function _SkyTokensComponent_initMessageStream() {
|
|
1478
|
-
if (__classPrivateFieldGet(this, _SkyTokensComponent_messageStreamSub, "f")) {
|
|
1479
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_messageStreamSub, "f").unsubscribe();
|
|
1480
|
-
}
|
|
1481
|
-
__classPrivateFieldSet(this, _SkyTokensComponent_messageStreamSub, this.messageStream
|
|
1482
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTokensComponent_ngUnsubscribe, "f")))
|
|
1483
|
-
.subscribe((message) => {
|
|
1484
|
-
switch (message.type) {
|
|
1485
|
-
case SkyTokensMessageType.FocusLastToken:
|
|
1486
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusLastToken).call(this);
|
|
1487
|
-
break;
|
|
1488
|
-
case SkyTokensMessageType.FocusActiveToken:
|
|
1489
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
|
|
1490
|
-
break;
|
|
1491
|
-
case SkyTokensMessageType.FocusPreviousToken:
|
|
1492
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusPreviousToken).call(this);
|
|
1493
|
-
break;
|
|
1494
|
-
case SkyTokensMessageType.FocusNextToken:
|
|
1495
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusNextToken).call(this);
|
|
1496
|
-
break;
|
|
1497
|
-
case SkyTokensMessageType.RemoveActiveToken:
|
|
1498
|
-
__classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_removeActiveToken).call(this);
|
|
1499
|
-
break;
|
|
1500
|
-
}
|
|
1501
|
-
}), "f");
|
|
1502
|
-
}, _SkyTokensComponent_notifyTokenSelected = function _SkyTokensComponent_notifyTokenSelected(token) {
|
|
1503
|
-
this.tokenSelected.emit({
|
|
1504
|
-
token,
|
|
1505
|
-
});
|
|
1506
|
-
};
|
|
1507
|
-
SkyTokensComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokensComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1508
|
-
SkyTokensComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTokensComponent, selector: "sky-tokens", inputs: { disabled: "disabled", dismissible: "dismissible", displayWith: "displayWith", trackWith: "trackWith", focusable: "focusable", tokens: "tokens", messageStream: "messageStream" }, outputs: { focusIndexOverRange: "focusIndexOverRange", focusIndexUnderRange: "focusIndexUnderRange", tokenSelected: "tokenSelected", tokensChange: "tokensChange", tokensRendered: "tokensRendered" }, viewQueries: [{ propertyName: "tokenComponents", predicate: SkyTokenComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens.length ? 'grid' : null\"\n>\n <!--\n The role must use square brackets otherwise Angular sets the native 'role'\n attribute as well as the input attribute of the token, which fails accessibility rules.\n -->\n <sky-token\n *ngFor=\"let token of tokens; let i = index; trackBy: trackTokenFn\"\n [@.disabled]=\"!trackWith\"\n [@dismiss]\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\n [role]=\"'row'\"\n (@dismiss.done)=\"animationDone()\"\n (dismiss)=\"removeToken(token)\"\n (click)=\"onTokenClick(token)\"\n (keydown)=\"onTokenKeyDown($event)\"\n (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n (tokenFocus)=\"activeIndex = i\"\n >\n {{ token.value[displayWith] }}\n </sky-token>\n <div class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SkyTokenComponent, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable", "role"], outputs: ["dismiss", "tokenFocus"] }], animations: [
|
|
1509
|
-
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
1510
|
-
trigger('dismiss', [
|
|
1511
|
-
transition(':enter', [
|
|
1512
|
-
style({
|
|
1513
|
-
opacity: 0,
|
|
1514
|
-
width: 0,
|
|
1515
|
-
}),
|
|
1516
|
-
animate('150ms ease-in', style({
|
|
1517
|
-
opacity: 1,
|
|
1518
|
-
width: '*',
|
|
1519
|
-
})),
|
|
1520
|
-
]),
|
|
1521
|
-
transition(':leave', [
|
|
1522
|
-
animate('150ms ease-in', style({
|
|
1523
|
-
opacity: 0,
|
|
1524
|
-
width: 0,
|
|
1525
|
-
})),
|
|
1526
|
-
]),
|
|
1527
|
-
]),
|
|
1528
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokensComponent, decorators: [{
|
|
1530
|
-
type: Component,
|
|
1531
|
-
args: [{ selector: 'sky-tokens', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1532
|
-
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
1533
|
-
trigger('dismiss', [
|
|
1534
|
-
transition(':enter', [
|
|
1535
|
-
style({
|
|
1536
|
-
opacity: 0,
|
|
1537
|
-
width: 0,
|
|
1538
|
-
}),
|
|
1539
|
-
animate('150ms ease-in', style({
|
|
1540
|
-
opacity: 1,
|
|
1541
|
-
width: '*',
|
|
1542
|
-
})),
|
|
1543
|
-
]),
|
|
1544
|
-
transition(':leave', [
|
|
1545
|
-
animate('150ms ease-in', style({
|
|
1546
|
-
opacity: 0,
|
|
1547
|
-
width: 0,
|
|
1548
|
-
})),
|
|
1549
|
-
]),
|
|
1550
|
-
]),
|
|
1551
|
-
], template: "<div\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens.length ? 'grid' : null\"\n>\n <!--\n The role must use square brackets otherwise Angular sets the native 'role'\n attribute as well as the input attribute of the token, which fails accessibility rules.\n -->\n <sky-token\n *ngFor=\"let token of tokens; let i = index; trackBy: trackTokenFn\"\n [@.disabled]=\"!trackWith\"\n [@dismiss]\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\n [role]=\"'row'\"\n (@dismiss.done)=\"animationDone()\"\n (dismiss)=\"removeToken(token)\"\n (click)=\"onTokenClick(token)\"\n (keydown)=\"onTokenKeyDown($event)\"\n (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n (tokenFocus)=\"activeIndex = i\"\n >\n {{ token.value[displayWith] }}\n </sky-token>\n <div class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"] }]
|
|
1552
|
-
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
|
|
1553
|
-
type: Input
|
|
1554
|
-
}], dismissible: [{
|
|
1555
|
-
type: Input
|
|
1556
|
-
}], displayWith: [{
|
|
1557
|
-
type: Input
|
|
1558
|
-
}], trackWith: [{
|
|
1559
|
-
type: Input
|
|
1560
|
-
}], focusable: [{
|
|
1561
|
-
type: Input
|
|
1562
|
-
}], tokens: [{
|
|
1563
|
-
type: Input
|
|
1564
|
-
}], messageStream: [{
|
|
1565
|
-
type: Input
|
|
1566
|
-
}], focusIndexOverRange: [{
|
|
1567
|
-
type: Output
|
|
1568
|
-
}], focusIndexUnderRange: [{
|
|
1569
|
-
type: Output
|
|
1570
|
-
}], tokenSelected: [{
|
|
1571
|
-
type: Output
|
|
1572
|
-
}], tokensChange: [{
|
|
1573
|
-
type: Output
|
|
1574
|
-
}], tokensRendered: [{
|
|
1575
|
-
type: Output
|
|
1576
|
-
}], tokenComponents: [{
|
|
1577
|
-
type: ViewChildren,
|
|
1578
|
-
args: [SkyTokenComponent]
|
|
1579
|
-
}] } });
|
|
1580
|
-
|
|
1581
|
-
class SkyTokensModule {
|
|
1582
|
-
}
|
|
1583
|
-
SkyTokensModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokensModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1584
|
-
SkyTokensModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTokensModule, declarations: [SkyTokenComponent, SkyTokensComponent], imports: [CommonModule,
|
|
1585
|
-
SkyI18nModule,
|
|
1586
|
-
SkyIconModule,
|
|
1587
|
-
SkyIndicatorsResourcesModule], exports: [SkyTokenComponent, SkyTokensComponent] });
|
|
1588
|
-
SkyTokensModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokensModule, imports: [CommonModule,
|
|
1589
|
-
SkyI18nModule,
|
|
1590
|
-
SkyIconModule,
|
|
1591
|
-
SkyIndicatorsResourcesModule] });
|
|
1592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTokensModule, decorators: [{
|
|
1593
|
-
type: NgModule,
|
|
1594
|
-
args: [{
|
|
1595
|
-
declarations: [SkyTokenComponent, SkyTokensComponent],
|
|
1596
|
-
imports: [
|
|
1597
|
-
CommonModule,
|
|
1598
|
-
SkyI18nModule,
|
|
1599
|
-
SkyIconModule,
|
|
1600
|
-
SkyIndicatorsResourcesModule,
|
|
1601
|
-
],
|
|
1602
|
-
exports: [SkyTokenComponent, SkyTokensComponent],
|
|
1603
|
-
}]
|
|
1604
|
-
}] });
|
|
1605
|
-
|
|
1606
|
-
var _SkyWaitAdapterService_instances, _SkyWaitAdapterService_focusableElements, _SkyWaitAdapterService_renderer, _SkyWaitAdapterService_focusNextElement, _SkyWaitAdapterService_isShift, _SkyWaitAdapterService_isElementHidden, _SkyWaitAdapterService_isElementBusyOrHidden, _SkyWaitAdapterService_clearDocumentFocus, _SkyWaitAdapterService_getFocusableElements, _SkyWaitAdapterService_clearListeners;
|
|
1607
|
-
const busyElements = {};
|
|
1608
|
-
// Need to add the following to classes which contain static methods.
|
|
1609
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
1610
|
-
/**
|
|
1611
|
-
* @internal
|
|
1612
|
-
* @dynamic
|
|
1613
|
-
*/
|
|
1614
|
-
class SkyWaitAdapterService {
|
|
1615
|
-
constructor(rendererFactory) {
|
|
1616
|
-
_SkyWaitAdapterService_instances.add(this);
|
|
1617
|
-
_SkyWaitAdapterService_focusableElements.set(this, void 0);
|
|
1618
|
-
_SkyWaitAdapterService_renderer.set(this, void 0);
|
|
1619
|
-
__classPrivateFieldSet(this, _SkyWaitAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
|
|
1620
|
-
}
|
|
1621
|
-
ngOnDestroy() {
|
|
1622
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearListeners).call(this);
|
|
1623
|
-
}
|
|
1624
|
-
setWaitBounds(waitEl) {
|
|
1625
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").setStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
|
|
1626
|
-
}
|
|
1627
|
-
removeWaitBounds(waitEl) {
|
|
1628
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").removeStyle(waitEl.nativeElement.parentElement, 'position');
|
|
1629
|
-
}
|
|
1630
|
-
setBusyState(waitEl, isFullPage, isWaiting, isNonBlocking, waitComponentId) {
|
|
1631
|
-
var _a;
|
|
1632
|
-
const busyEl = isFullPage
|
|
1633
|
-
? document.body
|
|
1634
|
-
: waitEl.nativeElement.parentElement;
|
|
1635
|
-
if (!isNonBlocking) {
|
|
1636
|
-
if (isWaiting) {
|
|
1637
|
-
let restoreFocusElement = undefined;
|
|
1638
|
-
let restoreFocusCheckElement = undefined;
|
|
1639
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").setAttribute(busyEl, 'aria-busy', 'true');
|
|
1640
|
-
// Remove focus from page when full page blocking wait
|
|
1641
|
-
if (isFullPage || busyEl.contains(document.activeElement)) {
|
|
1642
|
-
if (document.activeElement !== document.body) {
|
|
1643
|
-
restoreFocusElement = document.activeElement;
|
|
1644
|
-
}
|
|
1645
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
|
|
1646
|
-
restoreFocusCheckElement = document.activeElement;
|
|
1647
|
-
}
|
|
1648
|
-
if (isFullPage) {
|
|
1649
|
-
SkyWaitAdapterService.isPageWaitActive = true;
|
|
1650
|
-
const endListenerFunc = __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").listen(document.body, 'keydown', (event) => {
|
|
1651
|
-
/*istanbul ignore else */
|
|
1652
|
-
if (event.key) {
|
|
1653
|
-
/* istanbul ignore else */
|
|
1654
|
-
if (event.key.toLowerCase() === 'tab') {
|
|
1655
|
-
event.target.blur();
|
|
1656
|
-
event.preventDefault();
|
|
1657
|
-
event.stopPropagation();
|
|
1658
|
-
event.stopImmediatePropagation();
|
|
1659
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
|
|
1660
|
-
}
|
|
1661
|
-
}
|
|
1662
|
-
});
|
|
1663
|
-
if (waitComponentId) {
|
|
1664
|
-
busyElements[waitComponentId] = {
|
|
1665
|
-
listener: endListenerFunc,
|
|
1666
|
-
busyEl: undefined,
|
|
1667
|
-
restoreFocusElement,
|
|
1668
|
-
restoreFocusCheckElement,
|
|
1669
|
-
};
|
|
1670
|
-
}
|
|
1671
|
-
}
|
|
1672
|
-
else {
|
|
1673
|
-
const endListenerFunc = __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").listen(busyEl, 'focusin', (event) => {
|
|
1674
|
-
/* istanbul ignore else */
|
|
1675
|
-
if (!isNonBlocking) {
|
|
1676
|
-
event.preventDefault();
|
|
1677
|
-
event.stopPropagation();
|
|
1678
|
-
event.stopImmediatePropagation();
|
|
1679
|
-
if (SkyWaitAdapterService.isPageWaitActive) {
|
|
1680
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
|
|
1681
|
-
}
|
|
1682
|
-
else {
|
|
1683
|
-
// Propagate tab navigation if attempted into waited element
|
|
1684
|
-
const target = event.target;
|
|
1685
|
-
if (target) {
|
|
1686
|
-
target.blur();
|
|
1687
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_focusNextElement).call(this, target, __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isShift).call(this, event));
|
|
1688
|
-
}
|
|
1689
|
-
}
|
|
1690
|
-
}
|
|
1691
|
-
});
|
|
1692
|
-
if (waitComponentId) {
|
|
1693
|
-
busyElements[waitComponentId] = {
|
|
1694
|
-
listener: endListenerFunc,
|
|
1695
|
-
busyEl,
|
|
1696
|
-
restoreFocusElement,
|
|
1697
|
-
restoreFocusCheckElement,
|
|
1698
|
-
};
|
|
1699
|
-
}
|
|
1700
|
-
}
|
|
1701
|
-
}
|
|
1702
|
-
else {
|
|
1703
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").removeAttribute(busyEl, 'aria-busy');
|
|
1704
|
-
if (isFullPage) {
|
|
1705
|
-
SkyWaitAdapterService.isPageWaitActive = false;
|
|
1706
|
-
}
|
|
1707
|
-
if (waitComponentId && waitComponentId in busyElements) {
|
|
1708
|
-
const busyElement = busyElements[waitComponentId];
|
|
1709
|
-
busyElement.listener();
|
|
1710
|
-
// If there is a restore focus element and the focus has not moved, restore focus.
|
|
1711
|
-
if (busyElement.restoreFocusCheckElement === document.activeElement) {
|
|
1712
|
-
(_a = busyElement.restoreFocusElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1713
|
-
}
|
|
1714
|
-
delete busyElements[waitComponentId];
|
|
1715
|
-
}
|
|
1716
|
-
}
|
|
1717
|
-
}
|
|
1718
|
-
}
|
|
1719
|
-
}
|
|
1720
|
-
_SkyWaitAdapterService_focusableElements = new WeakMap(), _SkyWaitAdapterService_renderer = new WeakMap(), _SkyWaitAdapterService_instances = new WeakSet(), _SkyWaitAdapterService_focusNextElement = function _SkyWaitAdapterService_focusNextElement(targetElement, shiftKey) {
|
|
1721
|
-
const focusable = __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_getFocusableElements).call(this);
|
|
1722
|
-
// If shift tab, go in the other direction
|
|
1723
|
-
const modifier = shiftKey ? -1 : 1;
|
|
1724
|
-
// Find the next navigable element that isn't waiting
|
|
1725
|
-
const startingIndex = focusable.indexOf(targetElement);
|
|
1726
|
-
let curIndex = startingIndex + modifier;
|
|
1727
|
-
while (focusable[curIndex] &&
|
|
1728
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
|
|
1729
|
-
curIndex += modifier;
|
|
1730
|
-
}
|
|
1731
|
-
if (focusable[curIndex] &&
|
|
1732
|
-
!__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
|
|
1733
|
-
focusable[curIndex].focus();
|
|
1734
|
-
}
|
|
1735
|
-
else {
|
|
1736
|
-
// Try wrapping the navigation
|
|
1737
|
-
/* istanbul ignore next */
|
|
1738
|
-
/* sanity check */
|
|
1739
|
-
curIndex = modifier > 0 ? 0 : focusable.length - 1;
|
|
1740
|
-
while (curIndex !== startingIndex &&
|
|
1741
|
-
focusable[curIndex] &&
|
|
1742
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
|
|
1743
|
-
/* istanbul ignore next */
|
|
1744
|
-
/* sanity check */
|
|
1745
|
-
curIndex += modifier;
|
|
1746
|
-
}
|
|
1747
|
-
/* istanbul ignore else */
|
|
1748
|
-
/* sanity check */
|
|
1749
|
-
if (focusable[curIndex] &&
|
|
1750
|
-
!__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
|
|
1751
|
-
focusable[curIndex].focus();
|
|
1752
|
-
}
|
|
1753
|
-
else {
|
|
1754
|
-
// No valid target, wipe focus
|
|
1755
|
-
__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
|
|
1756
|
-
}
|
|
1757
|
-
}
|
|
1758
|
-
// clear focusableElements list
|
|
1759
|
-
__classPrivateFieldSet(this, _SkyWaitAdapterService_focusableElements, undefined, "f");
|
|
1760
|
-
}, _SkyWaitAdapterService_isShift = function _SkyWaitAdapterService_isShift(event) {
|
|
1761
|
-
// Determine if shift+tab was used based on element order
|
|
1762
|
-
const elements = __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_getFocusableElements).call(this).filter((elem) => !__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementHidden).call(this, elem));
|
|
1763
|
-
const previousInd = elements.indexOf(event.relatedTarget);
|
|
1764
|
-
const currentInd = elements.indexOf(event.target);
|
|
1765
|
-
return (previousInd === currentInd + 1 ||
|
|
1766
|
-
(previousInd === 0 && currentInd === elements.length - 1) ||
|
|
1767
|
-
previousInd > currentInd ||
|
|
1768
|
-
!event.relatedTarget);
|
|
1769
|
-
}, _SkyWaitAdapterService_isElementHidden = function _SkyWaitAdapterService_isElementHidden(element) {
|
|
1770
|
-
const style = window.getComputedStyle(element);
|
|
1771
|
-
return style.display === 'none' || style.visibility === 'hidden';
|
|
1772
|
-
}, _SkyWaitAdapterService_isElementBusyOrHidden = function _SkyWaitAdapterService_isElementBusyOrHidden(element) {
|
|
1773
|
-
if (__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementHidden).call(this, element)) {
|
|
1774
|
-
return true;
|
|
1775
|
-
}
|
|
1776
|
-
for (const key of Object.keys(busyElements)) {
|
|
1777
|
-
const parentElement = busyElements[key].busyEl;
|
|
1778
|
-
if (parentElement && parentElement.contains(element)) {
|
|
1779
|
-
return true;
|
|
1780
|
-
}
|
|
1781
|
-
}
|
|
1782
|
-
return false;
|
|
1783
|
-
}, _SkyWaitAdapterService_clearDocumentFocus = function _SkyWaitAdapterService_clearDocumentFocus() {
|
|
1784
|
-
const activeElement = document.activeElement;
|
|
1785
|
-
/* istanbul ignore else */
|
|
1786
|
-
if (activeElement) {
|
|
1787
|
-
activeElement.blur();
|
|
1788
|
-
}
|
|
1789
|
-
document.body.focus();
|
|
1790
|
-
}, _SkyWaitAdapterService_getFocusableElements = function _SkyWaitAdapterService_getFocusableElements() {
|
|
1791
|
-
// Keep this cached so we can reduce queries
|
|
1792
|
-
if (__classPrivateFieldGet(this, _SkyWaitAdapterService_focusableElements, "f")) {
|
|
1793
|
-
return __classPrivateFieldGet(this, _SkyWaitAdapterService_focusableElements, "f");
|
|
1794
|
-
}
|
|
1795
|
-
// Select all possible focusable elements
|
|
1796
|
-
const focusableElements = 'a[href], ' +
|
|
1797
|
-
'area[href], ' +
|
|
1798
|
-
"input:not([disabled]):not([tabindex='-1']), " +
|
|
1799
|
-
"button:not([disabled]):not([tabindex='-1']), " +
|
|
1800
|
-
"select:not([disabled]):not([tabindex='-1']), " +
|
|
1801
|
-
"textarea:not([disabled]):not([tabindex='-1']), " +
|
|
1802
|
-
'iframe, object, embed, ' +
|
|
1803
|
-
"*[tabindex]:not([tabindex='-1']), " +
|
|
1804
|
-
'*[contenteditable=true]';
|
|
1805
|
-
__classPrivateFieldSet(this, _SkyWaitAdapterService_focusableElements, Array.prototype.filter.call(document.body.querySelectorAll(focusableElements), (element) => {
|
|
1806
|
-
return (element.offsetWidth > 0 ||
|
|
1807
|
-
element.offsetHeight > 0 ||
|
|
1808
|
-
element === document.activeElement);
|
|
1809
|
-
}), "f");
|
|
1810
|
-
return __classPrivateFieldGet(this, _SkyWaitAdapterService_focusableElements, "f");
|
|
1811
|
-
}, _SkyWaitAdapterService_clearListeners = function _SkyWaitAdapterService_clearListeners() {
|
|
1812
|
-
SkyWaitAdapterService.isPageWaitActive = false;
|
|
1813
|
-
for (const key of Object.keys(busyElements)) {
|
|
1814
|
-
busyElements[key].listener();
|
|
1815
|
-
delete busyElements[key];
|
|
1816
|
-
}
|
|
1817
|
-
};
|
|
1818
|
-
SkyWaitAdapterService.isPageWaitActive = false;
|
|
1819
|
-
SkyWaitAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1820
|
-
SkyWaitAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitAdapterService });
|
|
1821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitAdapterService, decorators: [{
|
|
1822
|
-
type: Injectable
|
|
1823
|
-
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
|
|
1824
|
-
|
|
1825
|
-
var _SkyWaitComponent_instances, _SkyWaitComponent_customAriaLabel, _SkyWaitComponent_customScreenReaderCompletedText, _SkyWaitComponent_id, _SkyWaitComponent_elRef, _SkyWaitComponent_adapterService, _SkyWaitComponent_liveAnnouncer, _SkyWaitComponent_resourceSvc, _SkyWaitComponent_ngUnsubscribe, _SkyWaitComponent__isFullPage, _SkyWaitComponent__isNonBlocking, _SkyWaitComponent__isWaiting, _SkyWaitComponent_publishAriaLabel, _SkyWaitComponent_publishScreenReaderCompletedText;
|
|
1826
|
-
let nextId = 0;
|
|
1827
|
-
class SkyWaitComponent {
|
|
1828
|
-
constructor() {
|
|
1829
|
-
_SkyWaitComponent_instances.add(this);
|
|
1830
|
-
this.ariaLabelStream = new BehaviorSubject('');
|
|
1831
|
-
this.ariaLiveText = '';
|
|
1832
|
-
this.screenReaderCompletedTextStream = new BehaviorSubject('');
|
|
1833
|
-
_SkyWaitComponent_customAriaLabel.set(this, void 0);
|
|
1834
|
-
_SkyWaitComponent_customScreenReaderCompletedText.set(this, void 0);
|
|
1835
|
-
_SkyWaitComponent_id.set(this, `sky-wait-${++nextId}`);
|
|
1836
|
-
_SkyWaitComponent_elRef.set(this, inject(ElementRef));
|
|
1837
|
-
_SkyWaitComponent_adapterService.set(this, inject(SkyWaitAdapterService));
|
|
1838
|
-
_SkyWaitComponent_liveAnnouncer.set(this, inject(SkyLiveAnnouncerService));
|
|
1839
|
-
_SkyWaitComponent_resourceSvc.set(this, inject(SkyLibResourcesService));
|
|
1840
|
-
_SkyWaitComponent_ngUnsubscribe.set(this, new Subject());
|
|
1841
|
-
_SkyWaitComponent__isFullPage.set(this, void 0);
|
|
1842
|
-
_SkyWaitComponent__isNonBlocking.set(this, void 0);
|
|
1843
|
-
_SkyWaitComponent__isWaiting.set(this, void 0);
|
|
1844
|
-
}
|
|
1845
|
-
/**
|
|
1846
|
-
* The ARIA label for the wait icon.
|
|
1847
|
-
* This sets the icon's `aria-label` attribute to provide a text equivalent for screen readers
|
|
1848
|
-
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) when an element or page loads and when users tab to a wait icon.
|
|
1849
|
-
* The default value varies based on whether the wait is for an element or a page and whether it is a blocking wait. For example, the default for a page-level blocking wait is "Page loading. Please wait."
|
|
1850
|
-
* For element-level waits, we recommend that consumers overwrite the default to describe the specific element.
|
|
1851
|
-
* "For more information, see the Design tab and the [WAI-ARIA `aria-label` definition](https://www.w3.org/TR/wai-aria/#aria-label).
|
|
1852
|
-
*/
|
|
1853
|
-
set ariaLabel(value) {
|
|
1854
|
-
__classPrivateFieldSet(this, _SkyWaitComponent_customAriaLabel, value, "f");
|
|
1855
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
|
|
1856
|
-
}
|
|
1857
|
-
/**
|
|
1858
|
-
* When set to `true`, wait indication appears on the parent element of the `sky-wait` component.
|
|
1859
|
-
*/
|
|
1860
|
-
set isWaiting(value) {
|
|
1861
|
-
if (!this.isFullPage) {
|
|
1862
|
-
if (value) {
|
|
1863
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
|
|
1864
|
-
}
|
|
1865
|
-
else {
|
|
1866
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").removeWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
|
|
1867
|
-
}
|
|
1868
|
-
}
|
|
1869
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setBusyState(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"), !!this.isFullPage, !!value, !!this.isNonBlocking, __classPrivateFieldGet(this, _SkyWaitComponent_id, "f"));
|
|
1870
|
-
if (value) {
|
|
1871
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_liveAnnouncer, "f").announce(this.ariaLabelStream.getValue());
|
|
1872
|
-
}
|
|
1873
|
-
else if (__classPrivateFieldGet(this, _SkyWaitComponent__isWaiting, "f")) {
|
|
1874
|
-
// NOTE: This should only happen if the wait was previously waiting and no longer is waiting.
|
|
1875
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_liveAnnouncer, "f").announce(this.screenReaderCompletedTextStream.getValue());
|
|
1876
|
-
}
|
|
1877
|
-
__classPrivateFieldSet(this, _SkyWaitComponent__isWaiting, value, "f");
|
|
1878
|
-
}
|
|
1879
|
-
get isWaiting() {
|
|
1880
|
-
return __classPrivateFieldGet(this, _SkyWaitComponent__isWaiting, "f");
|
|
1881
|
-
}
|
|
1882
|
-
/**
|
|
1883
|
-
* When set to `true`, wait indication appears on the page level instead of the
|
|
1884
|
-
* parent element level. We recommend that you use the `beginBlockingPageWait` or
|
|
1885
|
-
* `beginNonBlockingPageWait` functions of the `SkyWaitService` instead of setting this
|
|
1886
|
-
* on the component level.
|
|
1887
|
-
* @default false
|
|
1888
|
-
*/
|
|
1889
|
-
set isFullPage(value) {
|
|
1890
|
-
/* istanbul ignore else: untestable */
|
|
1891
|
-
if (value) {
|
|
1892
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").removeWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
|
|
1893
|
-
}
|
|
1894
|
-
else if (this.isWaiting) {
|
|
1895
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
|
|
1896
|
-
}
|
|
1897
|
-
__classPrivateFieldSet(this, _SkyWaitComponent__isFullPage, value, "f");
|
|
1898
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
|
|
1899
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishScreenReaderCompletedText).call(this);
|
|
1900
|
-
}
|
|
1901
|
-
get isFullPage() {
|
|
1902
|
-
return __classPrivateFieldGet(this, _SkyWaitComponent__isFullPage, "f");
|
|
1903
|
-
}
|
|
1904
|
-
/**
|
|
1905
|
-
* When set to `true`, wait indication appears in the bottom left corner of the element
|
|
1906
|
-
* instead of hiding the entire parent element.
|
|
1907
|
-
* @default false
|
|
1908
|
-
*/
|
|
1909
|
-
set isNonBlocking(value) {
|
|
1910
|
-
__classPrivateFieldSet(this, _SkyWaitComponent__isNonBlocking, value, "f");
|
|
1911
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
|
|
1912
|
-
}
|
|
1913
|
-
get isNonBlocking() {
|
|
1914
|
-
return __classPrivateFieldGet(this, _SkyWaitComponent__isNonBlocking, "f");
|
|
1915
|
-
}
|
|
1916
|
-
/**
|
|
1917
|
-
* Screen reader text [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) when the wait toggles off.
|
|
1918
|
-
* The default varies based on whether the wait is for an element or a page.
|
|
1919
|
-
* For example, the default for a page-level wait is "Page loading complete."
|
|
1920
|
-
* For element-level waits, we recommend that consumers overwrite the default to describe the specific element.
|
|
1921
|
-
* For more information, see the Design tab and the [WCAG documentation on status messages](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html).
|
|
1922
|
-
*/
|
|
1923
|
-
set screenReaderCompletedText(value) {
|
|
1924
|
-
__classPrivateFieldSet(this, _SkyWaitComponent_customScreenReaderCompletedText, value, "f");
|
|
1925
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishScreenReaderCompletedText).call(this);
|
|
1926
|
-
}
|
|
1927
|
-
ngOnInit() {
|
|
1928
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
|
|
1929
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishScreenReaderCompletedText).call(this);
|
|
1930
|
-
}
|
|
1931
|
-
ngOnDestroy() {
|
|
1932
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f").next();
|
|
1933
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f").complete();
|
|
1934
|
-
}
|
|
1935
|
-
}
|
|
1936
|
-
_SkyWaitComponent_customAriaLabel = new WeakMap(), _SkyWaitComponent_customScreenReaderCompletedText = new WeakMap(), _SkyWaitComponent_id = new WeakMap(), _SkyWaitComponent_elRef = new WeakMap(), _SkyWaitComponent_adapterService = new WeakMap(), _SkyWaitComponent_liveAnnouncer = new WeakMap(), _SkyWaitComponent_resourceSvc = new WeakMap(), _SkyWaitComponent_ngUnsubscribe = new WeakMap(), _SkyWaitComponent__isFullPage = new WeakMap(), _SkyWaitComponent__isNonBlocking = new WeakMap(), _SkyWaitComponent__isWaiting = new WeakMap(), _SkyWaitComponent_instances = new WeakSet(), _SkyWaitComponent_publishAriaLabel = function _SkyWaitComponent_publishAriaLabel() {
|
|
1937
|
-
if (__classPrivateFieldGet(this, _SkyWaitComponent_customAriaLabel, "f")) {
|
|
1938
|
-
this.ariaLabelStream.next(__classPrivateFieldGet(this, _SkyWaitComponent_customAriaLabel, "f"));
|
|
1939
|
-
}
|
|
1940
|
-
else {
|
|
1941
|
-
const type = this.isFullPage ? '_page' : '';
|
|
1942
|
-
const blocking = this.isNonBlocking ? '' : '_blocking';
|
|
1943
|
-
const key = `skyux_wait${type}${blocking}_aria_alt_text`;
|
|
1944
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_resourceSvc, "f")
|
|
1945
|
-
.getString(key)
|
|
1946
|
-
.pipe(take(1), takeUntil(__classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f")))
|
|
1947
|
-
.subscribe((value) => {
|
|
1948
|
-
this.ariaLabelStream.next(value);
|
|
1949
|
-
});
|
|
1950
|
-
}
|
|
1951
|
-
}, _SkyWaitComponent_publishScreenReaderCompletedText = function _SkyWaitComponent_publishScreenReaderCompletedText() {
|
|
1952
|
-
if (__classPrivateFieldGet(this, _SkyWaitComponent_customScreenReaderCompletedText, "f")) {
|
|
1953
|
-
this.screenReaderCompletedTextStream.next(__classPrivateFieldGet(this, _SkyWaitComponent_customScreenReaderCompletedText, "f"));
|
|
1954
|
-
}
|
|
1955
|
-
else {
|
|
1956
|
-
const type = this.isFullPage ? '_page' : '';
|
|
1957
|
-
const key = `skyux_wait${type}_screen_reader_completed_text`;
|
|
1958
|
-
__classPrivateFieldGet(this, _SkyWaitComponent_resourceSvc, "f")
|
|
1959
|
-
.getString(key)
|
|
1960
|
-
.pipe(take(1), takeUntil(__classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f")))
|
|
1961
|
-
.subscribe((value) => {
|
|
1962
|
-
this.screenReaderCompletedTextStream.next(value);
|
|
1963
|
-
});
|
|
1964
|
-
}
|
|
1965
|
-
};
|
|
1966
|
-
SkyWaitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1967
|
-
SkyWaitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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" }] });
|
|
1968
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitComponent, decorators: [{
|
|
1969
|
-
type: Component,
|
|
1970
|
-
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"] }]
|
|
1971
|
-
}], propDecorators: { ariaLabel: [{
|
|
1972
|
-
type: Input
|
|
1973
|
-
}], isWaiting: [{
|
|
1974
|
-
type: Input
|
|
1975
|
-
}], isFullPage: [{
|
|
1976
|
-
type: Input
|
|
1977
|
-
}], isNonBlocking: [{
|
|
1978
|
-
type: Input
|
|
1979
|
-
}], screenReaderCompletedText: [{
|
|
1980
|
-
type: Input
|
|
1981
|
-
}] } });
|
|
1982
|
-
|
|
1983
|
-
/**
|
|
1984
|
-
* @internal
|
|
1985
|
-
*/
|
|
1986
|
-
class SkyWaitPageComponent {
|
|
1987
|
-
}
|
|
1988
|
-
SkyWaitPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1989
|
-
SkyWaitPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"] }] });
|
|
1990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitPageComponent, decorators: [{
|
|
1991
|
-
type: Component,
|
|
1992
|
-
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"] }]
|
|
1993
|
-
}], propDecorators: { hasBlockingWait: [{
|
|
1994
|
-
type: Input
|
|
1995
|
-
}], hasNonBlockingWait: [{
|
|
1996
|
-
type: Input
|
|
1997
|
-
}] } });
|
|
1998
|
-
|
|
1999
|
-
class SkyWaitModule {
|
|
2000
|
-
}
|
|
2001
|
-
SkyWaitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2002
|
-
SkyWaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitModule, declarations: [SkyWaitComponent, SkyWaitPageComponent], imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule], exports: [SkyWaitComponent] });
|
|
2003
|
-
SkyWaitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitModule, imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule] });
|
|
2004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitModule, decorators: [{
|
|
2005
|
-
type: NgModule,
|
|
2006
|
-
args: [{
|
|
2007
|
-
declarations: [SkyWaitComponent, SkyWaitPageComponent],
|
|
2008
|
-
imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule],
|
|
2009
|
-
exports: [SkyWaitComponent],
|
|
2010
|
-
}]
|
|
2011
|
-
}] });
|
|
2012
|
-
|
|
2013
|
-
var _SkyWaitService_instances, _SkyWaitService_windowSvc, _SkyWaitService_dynamicComponentService, _SkyWaitService_setWaitComponentProperties, _SkyWaitService_beginPageWait, _SkyWaitService_endPageWait, _SkyWaitService_clearPageWait;
|
|
2014
|
-
let waitComponent;
|
|
2015
|
-
let waitComponentRef;
|
|
2016
|
-
let pageWaitBlockingCount = 0;
|
|
2017
|
-
let pageWaitNonBlockingCount = 0;
|
|
2018
|
-
// Need to add the following to classes which contain static methods.
|
|
2019
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
2020
|
-
// @dynamic
|
|
2021
|
-
class SkyWaitService {
|
|
2022
|
-
constructor() {
|
|
2023
|
-
_SkyWaitService_instances.add(this);
|
|
2024
|
-
_SkyWaitService_windowSvc.set(this, inject(SkyAppWindowRef));
|
|
2025
|
-
_SkyWaitService_dynamicComponentService.set(this, inject(SkyDynamicComponentService));
|
|
2026
|
-
}
|
|
2027
|
-
/**
|
|
2028
|
-
* Starts a blocking page wait on the page.
|
|
2029
|
-
*/
|
|
2030
|
-
beginBlockingPageWait() {
|
|
2031
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_beginPageWait).call(this, true);
|
|
2032
|
-
}
|
|
2033
|
-
/**
|
|
2034
|
-
* Starts a non-blocking page wait on the page.
|
|
2035
|
-
*/
|
|
2036
|
-
beginNonBlockingPageWait() {
|
|
2037
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_beginPageWait).call(this, false);
|
|
2038
|
-
}
|
|
2039
|
-
/**
|
|
2040
|
-
* Ends a blocking page wait on the page. Blocking page wait indication
|
|
2041
|
-
* is removed when all running blocking page waits are ended.
|
|
2042
|
-
*/
|
|
2043
|
-
endBlockingPageWait() {
|
|
2044
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_endPageWait).call(this, true);
|
|
2045
|
-
}
|
|
2046
|
-
/**
|
|
2047
|
-
* Ends a non-blocking page wait on the page. Non-blocking page wait indication
|
|
2048
|
-
* is removed when all running non-blocking page waits are ended.
|
|
2049
|
-
*/
|
|
2050
|
-
endNonBlockingPageWait() {
|
|
2051
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_endPageWait).call(this, false);
|
|
2052
|
-
}
|
|
2053
|
-
/**
|
|
2054
|
-
* Clears all blocking and non-blocking page waits on the page.
|
|
2055
|
-
*/
|
|
2056
|
-
clearAllPageWaits() {
|
|
2057
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_clearPageWait).call(this, true);
|
|
2058
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_clearPageWait).call(this, false);
|
|
2059
|
-
}
|
|
2060
|
-
/**
|
|
2061
|
-
* @internal
|
|
2062
|
-
*/
|
|
2063
|
-
dispose() {
|
|
2064
|
-
if (waitComponent) {
|
|
2065
|
-
waitComponent = undefined;
|
|
2066
|
-
pageWaitBlockingCount = 0;
|
|
2067
|
-
pageWaitNonBlockingCount = 0;
|
|
2068
|
-
__classPrivateFieldGet(this, _SkyWaitService_dynamicComponentService, "f").removeComponent(waitComponentRef);
|
|
2069
|
-
}
|
|
2070
|
-
}
|
|
2071
|
-
/**
|
|
2072
|
-
* Launches a page wait and automatically stops when the specific asynchronous event completes.
|
|
2073
|
-
*/
|
|
2074
|
-
blockingWrap(observable) {
|
|
2075
|
-
return defer(() => {
|
|
2076
|
-
this.beginBlockingPageWait();
|
|
2077
|
-
return observable.pipe(finalize(() => this.endBlockingPageWait()));
|
|
2078
|
-
});
|
|
2079
|
-
}
|
|
2080
|
-
/**
|
|
2081
|
-
* Launches a non-blocking page wait and automatically stops when the specific
|
|
2082
|
-
* asynchronous event completes.
|
|
2083
|
-
*/
|
|
2084
|
-
nonBlockingWrap(observable) {
|
|
2085
|
-
return defer(() => {
|
|
2086
|
-
this.beginNonBlockingPageWait();
|
|
2087
|
-
return observable.pipe(finalize(() => this.endNonBlockingPageWait()));
|
|
2088
|
-
});
|
|
2089
|
-
}
|
|
2090
|
-
}
|
|
2091
|
-
_SkyWaitService_windowSvc = new WeakMap(), _SkyWaitService_dynamicComponentService = new WeakMap(), _SkyWaitService_instances = new WeakSet(), _SkyWaitService_setWaitComponentProperties = function _SkyWaitService_setWaitComponentProperties(isBlocking) {
|
|
2092
|
-
if (waitComponent) {
|
|
2093
|
-
if (isBlocking) {
|
|
2094
|
-
waitComponent.hasBlockingWait = true;
|
|
2095
|
-
pageWaitBlockingCount++;
|
|
2096
|
-
}
|
|
2097
|
-
else {
|
|
2098
|
-
waitComponent.hasNonBlockingWait = true;
|
|
2099
|
-
pageWaitNonBlockingCount++;
|
|
2100
|
-
}
|
|
2101
|
-
}
|
|
2102
|
-
}, _SkyWaitService_beginPageWait = function _SkyWaitService_beginPageWait(isBlocking) {
|
|
2103
|
-
if (!waitComponent) {
|
|
2104
|
-
/*
|
|
2105
|
-
Dynamic component creation needs to be done in a timeout to prevent ApplicationRef from
|
|
2106
|
-
crashing when wait service is called in Angular lifecycle functions.
|
|
2107
|
-
*/
|
|
2108
|
-
__classPrivateFieldGet(this, _SkyWaitService_windowSvc, "f").nativeWindow.setTimeout(() => {
|
|
2109
|
-
// Ensuring here that we recheck this after the setTimeout is over so that we don't clash
|
|
2110
|
-
// with any other waits that are created.
|
|
2111
|
-
if (!waitComponent) {
|
|
2112
|
-
waitComponentRef = __classPrivateFieldGet(this, _SkyWaitService_dynamicComponentService, "f").createComponent(SkyWaitPageComponent, { location: SkyDynamicComponentLocation.BodyBottom });
|
|
2113
|
-
waitComponent = waitComponentRef.instance;
|
|
2114
|
-
}
|
|
2115
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_setWaitComponentProperties).call(this, isBlocking);
|
|
2116
|
-
});
|
|
2117
|
-
}
|
|
2118
|
-
else {
|
|
2119
|
-
__classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_setWaitComponentProperties).call(this, isBlocking);
|
|
2120
|
-
}
|
|
2121
|
-
}, _SkyWaitService_endPageWait = function _SkyWaitService_endPageWait(isBlocking) {
|
|
2122
|
-
/*
|
|
2123
|
-
Needs to yield so that wait creation can finish
|
|
2124
|
-
before it is dismissed in the event of a race.
|
|
2125
|
-
*/
|
|
2126
|
-
__classPrivateFieldGet(this, _SkyWaitService_windowSvc, "f").nativeWindow.setTimeout(() => {
|
|
2127
|
-
if (waitComponent) {
|
|
2128
|
-
if (isBlocking) {
|
|
2129
|
-
if (pageWaitBlockingCount > 0) {
|
|
2130
|
-
pageWaitBlockingCount--;
|
|
2131
|
-
}
|
|
2132
|
-
if (pageWaitBlockingCount < 1) {
|
|
2133
|
-
waitComponent.hasBlockingWait = false;
|
|
2134
|
-
}
|
|
2135
|
-
}
|
|
2136
|
-
else {
|
|
2137
|
-
if (pageWaitNonBlockingCount > 0) {
|
|
2138
|
-
pageWaitNonBlockingCount--;
|
|
2139
|
-
}
|
|
2140
|
-
if (pageWaitNonBlockingCount < 1) {
|
|
2141
|
-
waitComponent.hasNonBlockingWait = false;
|
|
2142
|
-
}
|
|
2143
|
-
}
|
|
2144
|
-
}
|
|
2145
|
-
});
|
|
2146
|
-
}, _SkyWaitService_clearPageWait = function _SkyWaitService_clearPageWait(isBlocking) {
|
|
2147
|
-
if (waitComponent) {
|
|
2148
|
-
if (isBlocking) {
|
|
2149
|
-
pageWaitBlockingCount = 0;
|
|
2150
|
-
waitComponent.hasBlockingWait = false;
|
|
2151
|
-
}
|
|
2152
|
-
else {
|
|
2153
|
-
pageWaitNonBlockingCount = 0;
|
|
2154
|
-
waitComponent.hasNonBlockingWait = false;
|
|
2155
|
-
}
|
|
2156
|
-
}
|
|
2157
|
-
};
|
|
2158
|
-
SkyWaitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2159
|
-
SkyWaitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitService, providedIn: 'root' });
|
|
2160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyWaitService, decorators: [{
|
|
2161
|
-
type: Injectable,
|
|
2162
|
-
args: [{
|
|
2163
|
-
providedIn: 'root',
|
|
2164
|
-
}]
|
|
2165
|
-
}] });
|
|
2166
|
-
|
|
2167
|
-
/**
|
|
2168
|
-
* Generated bundle index. Do not edit.
|
|
2169
|
-
*/
|
|
2170
|
-
|
|
2171
|
-
export { SkyAlertModule, SkyChevronModule, SkyExpansionIndicatorModule, SkyHelpInlineModule, SkyIconModule, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as λ1, SkyStatusIndicatorComponent as λ10, SkyTextHighlightDirective as λ11, SkyTokenComponent as λ12, SkyTokensComponent as λ13, SkyWaitComponent as λ14, SkyExpansionIndicatorComponent as λ15, SkyChevronComponent as λ2, SkyHelpInlineComponent as λ3, SkyIconComponent as λ4, SkyIconStackComponent as λ5, SkyKeyInfoLabelComponent as λ6, SkyKeyInfoValueComponent as λ7, SkyKeyInfoComponent as λ8, SkyLabelComponent as λ9 };
|
|
2172
|
-
//# sourceMappingURL=skyux-indicators.mjs.map
|