@skyux/indicators 5.0.0-beta.1 → 5.0.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/LICENSE +21 -0
- package/bundles/skyux-indicators-testing.umd.js +15 -11
- package/bundles/skyux-indicators-testing.umd.js.map +1 -1
- package/bundles/skyux-indicators.umd.js +1113 -858
- package/bundles/skyux-indicators.umd.js.map +1 -1
- package/documentation.json +6097 -0
- package/esm2015/modules/alert/alert.component.js +27 -24
- package/esm2015/modules/alert/alert.module.js +31 -18
- package/esm2015/modules/chevron/chevron.component.js +24 -24
- package/esm2015/modules/chevron/chevron.module.js +29 -18
- package/esm2015/modules/help-inline/help-inline.component.js +20 -15
- package/esm2015/modules/help-inline/help-inline.module.js +31 -18
- package/esm2015/modules/icon/icon-class-list.pipe.js +13 -14
- package/esm2015/modules/icon/icon-resolver.service.js +11 -15
- package/esm2015/modules/icon/icon-stack-item.js +2 -1
- package/esm2015/modules/icon/icon-stack.component.js +22 -21
- package/esm2015/modules/icon/icon.component.js +27 -28
- package/esm2015/modules/icon/icon.module.js +30 -20
- package/esm2015/modules/icon/types/icon-type.js +2 -1
- package/esm2015/modules/icon/types/icon-variant-type.js +2 -1
- package/esm2015/modules/key-info/key-info-label.component.js +13 -11
- package/esm2015/modules/key-info/key-info-value.component.js +13 -11
- package/esm2015/modules/key-info/key-info.component.js +17 -15
- package/esm2015/modules/key-info/key-info.module.js +30 -21
- package/esm2015/modules/label/label-type.js +2 -1
- package/esm2015/modules/label/label.component.js +19 -15
- package/esm2015/modules/label/label.module.js +24 -17
- package/esm2015/modules/shared/indicator-description-type.js +2 -1
- package/esm2015/modules/shared/indicator-icon-type.js +2 -1
- package/esm2015/modules/shared/indicator-icon-utility.js +1 -1
- package/esm2015/modules/shared/indicator-icon.js +2 -1
- package/esm2015/modules/shared/sky-indicators-resources.module.js +41 -0
- package/esm2015/modules/status-indicator/status-indicator.component.js +26 -28
- package/esm2015/modules/status-indicator/status-indicator.module.js +29 -18
- package/esm2015/modules/text-highlight/text-highlight.directive.js +25 -25
- package/esm2015/modules/text-highlight/text-highlight.module.js +23 -18
- package/esm2015/modules/tokens/token.component.js +32 -40
- package/esm2015/modules/tokens/tokens.component.js +86 -74
- package/esm2015/modules/tokens/tokens.module.js +33 -20
- package/esm2015/modules/tokens/types/token-selected-event-args.js +2 -1
- package/esm2015/modules/tokens/types/token.js +2 -1
- package/esm2015/modules/tokens/types/tokens-message-type.js +1 -1
- package/esm2015/modules/tokens/types/tokens-message.js +2 -1
- package/esm2015/modules/wait/wait-adapter.service.js +29 -27
- package/esm2015/modules/wait/wait-page-adapter.service.js +15 -12
- package/esm2015/modules/wait/wait-page.component.js +19 -18
- package/esm2015/modules/wait/wait.component.js +35 -36
- package/esm2015/modules/wait/wait.module.js +32 -23
- package/esm2015/modules/wait/wait.service.js +37 -46
- package/esm2015/public-api.js +36 -0
- package/esm2015/skyux-indicators.js +2 -23
- package/esm2015/testing/alert-fixture.js +1 -1
- package/esm2015/testing/label-fixture.js +1 -1
- package/esm2015/testing/public-api.js +4 -0
- package/esm2015/testing/skyux-indicators-testing.js +2 -2
- package/esm2015/testing/wait-fixture.js +1 -1
- package/fesm2015/skyux-indicators-testing.js.map +1 -1
- package/fesm2015/skyux-indicators.js +752 -616
- package/fesm2015/skyux-indicators.js.map +1 -1
- package/modules/alert/alert.component.d.ts +3 -0
- package/modules/alert/alert.module.d.ts +10 -0
- package/modules/chevron/chevron.component.d.ts +4 -1
- package/modules/chevron/chevron.module.d.ts +9 -0
- package/modules/help-inline/help-inline.component.d.ts +3 -0
- package/modules/help-inline/help-inline.module.d.ts +10 -0
- package/modules/icon/icon-class-list.pipe.d.ts +3 -0
- package/modules/icon/icon-resolver.service.d.ts +3 -0
- package/modules/icon/icon-stack.component.d.ts +3 -0
- package/modules/icon/icon.component.d.ts +3 -0
- package/modules/icon/icon.module.d.ts +9 -0
- package/modules/key-info/key-info-label.component.d.ts +3 -0
- package/modules/key-info/key-info-value.component.d.ts +3 -0
- package/modules/key-info/key-info.component.d.ts +3 -0
- package/modules/key-info/key-info.module.d.ts +8 -0
- package/modules/label/label.component.d.ts +3 -0
- package/modules/label/label.module.d.ts +7 -0
- package/modules/shared/sky-indicators-resources.module.d.ts +14 -0
- package/modules/status-indicator/status-indicator.component.d.ts +3 -0
- package/modules/status-indicator/status-indicator.module.d.ts +9 -0
- package/modules/text-highlight/text-highlight.directive.d.ts +3 -0
- package/modules/text-highlight/text-highlight.module.d.ts +5 -0
- package/modules/tokens/token.component.d.ts +4 -1
- package/modules/tokens/tokens.component.d.ts +3 -0
- package/modules/tokens/tokens.module.d.ts +10 -0
- package/modules/wait/wait-adapter.service.d.ts +3 -0
- package/modules/wait/wait-page-adapter.service.d.ts +3 -0
- package/modules/wait/wait-page.component.d.ts +3 -0
- package/modules/wait/wait.component.d.ts +3 -0
- package/modules/wait/wait.module.d.ts +9 -0
- package/modules/wait/wait.service.d.ts +3 -0
- package/package.json +12 -27
- package/public-api.d.ts +33 -0
- package/skyux-indicators.d.ts +2 -22
- package/testing/package.json +2 -5
- package/testing/{public_api.d.ts → public-api.d.ts} +0 -0
- package/testing/skyux-indicators-testing.d.ts +2 -1
- package/CHANGELOG.md +0 -203
- package/bundles/skyux-indicators-testing.umd.min.js +0 -2
- package/bundles/skyux-indicators-testing.umd.min.js.map +0 -1
- package/bundles/skyux-indicators.umd.min.js +0 -16
- package/bundles/skyux-indicators.umd.min.js.map +0 -1
- package/esm2015/modules/shared/indicators-resources.module.js +0 -17
- package/esm2015/plugin-resources/indicators-resources-provider.js +0 -16
- package/esm2015/public_api.js +0 -13
- package/esm2015/testing/public_api.js +0 -4
- package/esm5/modules/alert/alert.component.js +0 -62
- package/esm5/modules/alert/alert.module.js +0 -32
- package/esm5/modules/chevron/chevron.component.js +0 -35
- package/esm5/modules/chevron/chevron.module.js +0 -30
- package/esm5/modules/help-inline/help-inline.component.js +0 -26
- package/esm5/modules/help-inline/help-inline.module.js +0 -32
- package/esm5/modules/icon/icon-class-list.pipe.js +0 -39
- package/esm5/modules/icon/icon-resolver.service.js +0 -57
- package/esm5/modules/icon/icon-stack-item.js +0 -1
- package/esm5/modules/icon/icon-stack.component.js +0 -25
- package/esm5/modules/icon/icon.component.js +0 -38
- package/esm5/modules/icon/icon.module.js +0 -31
- package/esm5/modules/icon/types/icon-type.js +0 -1
- package/esm5/modules/icon/types/icon-variant-type.js +0 -1
- package/esm5/modules/key-info/key-info-label.component.js +0 -19
- package/esm5/modules/key-info/key-info-value.component.js +0 -19
- package/esm5/modules/key-info/key-info.component.js +0 -25
- package/esm5/modules/key-info/key-info.module.js +0 -30
- package/esm5/modules/label/label-type.js +0 -1
- package/esm5/modules/label/label.component.js +0 -41
- package/esm5/modules/label/label.module.js +0 -26
- package/esm5/modules/shared/indicator-description-type.js +0 -1
- package/esm5/modules/shared/indicator-icon-type.js +0 -1
- package/esm5/modules/shared/indicator-icon-utility.js +0 -45
- package/esm5/modules/shared/indicator-icon.js +0 -1
- package/esm5/modules/shared/indicators-resources.module.js +0 -20
- package/esm5/modules/status-indicator/status-indicator.component.js +0 -111
- package/esm5/modules/status-indicator/status-indicator.module.js +0 -30
- package/esm5/modules/text-highlight/text-highlight.directive.js +0 -134
- package/esm5/modules/text-highlight/text-highlight.module.js +0 -24
- package/esm5/modules/tokens/token.component.js +0 -134
- package/esm5/modules/tokens/tokens.component.js +0 -325
- package/esm5/modules/tokens/tokens.module.js +0 -33
- package/esm5/modules/tokens/types/token-selected-event-args.js +0 -1
- package/esm5/modules/tokens/types/token.js +0 -1
- package/esm5/modules/tokens/types/tokens-message-type.js +0 -24
- package/esm5/modules/tokens/types/tokens-message.js +0 -1
- package/esm5/modules/wait/wait-adapter.service.js +0 -219
- package/esm5/modules/wait/wait-page-adapter.service.js +0 -25
- package/esm5/modules/wait/wait-page.component.js +0 -25
- package/esm5/modules/wait/wait.component.js +0 -107
- package/esm5/modules/wait/wait.module.js +0 -34
- package/esm5/modules/wait/wait.service.js +0 -176
- package/esm5/plugin-resources/indicators-resources-provider.js +0 -17
- package/esm5/public_api.js +0 -13
- package/esm5/skyux-indicators.js +0 -26
- package/esm5/testing/alert-fixture.js +0 -85
- package/esm5/testing/label-fixture.js +0 -50
- package/esm5/testing/public_api.js +0 -4
- package/esm5/testing/skyux-indicators-testing.js +0 -5
- package/esm5/testing/wait-fixture.js +0 -42
- package/fesm5/skyux-indicators-testing.js +0 -178
- package/fesm5/skyux-indicators-testing.js.map +0 -1
- package/fesm5/skyux-indicators.js +0 -1892
- package/fesm5/skyux-indicators.js.map +0 -1
- package/modules/shared/indicators-resources.module.d.ts +0 -2
- package/plugin-resources/indicators-resources-provider.d.ts +0 -5
- package/public_api.d.ts +0 -19
- package/skyux-indicators.metadata.json +0 -1
- package/src/assets/img/guidelines/alert/alert-anatomy.png +0 -0
- package/src/assets/img/guidelines/alert/alert-layout-1.png +0 -0
- package/src/assets/img/guidelines/alert/alert-layout-2.png +0 -0
- package/src/assets/img/guidelines/alert/alert-layout-3.png +0 -0
- package/src/assets/img/guidelines/alert/alert-option-1.png +0 -0
- package/src/assets/img/guidelines/alert/alert-type-1.png +0 -0
- package/src/assets/img/guidelines/alert/alert-type-2.png +0 -0
- package/src/assets/img/guidelines/alert/alert-type-3.png +0 -0
- package/src/assets/img/guidelines/alert/alert-type-4.png +0 -0
- package/src/assets/img/guidelines/alert/alert-usage-1.png +0 -0
- package/src/assets/img/guidelines/alert/alert-usage-2.png +0 -0
- package/src/assets/img/guidelines/alert/alert-usage-3.png +0 -0
- package/src/assets/img/guidelines/alert/alert-usage-4.png +0 -0
- package/src/assets/img/guidelines/alert/alert-usage-5.png +0 -0
- package/src/assets/img/guidelines/alert/alert-usage-6.png +0 -0
- package/src/assets/img/guidelines/key-info/horizontal-layout.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-anatomy.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-usage-1.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-usage-2.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-usage-3.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-usage-4.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-usage-5.png +0 -0
- package/src/assets/img/guidelines/key-info/key-info-usage-6.png +0 -0
- package/src/assets/img/guidelines/key-info/vertical-layout.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-anatomy.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-1.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-2-5.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-2.5.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-2.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-3.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-4.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-5.png +0 -0
- package/src/assets/img/guidelines/status-indicator/status-indicator-usage-6.png +0 -0
- package/src/assets/locales/resources_en_US.json +0 -54
- package/testing/skyux-indicators-testing.metadata.json +0 -1
|
@@ -1,1892 +0,0 @@
|
|
|
1
|
-
import { __decorate, __values, __param } from 'tslib';
|
|
2
|
-
import { Injectable, NgModule, Input, Component, ChangeDetectionStrategy, ɵɵdefineInjectable, ɵɵinject, Pipe, EventEmitter, Output, ChangeDetectorRef, ElementRef, Directive, ViewChildren, RendererFactory2, Optional, ComponentFactoryResolver, ApplicationRef } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
-
import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, SkyLibResourcesService } from '@skyux/i18n';
|
|
5
|
-
import { SkyThemeIconManifestService, SkyThemeIconManifestModule, SkyThemeModule } from '@skyux/theme';
|
|
6
|
-
import { MutationObserverService, SkyAppWindowRef } from '@skyux/core';
|
|
7
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
8
|
-
import { Subject, BehaviorSubject, defer } from 'rxjs';
|
|
9
|
-
import { takeUntil, finalize } from 'rxjs/operators';
|
|
10
|
-
|
|
11
|
-
var SkyIndicatorsResourcesProvider = /** @class */ (function () {
|
|
12
|
-
function SkyIndicatorsResourcesProvider() {
|
|
13
|
-
this.resources = { "EN-US": { "skyux_alert_close": "Close the alert", "skyux_chevron_collapse": "Collapse", "skyux_chevron_expand": "Expand", "skyux_help_inline_button_title": "Show help content", "skyux_status_indicator_sr_completed": "Completed:", "skyux_status_indicator_sr_error": "Error:", "skyux_status_indicator_sr_important_info": "Important information:", "skyux_status_indicator_sr_warning": "Warning:", "skyux_tokens_dismiss_button_title": "Remove item", "skyux_wait_aria_alt_text": "Loading.", "skyux_wait_blocking_aria_alt_text": "Loading. Please wait.", "skyux_wait_page_aria_alt_text": "Page loading.", "skyux_wait_page_blocking_aria_alt_text": "Page loading. Please wait." } };
|
|
14
|
-
}
|
|
15
|
-
SkyIndicatorsResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
16
|
-
return getStringForLocale(this.resources, localeInfo.locale, name);
|
|
17
|
-
};
|
|
18
|
-
SkyIndicatorsResourcesProvider = __decorate([
|
|
19
|
-
Injectable()
|
|
20
|
-
], SkyIndicatorsResourcesProvider);
|
|
21
|
-
return SkyIndicatorsResourcesProvider;
|
|
22
|
-
}());
|
|
23
|
-
|
|
24
|
-
var SkyIndicatorsResourcesModule = /** @class */ (function () {
|
|
25
|
-
function SkyIndicatorsResourcesModule() {
|
|
26
|
-
}
|
|
27
|
-
SkyIndicatorsResourcesModule = __decorate([
|
|
28
|
-
NgModule({
|
|
29
|
-
providers: [{
|
|
30
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
31
|
-
useClass: SkyIndicatorsResourcesProvider,
|
|
32
|
-
multi: true
|
|
33
|
-
}]
|
|
34
|
-
})
|
|
35
|
-
], SkyIndicatorsResourcesModule);
|
|
36
|
-
return SkyIndicatorsResourcesModule;
|
|
37
|
-
}());
|
|
38
|
-
|
|
39
|
-
var SkyIconComponent = /** @class */ (function () {
|
|
40
|
-
function SkyIconComponent() {
|
|
41
|
-
/**
|
|
42
|
-
* Specifies the type of icon to display. Specifying `fa` will display a Font Awesome icon,
|
|
43
|
-
* while specifying `skyux` will display an icon from the custom SKY UX icon font. Note that
|
|
44
|
-
* the custom SKY UX icon font is currently in beta.
|
|
45
|
-
*/
|
|
46
|
-
this.iconType = 'fa';
|
|
47
|
-
}
|
|
48
|
-
__decorate([
|
|
49
|
-
Input()
|
|
50
|
-
], SkyIconComponent.prototype, "icon", void 0);
|
|
51
|
-
__decorate([
|
|
52
|
-
Input()
|
|
53
|
-
], SkyIconComponent.prototype, "iconType", void 0);
|
|
54
|
-
__decorate([
|
|
55
|
-
Input()
|
|
56
|
-
], SkyIconComponent.prototype, "size", void 0);
|
|
57
|
-
__decorate([
|
|
58
|
-
Input()
|
|
59
|
-
], SkyIconComponent.prototype, "fixedWidth", void 0);
|
|
60
|
-
__decorate([
|
|
61
|
-
Input()
|
|
62
|
-
], SkyIconComponent.prototype, "variant", void 0);
|
|
63
|
-
SkyIconComponent = __decorate([
|
|
64
|
-
Component({
|
|
65
|
-
selector: 'sky-icon',
|
|
66
|
-
template: "<i *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [ngClass]=\"icon | skyIconClassList:iconType:size:fixedWidth:variant\"\n>\n</i>\n",
|
|
67
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
68
|
-
styles: [":host{display:inline-block}i{display:inherit}"]
|
|
69
|
-
})
|
|
70
|
-
], SkyIconComponent);
|
|
71
|
-
return SkyIconComponent;
|
|
72
|
-
}());
|
|
73
|
-
|
|
74
|
-
var SkyIconStackComponent = /** @class */ (function () {
|
|
75
|
-
function SkyIconStackComponent() {
|
|
76
|
-
}
|
|
77
|
-
__decorate([
|
|
78
|
-
Input()
|
|
79
|
-
], SkyIconStackComponent.prototype, "size", void 0);
|
|
80
|
-
__decorate([
|
|
81
|
-
Input()
|
|
82
|
-
], SkyIconStackComponent.prototype, "baseIcon", void 0);
|
|
83
|
-
__decorate([
|
|
84
|
-
Input()
|
|
85
|
-
], SkyIconStackComponent.prototype, "topIcon", void 0);
|
|
86
|
-
SkyIconStackComponent = __decorate([
|
|
87
|
-
Component({
|
|
88
|
-
selector: 'sky-icon-stack',
|
|
89
|
-
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 *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"baseIcon.icon | skyIconClassList:baseIcon.iconType\"\n ></i>\n <i *ngIf=\"topIcon\"\n class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n [ngClass]=\"topIcon.icon | skyIconClassList:topIcon.iconType\"\n ></i>\n</span>\n",
|
|
90
|
-
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-theme-modern.sky-theme-mode-dark .sky-icon-inverse,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}"]
|
|
91
|
-
})
|
|
92
|
-
], SkyIconStackComponent);
|
|
93
|
-
return SkyIconStackComponent;
|
|
94
|
-
}());
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* @internal
|
|
98
|
-
*/
|
|
99
|
-
var SkyIconResolverService = /** @class */ (function () {
|
|
100
|
-
function SkyIconResolverService(manifestSvc) {
|
|
101
|
-
var e_1, _a;
|
|
102
|
-
this.glyphMap = new Map();
|
|
103
|
-
try {
|
|
104
|
-
// Map the icons by name for more efficient lookup.
|
|
105
|
-
for (var _b = __values(manifestSvc.getManifest().glyphs), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
106
|
-
var glyph = _c.value;
|
|
107
|
-
this.glyphMap.set(glyph.name, glyph);
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
111
|
-
finally {
|
|
112
|
-
try {
|
|
113
|
-
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
114
|
-
}
|
|
115
|
-
finally { if (e_1) throw e_1.error; }
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
SkyIconResolverService.prototype.resolveIcon = function (iconName, variant) {
|
|
119
|
-
var variantIconName = variant && iconName + "-" + variant;
|
|
120
|
-
if (variantIconName && this.glyphMap.has(variantIconName)) {
|
|
121
|
-
// A variant was specified and exists; return it.
|
|
122
|
-
return variantIconName;
|
|
123
|
-
}
|
|
124
|
-
if (variant !== 'line' && !this.glyphMap.has(iconName)) {
|
|
125
|
-
// Either the solid variant was specified and doesn't exist, or no variant was
|
|
126
|
-
// specified and a non-variant doesn't exist; fall back to the line variant.
|
|
127
|
-
var lineIconName = iconName + "-line";
|
|
128
|
-
if (this.glyphMap.has(lineIconName)) {
|
|
129
|
-
return lineIconName;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
// Fall back to the icon name as-is.
|
|
133
|
-
return iconName;
|
|
134
|
-
};
|
|
135
|
-
SkyIconResolverService.ctorParameters = function () { return [
|
|
136
|
-
{ type: SkyThemeIconManifestService }
|
|
137
|
-
]; };
|
|
138
|
-
SkyIconResolverService.ɵprov = ɵɵdefineInjectable({ factory: function SkyIconResolverService_Factory() { return new SkyIconResolverService(ɵɵinject(SkyThemeIconManifestService)); }, token: SkyIconResolverService, providedIn: "root" });
|
|
139
|
-
SkyIconResolverService = __decorate([
|
|
140
|
-
Injectable({
|
|
141
|
-
providedIn: 'root'
|
|
142
|
-
})
|
|
143
|
-
], SkyIconResolverService);
|
|
144
|
-
return SkyIconResolverService;
|
|
145
|
-
}());
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* @internal
|
|
149
|
-
*/
|
|
150
|
-
var SkyIconClassListPipe = /** @class */ (function () {
|
|
151
|
-
function SkyIconClassListPipe(resolver) {
|
|
152
|
-
this.resolver = resolver;
|
|
153
|
-
}
|
|
154
|
-
SkyIconClassListPipe.prototype.transform = function (icon, iconType, size, fixedWidth, variant) {
|
|
155
|
-
var classList;
|
|
156
|
-
if (iconType === 'skyux') {
|
|
157
|
-
var resolvedIcon = this.resolver.resolveIcon(icon, variant);
|
|
158
|
-
classList = ['sky-i-' + resolvedIcon];
|
|
159
|
-
}
|
|
160
|
-
else {
|
|
161
|
-
classList = ['fa', 'fa-' + icon];
|
|
162
|
-
}
|
|
163
|
-
if (size) {
|
|
164
|
-
classList.push('fa-' + size);
|
|
165
|
-
}
|
|
166
|
-
if (fixedWidth) {
|
|
167
|
-
classList.push('fa-fw');
|
|
168
|
-
}
|
|
169
|
-
return classList;
|
|
170
|
-
};
|
|
171
|
-
SkyIconClassListPipe.ctorParameters = function () { return [
|
|
172
|
-
{ type: SkyIconResolverService }
|
|
173
|
-
]; };
|
|
174
|
-
SkyIconClassListPipe = __decorate([
|
|
175
|
-
Pipe({
|
|
176
|
-
name: 'skyIconClassList'
|
|
177
|
-
})
|
|
178
|
-
], SkyIconClassListPipe);
|
|
179
|
-
return SkyIconClassListPipe;
|
|
180
|
-
}());
|
|
181
|
-
|
|
182
|
-
var SkyIconModule = /** @class */ (function () {
|
|
183
|
-
function SkyIconModule() {
|
|
184
|
-
}
|
|
185
|
-
SkyIconModule = __decorate([
|
|
186
|
-
NgModule({
|
|
187
|
-
declarations: [
|
|
188
|
-
SkyIconClassListPipe,
|
|
189
|
-
SkyIconComponent,
|
|
190
|
-
SkyIconStackComponent
|
|
191
|
-
],
|
|
192
|
-
imports: [
|
|
193
|
-
CommonModule,
|
|
194
|
-
SkyThemeIconManifestModule
|
|
195
|
-
],
|
|
196
|
-
exports: [
|
|
197
|
-
SkyIconComponent,
|
|
198
|
-
SkyIconStackComponent
|
|
199
|
-
]
|
|
200
|
-
})
|
|
201
|
-
], SkyIconModule);
|
|
202
|
-
return SkyIconModule;
|
|
203
|
-
}());
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* @internl
|
|
207
|
-
*/
|
|
208
|
-
var SkyIndicatorIconUtility = /** @class */ (function () {
|
|
209
|
-
function SkyIndicatorIconUtility() {
|
|
210
|
-
}
|
|
211
|
-
SkyIndicatorIconUtility.getIconsForType = function (indicatorType) {
|
|
212
|
-
var icon;
|
|
213
|
-
var baseIcon;
|
|
214
|
-
var topIcon;
|
|
215
|
-
// tslint:disable-next-line: switch-default
|
|
216
|
-
switch (indicatorType) {
|
|
217
|
-
case 'danger':
|
|
218
|
-
case 'warning':
|
|
219
|
-
icon = 'warning';
|
|
220
|
-
baseIcon = 'triangle-solid';
|
|
221
|
-
topIcon = 'exclamation';
|
|
222
|
-
break;
|
|
223
|
-
case 'info':
|
|
224
|
-
icon = 'exclamation-circle';
|
|
225
|
-
baseIcon = 'circle-solid';
|
|
226
|
-
topIcon = 'help-i';
|
|
227
|
-
break;
|
|
228
|
-
case 'success':
|
|
229
|
-
icon = 'check';
|
|
230
|
-
baseIcon = 'circle-solid';
|
|
231
|
-
topIcon = 'check';
|
|
232
|
-
break;
|
|
233
|
-
}
|
|
234
|
-
return {
|
|
235
|
-
defaultThemeIcon: icon,
|
|
236
|
-
modernThemeBaseIcon: {
|
|
237
|
-
icon: baseIcon,
|
|
238
|
-
iconType: 'skyux'
|
|
239
|
-
},
|
|
240
|
-
modernThemeTopIcon: {
|
|
241
|
-
icon: topIcon,
|
|
242
|
-
iconType: 'skyux'
|
|
243
|
-
}
|
|
244
|
-
};
|
|
245
|
-
};
|
|
246
|
-
return SkyIndicatorIconUtility;
|
|
247
|
-
}());
|
|
248
|
-
|
|
249
|
-
var ALERT_TYPE_DEFAULT = 'warning';
|
|
250
|
-
var SkyAlertComponent = /** @class */ (function () {
|
|
251
|
-
function SkyAlertComponent() {
|
|
252
|
-
/**
|
|
253
|
-
* Fires when users close the alert.
|
|
254
|
-
*/
|
|
255
|
-
this.closedChange = new EventEmitter();
|
|
256
|
-
}
|
|
257
|
-
Object.defineProperty(SkyAlertComponent.prototype, "alertType", {
|
|
258
|
-
get: function () {
|
|
259
|
-
return this._alertType || ALERT_TYPE_DEFAULT;
|
|
260
|
-
},
|
|
261
|
-
/**
|
|
262
|
-
* Specifies a style for the alert to determine the icon and background color.
|
|
263
|
-
* The valid options are `danger`, `info`, `success`, and `warning`.
|
|
264
|
-
* @default "warning"
|
|
265
|
-
*/
|
|
266
|
-
set: function (value) {
|
|
267
|
-
this._alertType = value;
|
|
268
|
-
this.updateAlertIcon();
|
|
269
|
-
},
|
|
270
|
-
enumerable: true,
|
|
271
|
-
configurable: true
|
|
272
|
-
});
|
|
273
|
-
SkyAlertComponent.prototype.ngOnInit = function () {
|
|
274
|
-
this.updateAlertIcon();
|
|
275
|
-
};
|
|
276
|
-
SkyAlertComponent.prototype.close = function () {
|
|
277
|
-
this.closed = true;
|
|
278
|
-
this.closedChange.emit(true);
|
|
279
|
-
};
|
|
280
|
-
SkyAlertComponent.prototype.updateAlertIcon = function () {
|
|
281
|
-
var indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.alertType);
|
|
282
|
-
this.alertBaseIcon = indicatorIcon.modernThemeBaseIcon;
|
|
283
|
-
this.alertTopIcon = indicatorIcon.modernThemeTopIcon;
|
|
284
|
-
};
|
|
285
|
-
__decorate([
|
|
286
|
-
Input()
|
|
287
|
-
], SkyAlertComponent.prototype, "alertType", null);
|
|
288
|
-
__decorate([
|
|
289
|
-
Input()
|
|
290
|
-
], SkyAlertComponent.prototype, "closeable", void 0);
|
|
291
|
-
__decorate([
|
|
292
|
-
Input()
|
|
293
|
-
], SkyAlertComponent.prototype, "closed", void 0);
|
|
294
|
-
__decorate([
|
|
295
|
-
Output()
|
|
296
|
-
], SkyAlertComponent.prototype, "closedChange", void 0);
|
|
297
|
-
SkyAlertComponent = __decorate([
|
|
298
|
-
Component({
|
|
299
|
-
selector: 'sky-alert',
|
|
300
|
-
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': alertType === 'info',\n 'sky-alert-success': alertType === 'success',\n 'sky-alert-warning': alertType === 'warning',\n 'sky-alert-danger': alertType === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div\n aria-hidden=\"true\"\n class=\"sky-alert-icon-theme-modern\"\n >\n <sky-icon-stack\n [baseIcon]=\"alertBaseIcon\"\n [topIcon]=\"alertTopIcon\"\n >\n </sky-icon-stack>\n </div>\n <div\n class=\"sky-alert-content\"\n >\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\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-alert-close-icon-theme-default\"\n icon=\"close\"\n >\n </sky-icon>\n <sky-icon\n class=\"sky-alert-close-icon-theme-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"2x\"\n >\n </sky-icon>\n </span>\n </button>\n</div>\n",
|
|
301
|
-
styles: ["@charset \"UTF-8\";.sky-alert{padding:0 10px;margin-bottom:20px;border-left:30px solid;color:#212327;display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding-top:10px;padding-bottom:10px;width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:rgba(33,35,39,.8);text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:#212327}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info{background-color:#81d4f7;border-color:#00b4f1}.sky-alert.sky-alert-info:before{content:\"\uF06A\";font-family:FontAwesome;margin-left:-31px;margin-right:20px;color:#fff}.sky-alert.sky-alert-success{background-color:#b7da9b;border-color:#72bf44}.sky-alert.sky-alert-success:before{content:\"\uF00C\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-warning{background-color:#ffd597;border-color:#fbb034}.sky-alert.sky-alert-warning:before{content:\"\uF071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-danger{background-color:#f7a08f;border-color:#ef4044}.sky-alert.sky-alert-danger:before{content:\"\uF071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:#212327;opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-close-icon-theme-modern,.sky-alert-icon-theme-modern{display:none}.sky-theme-modern .sky-alert,:host-context(.sky-theme-modern) .sky-alert{border-left-width:7px}.sky-theme-modern .sky-alert .sky-alert-content,:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:15px}.sky-theme-modern .sky-alert.sky-alert-info,:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:#c1e8fb}.sky-theme-modern .sky-alert-danger:before,.sky-theme-modern .sky-alert-info:before,.sky-theme-modern .sky-alert-success:before,.sky-theme-modern .sky-alert-warning:before,:host-context(.sky-theme-modern) .sky-alert-danger:before,:host-context(.sky-theme-modern) .sky-alert-info:before,:host-context(.sky-theme-modern) .sky-alert-success:before,:host-context(.sky-theme-modern) .sky-alert-warning:before{display:none}.sky-theme-modern .sky-alert-info .sky-alert-icon-theme-modern,:host-context(.sky-theme-modern) .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-alert-success .sky-alert-icon-theme-modern,:host-context(.sky-theme-modern) .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-alert-warning .sky-alert-icon-theme-modern,:host-context(.sky-theme-modern) .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-alert-danger .sky-alert-icon-theme-modern,:host-context(.sky-theme-modern) .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-alert-icon-theme-modern,:host-context(.sky-theme-modern) .sky-alert-icon-theme-modern{display:block}.sky-theme-modern .sky-alert-close-icon-theme-default,:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-default{display:none}.sky-theme-modern .sky-alert-close-icon-theme-modern,:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-modern{display:inline}"]
|
|
302
|
-
})
|
|
303
|
-
], SkyAlertComponent);
|
|
304
|
-
return SkyAlertComponent;
|
|
305
|
-
}());
|
|
306
|
-
|
|
307
|
-
var SkyAlertModule = /** @class */ (function () {
|
|
308
|
-
function SkyAlertModule() {
|
|
309
|
-
}
|
|
310
|
-
SkyAlertModule = __decorate([
|
|
311
|
-
NgModule({
|
|
312
|
-
declarations: [
|
|
313
|
-
SkyAlertComponent
|
|
314
|
-
],
|
|
315
|
-
imports: [
|
|
316
|
-
CommonModule,
|
|
317
|
-
SkyI18nModule,
|
|
318
|
-
SkyIconModule,
|
|
319
|
-
SkyIndicatorsResourcesModule,
|
|
320
|
-
SkyThemeModule
|
|
321
|
-
],
|
|
322
|
-
exports: [
|
|
323
|
-
SkyAlertComponent
|
|
324
|
-
]
|
|
325
|
-
})
|
|
326
|
-
], SkyAlertModule);
|
|
327
|
-
return SkyAlertModule;
|
|
328
|
-
}());
|
|
329
|
-
|
|
330
|
-
var SkyChevronComponent = /** @class */ (function () {
|
|
331
|
-
function SkyChevronComponent() {
|
|
332
|
-
this.directionChange = new EventEmitter();
|
|
333
|
-
this.direction = 'up';
|
|
334
|
-
this.disabled = false;
|
|
335
|
-
}
|
|
336
|
-
SkyChevronComponent.prototype.chevronClick = function (event) {
|
|
337
|
-
if (event) {
|
|
338
|
-
event.stopPropagation();
|
|
339
|
-
}
|
|
340
|
-
this.direction = this.direction === 'up' ? 'down' : 'up';
|
|
341
|
-
this.directionChange.emit(this.direction);
|
|
342
|
-
};
|
|
343
|
-
__decorate([
|
|
344
|
-
Output()
|
|
345
|
-
], SkyChevronComponent.prototype, "directionChange", void 0);
|
|
346
|
-
__decorate([
|
|
347
|
-
Input()
|
|
348
|
-
], SkyChevronComponent.prototype, "direction", void 0);
|
|
349
|
-
__decorate([
|
|
350
|
-
Input()
|
|
351
|
-
], SkyChevronComponent.prototype, "disabled", void 0);
|
|
352
|
-
SkyChevronComponent = __decorate([
|
|
353
|
-
Component({
|
|
354
|
-
selector: 'sky-chevron',
|
|
355
|
-
template: "<button\n class=\"sky-chevron\"\n type=\"button\"\n [attr.aria-label]=\"(direction === 'down' ? 'skyux_chevron_expand' : 'skyux_chevron_collapse') | skyLibResources\"\n [disabled]=\"disabled\"\n [ngClass]=\"['sky-chevron-' + direction]\"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless' : 'modern'\n }\"\n (click)=\"chevronClick($event)\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span\n class=\"chevron-glyph-container\"\n >\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </span>\n </ng-container>\n</button>\n\n<ng-template #icon>\n <i\n aria-hidden=\"true\"\n class=\"sky-chevron-part sky-chevron-left\"\n >\n </i>\n <i\n aria-hidden=\"true\"\n class=\"sky-chevron-part sky-chevron-right\"\n >\n </i>\n</ng-template>\n",
|
|
356
|
-
styles: ["button{background:#add8e6}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}.sky-chevron-part{border-color:#cdcfd2;border-style:solid;border-width:3px 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform 250ms,left 250ms;vertical-align:top;width:10px}.sky-chevron-up .sky-chevron-left{left:7px;transform:rotate(-45deg)}.sky-chevron-up .sky-chevron-right{left:7px;transform:rotate(45deg)}.sky-chevron-down .sky-chevron-left{left:2px;transform:rotate(45deg)}.sky-chevron-down .sky-chevron-right{left:12px;transform:rotate(-45deg)}.sky-theme-modern .sky-chevron,:host-context(.sky-theme-modern) .sky-chevron{height:26px;width:26px}.sky-theme-modern .sky-chevron-part,:host-context(.sky-theme-modern) .sky-chevron-part{background:#686c73;border:none;height:2px;width:11px;top:13px}.sky-theme-modern .chevron-glyph-container,:host-context(.sky-theme-modern) .chevron-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}.sky-theme-modern .sky-chevron-left,:host-context(.sky-theme-modern) .sky-chevron-left{border-radius:1px 0 0 1px;left:4px}.sky-theme-modern .sky-chevron-right,:host-context(.sky-theme-modern) .sky-chevron-right{border-radius:0 1px 1px 0;left:10.5px}"]
|
|
357
|
-
})
|
|
358
|
-
], SkyChevronComponent);
|
|
359
|
-
return SkyChevronComponent;
|
|
360
|
-
}());
|
|
361
|
-
|
|
362
|
-
var SkyChevronModule = /** @class */ (function () {
|
|
363
|
-
function SkyChevronModule() {
|
|
364
|
-
}
|
|
365
|
-
SkyChevronModule = __decorate([
|
|
366
|
-
NgModule({
|
|
367
|
-
declarations: [
|
|
368
|
-
SkyChevronComponent
|
|
369
|
-
],
|
|
370
|
-
imports: [
|
|
371
|
-
CommonModule,
|
|
372
|
-
SkyI18nModule,
|
|
373
|
-
SkyIndicatorsResourcesModule,
|
|
374
|
-
SkyThemeModule
|
|
375
|
-
],
|
|
376
|
-
exports: [
|
|
377
|
-
SkyChevronComponent
|
|
378
|
-
]
|
|
379
|
-
})
|
|
380
|
-
], SkyChevronModule);
|
|
381
|
-
return SkyChevronModule;
|
|
382
|
-
}());
|
|
383
|
-
|
|
384
|
-
var SkyHelpInlineComponent = /** @class */ (function () {
|
|
385
|
-
function SkyHelpInlineComponent() {
|
|
386
|
-
/**
|
|
387
|
-
* Fires when the user clicks the help inline button.
|
|
388
|
-
*/
|
|
389
|
-
this.actionClick = new EventEmitter();
|
|
390
|
-
}
|
|
391
|
-
SkyHelpInlineComponent.prototype.onClick = function () {
|
|
392
|
-
this.actionClick.emit();
|
|
393
|
-
};
|
|
394
|
-
__decorate([
|
|
395
|
-
Output()
|
|
396
|
-
], SkyHelpInlineComponent.prototype, "actionClick", void 0);
|
|
397
|
-
SkyHelpInlineComponent = __decorate([
|
|
398
|
-
Component({
|
|
399
|
-
selector: 'sky-help-inline',
|
|
400
|
-
template: "<button\n class=\"sky-help-inline\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_help_inline_button_title' | skyLibResources\"\n (click)=\"onClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"info-circle\"\n >\n </sky-icon>\n <sky-icon-stack *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",
|
|
401
|
-
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 150ms;cursor:pointer}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-2x,:host-context(.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,:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}"]
|
|
402
|
-
})
|
|
403
|
-
], SkyHelpInlineComponent);
|
|
404
|
-
return SkyHelpInlineComponent;
|
|
405
|
-
}());
|
|
406
|
-
|
|
407
|
-
var SkyHelpInlineModule = /** @class */ (function () {
|
|
408
|
-
function SkyHelpInlineModule() {
|
|
409
|
-
}
|
|
410
|
-
SkyHelpInlineModule = __decorate([
|
|
411
|
-
NgModule({
|
|
412
|
-
declarations: [
|
|
413
|
-
SkyHelpInlineComponent
|
|
414
|
-
],
|
|
415
|
-
imports: [
|
|
416
|
-
CommonModule,
|
|
417
|
-
SkyI18nModule,
|
|
418
|
-
SkyIconModule,
|
|
419
|
-
SkyIndicatorsResourcesModule,
|
|
420
|
-
SkyThemeModule
|
|
421
|
-
],
|
|
422
|
-
exports: [
|
|
423
|
-
SkyHelpInlineComponent
|
|
424
|
-
]
|
|
425
|
-
})
|
|
426
|
-
], SkyHelpInlineModule);
|
|
427
|
-
return SkyHelpInlineModule;
|
|
428
|
-
}());
|
|
429
|
-
|
|
430
|
-
/**
|
|
431
|
-
* Specifies a label to display in smaller, plain text under or beside the value.
|
|
432
|
-
* @required
|
|
433
|
-
*/
|
|
434
|
-
var SkyKeyInfoLabelComponent = /** @class */ (function () {
|
|
435
|
-
function SkyKeyInfoLabelComponent() {
|
|
436
|
-
}
|
|
437
|
-
SkyKeyInfoLabelComponent = __decorate([
|
|
438
|
-
Component({
|
|
439
|
-
selector: 'sky-key-info-label',
|
|
440
|
-
template: '<ng-content></ng-content>'
|
|
441
|
-
})
|
|
442
|
-
], SkyKeyInfoLabelComponent);
|
|
443
|
-
return SkyKeyInfoLabelComponent;
|
|
444
|
-
}());
|
|
445
|
-
|
|
446
|
-
/**
|
|
447
|
-
* Specifies a value to display in larger, bold text.
|
|
448
|
-
* @required
|
|
449
|
-
*/
|
|
450
|
-
var SkyKeyInfoValueComponent = /** @class */ (function () {
|
|
451
|
-
function SkyKeyInfoValueComponent() {
|
|
452
|
-
}
|
|
453
|
-
SkyKeyInfoValueComponent = __decorate([
|
|
454
|
-
Component({
|
|
455
|
-
selector: 'sky-key-info-value',
|
|
456
|
-
template: '<ng-content></ng-content>'
|
|
457
|
-
})
|
|
458
|
-
], SkyKeyInfoValueComponent);
|
|
459
|
-
return SkyKeyInfoValueComponent;
|
|
460
|
-
}());
|
|
461
|
-
|
|
462
|
-
var SkyKeyInfoComponent = /** @class */ (function () {
|
|
463
|
-
function SkyKeyInfoComponent() {
|
|
464
|
-
/**
|
|
465
|
-
* Specifies whether to display key info in a `vertical` layout with the label under the
|
|
466
|
-
* value or in a `horizontal` layout with the label beside the value.
|
|
467
|
-
* @default "vertical"
|
|
468
|
-
*/
|
|
469
|
-
this.layout = 'vertical';
|
|
470
|
-
}
|
|
471
|
-
__decorate([
|
|
472
|
-
Input()
|
|
473
|
-
], SkyKeyInfoComponent.prototype, "layout", void 0);
|
|
474
|
-
SkyKeyInfoComponent = __decorate([
|
|
475
|
-
Component({
|
|
476
|
-
selector: 'sky-key-info',
|
|
477
|
-
template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div\n class=\"sky-key-info-value sky-headline\"\n >\n <ng-content\n select=\"sky-key-info-value\"\n >\n </ng-content>\n </div>\n <div\n class=\"sky-key-info-label sky-field-label sky-font-data-label\"\n >\n <ng-content\n select=\"sky-key-info-label\"\n >\n </ng-content>\n </div>\n</div>\n",
|
|
478
|
-
styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-label,.sky-key-info.sky-key-info-horizontal .sky-key-info-value{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label,:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}"]
|
|
479
|
-
})
|
|
480
|
-
], SkyKeyInfoComponent);
|
|
481
|
-
return SkyKeyInfoComponent;
|
|
482
|
-
}());
|
|
483
|
-
|
|
484
|
-
var SkyKeyInfoModule = /** @class */ (function () {
|
|
485
|
-
function SkyKeyInfoModule() {
|
|
486
|
-
}
|
|
487
|
-
SkyKeyInfoModule = __decorate([
|
|
488
|
-
NgModule({
|
|
489
|
-
declarations: [
|
|
490
|
-
SkyKeyInfoComponent,
|
|
491
|
-
SkyKeyInfoLabelComponent,
|
|
492
|
-
SkyKeyInfoValueComponent
|
|
493
|
-
],
|
|
494
|
-
imports: [
|
|
495
|
-
CommonModule
|
|
496
|
-
],
|
|
497
|
-
exports: [
|
|
498
|
-
SkyKeyInfoComponent,
|
|
499
|
-
SkyKeyInfoLabelComponent,
|
|
500
|
-
SkyKeyInfoValueComponent
|
|
501
|
-
]
|
|
502
|
-
})
|
|
503
|
-
], SkyKeyInfoModule);
|
|
504
|
-
return SkyKeyInfoModule;
|
|
505
|
-
}());
|
|
506
|
-
|
|
507
|
-
var SkyLabelComponent = /** @class */ (function () {
|
|
508
|
-
function SkyLabelComponent() {
|
|
509
|
-
}
|
|
510
|
-
Object.defineProperty(SkyLabelComponent.prototype, "labelType", {
|
|
511
|
-
get: function () {
|
|
512
|
-
return this._labelType || 'info';
|
|
513
|
-
},
|
|
514
|
-
/**
|
|
515
|
-
* The type of label to display.
|
|
516
|
-
* @required
|
|
517
|
-
*/
|
|
518
|
-
set: function (value) {
|
|
519
|
-
this._labelType = value;
|
|
520
|
-
this.updateIcon();
|
|
521
|
-
},
|
|
522
|
-
enumerable: true,
|
|
523
|
-
configurable: true
|
|
524
|
-
});
|
|
525
|
-
SkyLabelComponent.prototype.updateIcon = function () {
|
|
526
|
-
var indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.labelType);
|
|
527
|
-
this.icon = indicatorIcon.defaultThemeIcon;
|
|
528
|
-
this.baseIcon = indicatorIcon.modernThemeBaseIcon;
|
|
529
|
-
this.topIcon = indicatorIcon.modernThemeTopIcon;
|
|
530
|
-
};
|
|
531
|
-
__decorate([
|
|
532
|
-
Input()
|
|
533
|
-
], SkyLabelComponent.prototype, "labelType", null);
|
|
534
|
-
SkyLabelComponent = __decorate([
|
|
535
|
-
Component({
|
|
536
|
-
selector: 'sky-label',
|
|
537
|
-
template: "<span\n class=\"sky-label\"\n [ngClass]=\"'sky-label-' + labelType\"\n>\n <span\n class=\"sky-label-icon-theme-default\"\n >\n <sky-icon\n [icon]=\"icon\"\n ></sky-icon>\n </span>\n <span\n class=\"sky-label-icon-theme-modern\"\n >\n <sky-icon-stack\n size=\"xs\"\n [baseIcon]=\"baseIcon\"\n [topIcon]=\"topIcon\"\n >\n </sky-icon-stack>\n </span>\n <span class=\"sky-label-text\">\n <ng-content></ng-content>\n </span>\n</span>\n",
|
|
538
|
-
styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}.sky-theme-modern .sky-label,:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success,:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-danger,.sky-theme-modern .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger,:host-context(.sky-theme-modern) .sky-label.sky-label-warning{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default,:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern,:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern,:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern,:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern,:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern,:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}"]
|
|
539
|
-
})
|
|
540
|
-
], SkyLabelComponent);
|
|
541
|
-
return SkyLabelComponent;
|
|
542
|
-
}());
|
|
543
|
-
|
|
544
|
-
var SkyLabelModule = /** @class */ (function () {
|
|
545
|
-
function SkyLabelModule() {
|
|
546
|
-
}
|
|
547
|
-
SkyLabelModule = __decorate([
|
|
548
|
-
NgModule({
|
|
549
|
-
declarations: [
|
|
550
|
-
SkyLabelComponent
|
|
551
|
-
],
|
|
552
|
-
imports: [
|
|
553
|
-
CommonModule,
|
|
554
|
-
SkyIconModule
|
|
555
|
-
],
|
|
556
|
-
exports: [
|
|
557
|
-
SkyLabelComponent
|
|
558
|
-
]
|
|
559
|
-
})
|
|
560
|
-
], SkyLabelModule);
|
|
561
|
-
return SkyLabelModule;
|
|
562
|
-
}());
|
|
563
|
-
|
|
564
|
-
var INDICATOR_TYPE_DEFAULT = 'warning';
|
|
565
|
-
var SkyStatusIndicatorComponent = /** @class */ (function () {
|
|
566
|
-
function SkyStatusIndicatorComponent(changeDetector, resources) {
|
|
567
|
-
this.changeDetector = changeDetector;
|
|
568
|
-
this.resources = resources;
|
|
569
|
-
}
|
|
570
|
-
Object.defineProperty(SkyStatusIndicatorComponent.prototype, "indicatorType", {
|
|
571
|
-
get: function () {
|
|
572
|
-
return this._indicatorType || INDICATOR_TYPE_DEFAULT;
|
|
573
|
-
},
|
|
574
|
-
/**
|
|
575
|
-
* Specifies a style for the status indicator to determine the icon.
|
|
576
|
-
* The valid options are `danger`, `info`, `success`, and `warning`.
|
|
577
|
-
* @default "warning"
|
|
578
|
-
*/
|
|
579
|
-
set: function (value) {
|
|
580
|
-
this._indicatorType = value;
|
|
581
|
-
this.updateIcon();
|
|
582
|
-
},
|
|
583
|
-
enumerable: true,
|
|
584
|
-
configurable: true
|
|
585
|
-
});
|
|
586
|
-
Object.defineProperty(SkyStatusIndicatorComponent.prototype, "descriptionType", {
|
|
587
|
-
get: function () {
|
|
588
|
-
return this._descriptionType;
|
|
589
|
-
},
|
|
590
|
-
/**
|
|
591
|
-
* Specifies the predefined text to be read by screen readers for users
|
|
592
|
-
* who cannot see the indicator icon. The valid options are `none`, `custom`,
|
|
593
|
-
* `error`, `warning`, `completed`, and `important-info`.
|
|
594
|
-
* @required
|
|
595
|
-
*/
|
|
596
|
-
set: function (value) {
|
|
597
|
-
this._descriptionType = value;
|
|
598
|
-
this.updateDescriptionComputed();
|
|
599
|
-
},
|
|
600
|
-
enumerable: true,
|
|
601
|
-
configurable: true
|
|
602
|
-
});
|
|
603
|
-
Object.defineProperty(SkyStatusIndicatorComponent.prototype, "customDescription", {
|
|
604
|
-
get: function () {
|
|
605
|
-
return this._customDescription;
|
|
606
|
-
},
|
|
607
|
-
/**
|
|
608
|
-
* Specifies the text to be read by screen readers for users who cannot see
|
|
609
|
-
* the indicator icon when `descriptionType` is `custom`.
|
|
610
|
-
*/
|
|
611
|
-
set: function (value) {
|
|
612
|
-
this._customDescription = value;
|
|
613
|
-
this.updateDescriptionComputed();
|
|
614
|
-
},
|
|
615
|
-
enumerable: true,
|
|
616
|
-
configurable: true
|
|
617
|
-
});
|
|
618
|
-
SkyStatusIndicatorComponent.prototype.updateIcon = function () {
|
|
619
|
-
var indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.indicatorType);
|
|
620
|
-
this.icon = indicatorIcon.defaultThemeIcon;
|
|
621
|
-
this.baseIcon = indicatorIcon.modernThemeBaseIcon;
|
|
622
|
-
this.topIcon = indicatorIcon.modernThemeTopIcon;
|
|
623
|
-
};
|
|
624
|
-
SkyStatusIndicatorComponent.prototype.updateDescriptionComputed = function () {
|
|
625
|
-
var _this = this;
|
|
626
|
-
if (this.descriptionType) {
|
|
627
|
-
switch (this.descriptionType) {
|
|
628
|
-
case 'none':
|
|
629
|
-
this.descriptionComputed = '';
|
|
630
|
-
break;
|
|
631
|
-
case 'custom':
|
|
632
|
-
this.descriptionComputed = this.customDescription;
|
|
633
|
-
break;
|
|
634
|
-
default:
|
|
635
|
-
this.resources.getString('skyux_status_indicator_sr_' + this.descriptionType.replace(/-/g, '_')).subscribe(function (value) {
|
|
636
|
-
_this.descriptionComputed = value;
|
|
637
|
-
_this.changeDetector.markForCheck();
|
|
638
|
-
});
|
|
639
|
-
break;
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
else {
|
|
643
|
-
this.descriptionComputed = undefined;
|
|
644
|
-
}
|
|
645
|
-
};
|
|
646
|
-
SkyStatusIndicatorComponent.ctorParameters = function () { return [
|
|
647
|
-
{ type: ChangeDetectorRef },
|
|
648
|
-
{ type: SkyLibResourcesService }
|
|
649
|
-
]; };
|
|
650
|
-
__decorate([
|
|
651
|
-
Input()
|
|
652
|
-
], SkyStatusIndicatorComponent.prototype, "indicatorType", null);
|
|
653
|
-
__decorate([
|
|
654
|
-
Input()
|
|
655
|
-
], SkyStatusIndicatorComponent.prototype, "descriptionType", null);
|
|
656
|
-
__decorate([
|
|
657
|
-
Input()
|
|
658
|
-
], SkyStatusIndicatorComponent.prototype, "customDescription", null);
|
|
659
|
-
SkyStatusIndicatorComponent = __decorate([
|
|
660
|
-
Component({
|
|
661
|
-
selector: 'sky-status-indicator',
|
|
662
|
-
template: "<div *ngIf=\"descriptionType\"\n class=\"sky-status-indicator\"\n>\n <div\n aria-hidden=\"true\"\n class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorType\"\n >\n <span\n class=\"sky-status-indicator-icon-default\"\n >\n <sky-icon\n [icon]=\"icon\"\n ></sky-icon>\n </span>\n <span\n class=\"sky-status-indicator-icon-modern\"\n >\n <sky-icon-stack\n size=\"xs\"\n [baseIcon]=\"baseIcon\"\n [topIcon]=\"topIcon\"\n >\n </sky-icon-stack>\n </span>\n </div>\n <div\n class=\"sky-status-indicator-message-wrapper\"\n >\n <span *ngIf=\"descriptionComputed\"\n class=\"sky-screen-reader-only\"\n >\n {{ descriptionComputed }}\n </span>\n <span\n class=\"sky-status-indicator-message\"\n >\n <ng-content></ng-content>\n </span>\n </div>\n</div>\n",
|
|
663
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
664
|
-
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}.sky-theme-modern .sky-status-indicator-icon-default,:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern,:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}"]
|
|
665
|
-
})
|
|
666
|
-
], SkyStatusIndicatorComponent);
|
|
667
|
-
return SkyStatusIndicatorComponent;
|
|
668
|
-
}());
|
|
669
|
-
|
|
670
|
-
var SkyStatusIndicatorModule = /** @class */ (function () {
|
|
671
|
-
function SkyStatusIndicatorModule() {
|
|
672
|
-
}
|
|
673
|
-
SkyStatusIndicatorModule = __decorate([
|
|
674
|
-
NgModule({
|
|
675
|
-
declarations: [
|
|
676
|
-
SkyStatusIndicatorComponent
|
|
677
|
-
],
|
|
678
|
-
imports: [
|
|
679
|
-
CommonModule,
|
|
680
|
-
SkyI18nModule,
|
|
681
|
-
SkyIconModule,
|
|
682
|
-
SkyIndicatorsResourcesModule
|
|
683
|
-
],
|
|
684
|
-
exports: [
|
|
685
|
-
SkyStatusIndicatorComponent
|
|
686
|
-
]
|
|
687
|
-
})
|
|
688
|
-
], SkyStatusIndicatorModule);
|
|
689
|
-
return SkyStatusIndicatorModule;
|
|
690
|
-
}());
|
|
691
|
-
|
|
692
|
-
var className = 'sky-highlight-mark';
|
|
693
|
-
// Need to add the following to classes which contain static methods.
|
|
694
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
695
|
-
// @dynamic
|
|
696
|
-
/**
|
|
697
|
-
* Highlights all matching text within DOM elements that it is placed on.
|
|
698
|
-
* The directive is only valid for elements that contain content, so you
|
|
699
|
-
* cannot place it on `ng-template`, `ng-content`, or `ng-container` tags.
|
|
700
|
-
*/
|
|
701
|
-
var SkyTextHighlightDirective = /** @class */ (function () {
|
|
702
|
-
function SkyTextHighlightDirective(el, observerService) {
|
|
703
|
-
this.el = el;
|
|
704
|
-
this.observerService = observerService;
|
|
705
|
-
this.existingHighlight = false;
|
|
706
|
-
}
|
|
707
|
-
SkyTextHighlightDirective_1 = SkyTextHighlightDirective;
|
|
708
|
-
SkyTextHighlightDirective.prototype.ngOnChanges = function (changes) {
|
|
709
|
-
if (changes.skyHighlight && !changes.skyHighlight.firstChange) {
|
|
710
|
-
this.highlight();
|
|
711
|
-
}
|
|
712
|
-
};
|
|
713
|
-
SkyTextHighlightDirective.prototype.ngAfterViewInit = function () {
|
|
714
|
-
var self = this;
|
|
715
|
-
this.observer = this.observerService.create(function (mutations) {
|
|
716
|
-
self.highlight();
|
|
717
|
-
});
|
|
718
|
-
this.observeDom();
|
|
719
|
-
if (this.skyHighlight) {
|
|
720
|
-
this.highlight();
|
|
721
|
-
}
|
|
722
|
-
};
|
|
723
|
-
SkyTextHighlightDirective.prototype.ngOnDestroy = function () {
|
|
724
|
-
if (this.observer) {
|
|
725
|
-
this.observer.disconnect();
|
|
726
|
-
}
|
|
727
|
-
};
|
|
728
|
-
SkyTextHighlightDirective.prototype.readyForHighlight = function (searchText) {
|
|
729
|
-
return searchText && this.el.nativeElement;
|
|
730
|
-
};
|
|
731
|
-
SkyTextHighlightDirective.prototype.highlight = function () {
|
|
732
|
-
if (this.observer) {
|
|
733
|
-
this.observer.disconnect();
|
|
734
|
-
}
|
|
735
|
-
var searchText = this.skyHighlight;
|
|
736
|
-
if (this.existingHighlight) {
|
|
737
|
-
SkyTextHighlightDirective_1.removeHighlight(this.el);
|
|
738
|
-
}
|
|
739
|
-
if (this.readyForHighlight(searchText)) {
|
|
740
|
-
var node = this.el.nativeElement;
|
|
741
|
-
// mark all matched text in the DOM
|
|
742
|
-
SkyTextHighlightDirective_1.markTextNodes(node, searchText);
|
|
743
|
-
this.existingHighlight = true;
|
|
744
|
-
}
|
|
745
|
-
this.observeDom();
|
|
746
|
-
};
|
|
747
|
-
SkyTextHighlightDirective.prototype.observeDom = function () {
|
|
748
|
-
if (this.observer) {
|
|
749
|
-
var config = { attributes: false, childList: true, characterData: true };
|
|
750
|
-
this.observer.observe(this.el.nativeElement, config);
|
|
751
|
-
}
|
|
752
|
-
};
|
|
753
|
-
SkyTextHighlightDirective.cleanRegex = function (regex) {
|
|
754
|
-
return regex.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
755
|
-
};
|
|
756
|
-
SkyTextHighlightDirective.getRegexMatch = function (node, searchText) {
|
|
757
|
-
var text = node.nodeValue;
|
|
758
|
-
var newSearchText = this.cleanRegex(searchText);
|
|
759
|
-
var searchRegex = new RegExp(newSearchText, 'gi');
|
|
760
|
-
return searchRegex.exec(text);
|
|
761
|
-
};
|
|
762
|
-
SkyTextHighlightDirective.markNode = function (node, searchText) {
|
|
763
|
-
var regexMatch = SkyTextHighlightDirective_1.getRegexMatch(node, searchText);
|
|
764
|
-
// found match
|
|
765
|
-
if (regexMatch && regexMatch.length > 0) {
|
|
766
|
-
// split apart text node with mark tags in the middle on the search term
|
|
767
|
-
var matchIndex = regexMatch.index;
|
|
768
|
-
var middle = node.splitText(matchIndex);
|
|
769
|
-
middle.splitText(searchText.length);
|
|
770
|
-
var middleClone = middle.cloneNode(true);
|
|
771
|
-
var markNode = document.createElement('mark');
|
|
772
|
-
markNode.className = className;
|
|
773
|
-
markNode.appendChild(middleClone);
|
|
774
|
-
middle.parentNode.replaceChild(markNode, middle);
|
|
775
|
-
return 1;
|
|
776
|
-
}
|
|
777
|
-
else {
|
|
778
|
-
return 0;
|
|
779
|
-
}
|
|
780
|
-
};
|
|
781
|
-
SkyTextHighlightDirective.markTextNodes = function (node, searchText) {
|
|
782
|
-
if (node.nodeType === 3) {
|
|
783
|
-
return SkyTextHighlightDirective_1.markNode(node, searchText);
|
|
784
|
-
}
|
|
785
|
-
else if (node.nodeType === 1 && node.childNodes) {
|
|
786
|
-
for (var i = 0; i < node.childNodes.length; i++) {
|
|
787
|
-
var childNode = node.childNodes[i];
|
|
788
|
-
i += SkyTextHighlightDirective_1.markTextNodes(childNode, searchText);
|
|
789
|
-
}
|
|
790
|
-
}
|
|
791
|
-
return 0;
|
|
792
|
-
};
|
|
793
|
-
SkyTextHighlightDirective.removeHighlight = function (el) {
|
|
794
|
-
var matchedElements = el.nativeElement.querySelectorAll("mark." + className);
|
|
795
|
-
/* istanbul ignore else */
|
|
796
|
-
/* sanity check */
|
|
797
|
-
if (matchedElements) {
|
|
798
|
-
for (var i = 0; i < matchedElements.length; i++) {
|
|
799
|
-
var node = matchedElements[i];
|
|
800
|
-
var parentNode = node.parentNode;
|
|
801
|
-
parentNode.replaceChild(node.firstChild, node);
|
|
802
|
-
parentNode.normalize();
|
|
803
|
-
}
|
|
804
|
-
}
|
|
805
|
-
};
|
|
806
|
-
var SkyTextHighlightDirective_1;
|
|
807
|
-
SkyTextHighlightDirective.ctorParameters = function () { return [
|
|
808
|
-
{ type: ElementRef },
|
|
809
|
-
{ type: MutationObserverService }
|
|
810
|
-
]; };
|
|
811
|
-
__decorate([
|
|
812
|
-
Input()
|
|
813
|
-
], SkyTextHighlightDirective.prototype, "skyHighlight", void 0);
|
|
814
|
-
SkyTextHighlightDirective = SkyTextHighlightDirective_1 = __decorate([
|
|
815
|
-
Directive({
|
|
816
|
-
selector: '[skyHighlight]'
|
|
817
|
-
})
|
|
818
|
-
], SkyTextHighlightDirective);
|
|
819
|
-
return SkyTextHighlightDirective;
|
|
820
|
-
}());
|
|
821
|
-
|
|
822
|
-
var SkyTextHighlightModule = /** @class */ (function () {
|
|
823
|
-
function SkyTextHighlightModule() {
|
|
824
|
-
}
|
|
825
|
-
SkyTextHighlightModule = __decorate([
|
|
826
|
-
NgModule({
|
|
827
|
-
declarations: [
|
|
828
|
-
SkyTextHighlightDirective
|
|
829
|
-
],
|
|
830
|
-
exports: [
|
|
831
|
-
SkyTextHighlightDirective
|
|
832
|
-
],
|
|
833
|
-
providers: [
|
|
834
|
-
MutationObserverService
|
|
835
|
-
]
|
|
836
|
-
})
|
|
837
|
-
], SkyTextHighlightModule);
|
|
838
|
-
return SkyTextHighlightModule;
|
|
839
|
-
}());
|
|
840
|
-
|
|
841
|
-
var SkyTokenComponent = /** @class */ (function () {
|
|
842
|
-
function SkyTokenComponent(elementRef, resourcesService) {
|
|
843
|
-
this.elementRef = elementRef;
|
|
844
|
-
this.resourcesService = resourcesService;
|
|
845
|
-
/**
|
|
846
|
-
* Fires when users click the close button or press the `Backspace` key to dismiss the token.
|
|
847
|
-
*/
|
|
848
|
-
this.dismiss = new EventEmitter();
|
|
849
|
-
/**
|
|
850
|
-
* Fires when users place focus on the token by navigating to it with the `Tab` key.
|
|
851
|
-
*/
|
|
852
|
-
this.tokenFocus = new EventEmitter();
|
|
853
|
-
}
|
|
854
|
-
Object.defineProperty(SkyTokenComponent.prototype, "disabled", {
|
|
855
|
-
get: function () {
|
|
856
|
-
return !!this._disabled;
|
|
857
|
-
},
|
|
858
|
-
/**
|
|
859
|
-
* Indicates whether to disable the token to prevent users from selecting it, dismissing it,
|
|
860
|
-
* or navigating to it with the arrow keys. When the token is disabled,
|
|
861
|
-
* users can still place focus on it using the `Tab` key.
|
|
862
|
-
* @default true
|
|
863
|
-
*/
|
|
864
|
-
set: function (value) {
|
|
865
|
-
this._disabled = value;
|
|
866
|
-
},
|
|
867
|
-
enumerable: true,
|
|
868
|
-
configurable: true
|
|
869
|
-
});
|
|
870
|
-
Object.defineProperty(SkyTokenComponent.prototype, "ariaLabel", {
|
|
871
|
-
get: function () {
|
|
872
|
-
return this._ariaLabel || this.getString('skyux_tokens_dismiss_button_title');
|
|
873
|
-
},
|
|
874
|
-
/**
|
|
875
|
-
* Specifies an ARIA label for the token's close button. This sets the button's `aria-label`
|
|
876
|
-
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
877
|
-
* @default "Remove item"
|
|
878
|
-
*/
|
|
879
|
-
set: function (value) {
|
|
880
|
-
this._ariaLabel = value;
|
|
881
|
-
},
|
|
882
|
-
enumerable: true,
|
|
883
|
-
configurable: true
|
|
884
|
-
});
|
|
885
|
-
Object.defineProperty(SkyTokenComponent.prototype, "dismissible", {
|
|
886
|
-
get: function () {
|
|
887
|
-
return this._dismissible !== false;
|
|
888
|
-
},
|
|
889
|
-
/**
|
|
890
|
-
* Indicates whether users can remove the token from the list by selecting the close button
|
|
891
|
-
* or pressing the `Backspace` key.
|
|
892
|
-
* @default true
|
|
893
|
-
*/
|
|
894
|
-
set: function (value) {
|
|
895
|
-
this._dismissible = value;
|
|
896
|
-
},
|
|
897
|
-
enumerable: true,
|
|
898
|
-
configurable: true
|
|
899
|
-
});
|
|
900
|
-
Object.defineProperty(SkyTokenComponent.prototype, "focusable", {
|
|
901
|
-
get: function () {
|
|
902
|
-
return (this._focusable !== false);
|
|
903
|
-
},
|
|
904
|
-
/**
|
|
905
|
-
* Indicates whether users can press the `Tab` key to place focus on the token. This does not
|
|
906
|
-
* affect the ability to select the token, dismiss it, or navigate to it with the arrow keys.
|
|
907
|
-
* @default true
|
|
908
|
-
*/
|
|
909
|
-
set: function (value) {
|
|
910
|
-
this._focusable = value;
|
|
911
|
-
},
|
|
912
|
-
enumerable: true,
|
|
913
|
-
configurable: true
|
|
914
|
-
});
|
|
915
|
-
Object.defineProperty(SkyTokenComponent.prototype, "tabIndex", {
|
|
916
|
-
/**
|
|
917
|
-
* @internal
|
|
918
|
-
*/
|
|
919
|
-
get: function () {
|
|
920
|
-
return (this.focusable) ? 0 : -1;
|
|
921
|
-
},
|
|
922
|
-
enumerable: true,
|
|
923
|
-
configurable: true
|
|
924
|
-
});
|
|
925
|
-
SkyTokenComponent.prototype.dismissToken = function (event) {
|
|
926
|
-
if (event) {
|
|
927
|
-
event.stopPropagation();
|
|
928
|
-
}
|
|
929
|
-
this.dismiss.emit();
|
|
930
|
-
};
|
|
931
|
-
SkyTokenComponent.prototype.focusElement = function () {
|
|
932
|
-
this.elementRef.nativeElement.querySelector('.sky-token').focus();
|
|
933
|
-
};
|
|
934
|
-
SkyTokenComponent.prototype.getString = function (key) {
|
|
935
|
-
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
936
|
-
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
|
|
937
|
-
};
|
|
938
|
-
SkyTokenComponent.ctorParameters = function () { return [
|
|
939
|
-
{ type: ElementRef },
|
|
940
|
-
{ type: SkyLibResourcesService }
|
|
941
|
-
]; };
|
|
942
|
-
__decorate([
|
|
943
|
-
Input()
|
|
944
|
-
], SkyTokenComponent.prototype, "disabled", null);
|
|
945
|
-
__decorate([
|
|
946
|
-
Input()
|
|
947
|
-
], SkyTokenComponent.prototype, "ariaLabel", null);
|
|
948
|
-
__decorate([
|
|
949
|
-
Input()
|
|
950
|
-
], SkyTokenComponent.prototype, "dismissible", null);
|
|
951
|
-
__decorate([
|
|
952
|
-
Input()
|
|
953
|
-
], SkyTokenComponent.prototype, "focusable", null);
|
|
954
|
-
__decorate([
|
|
955
|
-
Output()
|
|
956
|
-
], SkyTokenComponent.prototype, "dismiss", void 0);
|
|
957
|
-
__decorate([
|
|
958
|
-
Output()
|
|
959
|
-
], SkyTokenComponent.prototype, "tokenFocus", void 0);
|
|
960
|
-
SkyTokenComponent = __decorate([
|
|
961
|
-
Component({
|
|
962
|
-
selector: 'sky-token',
|
|
963
|
-
template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n role=\"button\"\n [attr.aria-disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-dismissable': dismissible,\n 'sky-token-active': tokenActive && !closeActive\n }\"\n (document:mouseup)=\"tokenActive = false;\"\n (focus)=\"tokenFocus.emit()\"\n (mousedown)=\"tokenActive = true;\"\n >\n <ng-content>\n </ng-content>\n <button *ngIf=\"dismissible\"\n class=\"sky-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"closeActive = false;\"\n (mousedown)=\"closeActive = true;\"\n >\n <sky-icon\n class=\"sky-token-btn-close-icon-default\"\n icon=\"times\"\n >\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</div>\n",
|
|
964
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
965
|
-
styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;overflow:hidden;padding:2px 8px;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-token:focus,.sky-token:hover{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token:focus{box-shadow:0 0 8px rgba(0,180,241,.6);border:1px solid #00b4f1;outline:0}.sky-btn-disabled{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-token-btn-close{background:0 0;padding:0;border:0;margin-left:2px;opacity:.9}.sky-token-btn-close:focus,.sky-token-btn-close:hover{opacity:1}.sky-token-btn-close-icon-modern{display:none}.sky-theme-modern .sky-token,:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}.sky-theme-modern .sky-token.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-token.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token:not(.sky-btn-disabled),:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}.sky-theme-modern .sky-token.sky-token-dismissable,:host-context(.sky-theme-modern) .sky-token.sky-token-dismissable{padding-right:1px}.sky-theme-modern .sky-token:hover:not(:active),:host-context(.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,:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token:focus:not(:active),:host-context(.sky-theme-modern) .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-token:focus,.sky-theme-modern .sky-token:hover,:host-context(.sky-theme-modern) .sky-token:focus,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#c1e8fb}.sky-theme-modern .sky-token-btn-close,:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}.sky-theme-modern .sky-token-btn-close:hover,:host-context(.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,:host-context(.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,:host-context(.sky-theme-modern) .sky-token-btn-close:focus{outline:0}.sky-theme-modern .sky-token-btn-close:focus:not(:active),:host-context(.sky-theme-modern) .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-token-btn-close-icon-default,:host-context(.sky-theme-modern) .sky-token-btn-close-icon-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern,:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;width:100%}.sky-theme-modern.sky-theme-mode-dark .sky-token,:host-context(.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,: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}"]
|
|
966
|
-
})
|
|
967
|
-
], SkyTokenComponent);
|
|
968
|
-
return SkyTokenComponent;
|
|
969
|
-
}());
|
|
970
|
-
|
|
971
|
-
var SkyTokensMessageType;
|
|
972
|
-
(function (SkyTokensMessageType) {
|
|
973
|
-
/**
|
|
974
|
-
* Places focus on the last token in the list.
|
|
975
|
-
*/
|
|
976
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusLastToken"] = 0] = "FocusLastToken";
|
|
977
|
-
/**
|
|
978
|
-
* Places focus on the token that is currently selected.
|
|
979
|
-
*/
|
|
980
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusActiveToken"] = 1] = "FocusActiveToken";
|
|
981
|
-
/**
|
|
982
|
-
* Places focus on the token before the currently selected token.
|
|
983
|
-
*/
|
|
984
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusPreviousToken"] = 2] = "FocusPreviousToken";
|
|
985
|
-
/**
|
|
986
|
-
* Places focus on the token after the currently selected token.
|
|
987
|
-
*/
|
|
988
|
-
SkyTokensMessageType[SkyTokensMessageType["FocusNextToken"] = 3] = "FocusNextToken";
|
|
989
|
-
/**
|
|
990
|
-
* Removes the token that is currently selected from the list of tokens.
|
|
991
|
-
*/
|
|
992
|
-
SkyTokensMessageType[SkyTokensMessageType["RemoveActiveToken"] = 4] = "RemoveActiveToken";
|
|
993
|
-
})(SkyTokensMessageType || (SkyTokensMessageType = {}));
|
|
994
|
-
|
|
995
|
-
var SkyTokensComponent = /** @class */ (function () {
|
|
996
|
-
function SkyTokensComponent(changeDetector) {
|
|
997
|
-
var _this = this;
|
|
998
|
-
this.changeDetector = changeDetector;
|
|
999
|
-
/**
|
|
1000
|
-
* Fires when users navigate through the tokens list with the `Tab` key
|
|
1001
|
-
* and attempt to move past the final token in the list.
|
|
1002
|
-
*/
|
|
1003
|
-
this.focusIndexOverRange = new EventEmitter();
|
|
1004
|
-
/**
|
|
1005
|
-
* Fires when usersnavigate through the tokens list with the `Tab` key
|
|
1006
|
-
* and attempt to move before the first token in the list.
|
|
1007
|
-
*/
|
|
1008
|
-
this.focusIndexUnderRange = new EventEmitter();
|
|
1009
|
-
/**
|
|
1010
|
-
* Fires when users select a token in the list. This event emits the selected token.
|
|
1011
|
-
*/
|
|
1012
|
-
this.tokenSelected = new EventEmitter();
|
|
1013
|
-
/**
|
|
1014
|
-
* Fires when the tokens in the list change.
|
|
1015
|
-
* This event emits an array of the tokens in the updated list.
|
|
1016
|
-
*/
|
|
1017
|
-
this.tokensChange = new EventEmitter();
|
|
1018
|
-
this.ngUnsubscribe = new Subject();
|
|
1019
|
-
// Angular calls the trackBy function without applying the component instance's scope.
|
|
1020
|
-
// Use a fat-arrow function so the current component instance's trackWith property can
|
|
1021
|
-
// be referenced.
|
|
1022
|
-
this.trackTokenFn = function (_index, item) {
|
|
1023
|
-
if (_this.trackWith) {
|
|
1024
|
-
return item.value[_this.trackWith];
|
|
1025
|
-
}
|
|
1026
|
-
return item;
|
|
1027
|
-
};
|
|
1028
|
-
}
|
|
1029
|
-
Object.defineProperty(SkyTokensComponent.prototype, "disabled", {
|
|
1030
|
-
get: function () {
|
|
1031
|
-
return !!this._disabled;
|
|
1032
|
-
},
|
|
1033
|
-
/**
|
|
1034
|
-
* Indicates whether to disable the tokens list to prevent users from selecting tokens,
|
|
1035
|
-
* dismissing tokens, or navigating through the list with the arrow keys. When the tokens list
|
|
1036
|
-
* is disabled, users can still place focus on items in the list using the `Tab` key.
|
|
1037
|
-
* @default false
|
|
1038
|
-
*/
|
|
1039
|
-
set: function (value) {
|
|
1040
|
-
this._disabled = value;
|
|
1041
|
-
},
|
|
1042
|
-
enumerable: true,
|
|
1043
|
-
configurable: true
|
|
1044
|
-
});
|
|
1045
|
-
Object.defineProperty(SkyTokensComponent.prototype, "dismissible", {
|
|
1046
|
-
get: function () {
|
|
1047
|
-
return (this._dismissible !== false);
|
|
1048
|
-
},
|
|
1049
|
-
/**
|
|
1050
|
-
* Indicates whether users can remove tokens from the list by selecting their close buttons
|
|
1051
|
-
* or pressing the `Backspace` key.
|
|
1052
|
-
* @default true
|
|
1053
|
-
*/
|
|
1054
|
-
set: function (value) {
|
|
1055
|
-
this._dismissible = value;
|
|
1056
|
-
},
|
|
1057
|
-
enumerable: true,
|
|
1058
|
-
configurable: true
|
|
1059
|
-
});
|
|
1060
|
-
Object.defineProperty(SkyTokensComponent.prototype, "displayWith", {
|
|
1061
|
-
get: function () {
|
|
1062
|
-
return this._displayWith || 'name';
|
|
1063
|
-
},
|
|
1064
|
-
/**
|
|
1065
|
-
* Specifies the token property to display for each item in the tokens list.
|
|
1066
|
-
* @default 'name'
|
|
1067
|
-
*/
|
|
1068
|
-
set: function (value) {
|
|
1069
|
-
this._displayWith = value;
|
|
1070
|
-
},
|
|
1071
|
-
enumerable: true,
|
|
1072
|
-
configurable: true
|
|
1073
|
-
});
|
|
1074
|
-
Object.defineProperty(SkyTokensComponent.prototype, "focusable", {
|
|
1075
|
-
get: function () {
|
|
1076
|
-
return (this._focusable !== false);
|
|
1077
|
-
},
|
|
1078
|
-
/**
|
|
1079
|
-
* Indicates whether users can focus on items in the list using the `Tab` key.
|
|
1080
|
-
* This does not affect the ability of users to select tokens, dismiss tokens,
|
|
1081
|
-
* or navigate through the list with the arrow keys.
|
|
1082
|
-
* @default true
|
|
1083
|
-
*/
|
|
1084
|
-
set: function (value) {
|
|
1085
|
-
this._focusable = value;
|
|
1086
|
-
},
|
|
1087
|
-
enumerable: true,
|
|
1088
|
-
configurable: true
|
|
1089
|
-
});
|
|
1090
|
-
Object.defineProperty(SkyTokensComponent.prototype, "tokens", {
|
|
1091
|
-
get: function () {
|
|
1092
|
-
return this._tokens || [];
|
|
1093
|
-
},
|
|
1094
|
-
/**
|
|
1095
|
-
* Specifies an array of tokens to include in the list.
|
|
1096
|
-
*/
|
|
1097
|
-
set: function (value) {
|
|
1098
|
-
this._tokens = value;
|
|
1099
|
-
this.tokensChange.emit(this._tokens);
|
|
1100
|
-
},
|
|
1101
|
-
enumerable: true,
|
|
1102
|
-
configurable: true
|
|
1103
|
-
});
|
|
1104
|
-
Object.defineProperty(SkyTokensComponent.prototype, "messageStream", {
|
|
1105
|
-
get: function () {
|
|
1106
|
-
return this._messageStream;
|
|
1107
|
-
},
|
|
1108
|
-
/**
|
|
1109
|
-
* Specifies an observable of `SkyTokensMessage` that can place focus on a
|
|
1110
|
-
* particular token or remove the active token from the list.
|
|
1111
|
-
*/
|
|
1112
|
-
set: function (value) {
|
|
1113
|
-
this._messageStream = value;
|
|
1114
|
-
this.initMessageStream();
|
|
1115
|
-
},
|
|
1116
|
-
enumerable: true,
|
|
1117
|
-
configurable: true
|
|
1118
|
-
});
|
|
1119
|
-
Object.defineProperty(SkyTokensComponent.prototype, "activeIndex", {
|
|
1120
|
-
/**
|
|
1121
|
-
* @internal
|
|
1122
|
-
*/
|
|
1123
|
-
get: function () {
|
|
1124
|
-
return this._activeIndex || 0;
|
|
1125
|
-
},
|
|
1126
|
-
set: function (value) {
|
|
1127
|
-
if (value >= this.tokens.length) {
|
|
1128
|
-
value = this.tokens.length - 1;
|
|
1129
|
-
this.focusIndexOverRange.emit();
|
|
1130
|
-
}
|
|
1131
|
-
if (value < 0) {
|
|
1132
|
-
value = 0;
|
|
1133
|
-
this.focusIndexUnderRange.emit();
|
|
1134
|
-
}
|
|
1135
|
-
this._activeIndex = value;
|
|
1136
|
-
},
|
|
1137
|
-
enumerable: true,
|
|
1138
|
-
configurable: true
|
|
1139
|
-
});
|
|
1140
|
-
SkyTokensComponent.prototype.ngOnDestroy = function () {
|
|
1141
|
-
this.ngUnsubscribe.next();
|
|
1142
|
-
this.ngUnsubscribe.complete();
|
|
1143
|
-
};
|
|
1144
|
-
SkyTokensComponent.prototype.onTokenClick = function (token) {
|
|
1145
|
-
if (this.disabled) {
|
|
1146
|
-
return;
|
|
1147
|
-
}
|
|
1148
|
-
this.notifyTokenSelected(token);
|
|
1149
|
-
};
|
|
1150
|
-
SkyTokensComponent.prototype.onTokenKeyDown = function (event) {
|
|
1151
|
-
if (!this.disabled) {
|
|
1152
|
-
/* tslint:disable-next-line:switch-default */
|
|
1153
|
-
switch (event.key) {
|
|
1154
|
-
case 'Left':
|
|
1155
|
-
case 'ArrowLeft':
|
|
1156
|
-
this.messageStream.next({ type: SkyTokensMessageType.FocusPreviousToken });
|
|
1157
|
-
event.preventDefault();
|
|
1158
|
-
break;
|
|
1159
|
-
case 'Right':
|
|
1160
|
-
case 'ArrowRight':
|
|
1161
|
-
this.messageStream.next({ type: SkyTokensMessageType.FocusNextToken });
|
|
1162
|
-
event.preventDefault();
|
|
1163
|
-
break;
|
|
1164
|
-
}
|
|
1165
|
-
}
|
|
1166
|
-
};
|
|
1167
|
-
SkyTokensComponent.prototype.selectToken = function (token) {
|
|
1168
|
-
if (!this.disabled) {
|
|
1169
|
-
this.notifyTokenSelected(token);
|
|
1170
|
-
}
|
|
1171
|
-
};
|
|
1172
|
-
SkyTokensComponent.prototype.removeToken = function (token) {
|
|
1173
|
-
this.tokens = this.tokens.filter(function (t) { return t !== token; });
|
|
1174
|
-
this.changeDetector.detectChanges();
|
|
1175
|
-
};
|
|
1176
|
-
SkyTokensComponent.prototype.focusPreviousToken = function () {
|
|
1177
|
-
this.activeIndex--;
|
|
1178
|
-
this.focusActiveToken();
|
|
1179
|
-
};
|
|
1180
|
-
SkyTokensComponent.prototype.focusNextToken = function () {
|
|
1181
|
-
this.activeIndex++;
|
|
1182
|
-
this.focusActiveToken();
|
|
1183
|
-
};
|
|
1184
|
-
SkyTokensComponent.prototype.focusLastToken = function () {
|
|
1185
|
-
this.activeIndex = this.tokenComponents.length - 1;
|
|
1186
|
-
this.focusActiveToken();
|
|
1187
|
-
};
|
|
1188
|
-
SkyTokensComponent.prototype.focusActiveToken = function () {
|
|
1189
|
-
var _this = this;
|
|
1190
|
-
var tokenComponent = this.tokenComponents
|
|
1191
|
-
.find(function (_comp, i) {
|
|
1192
|
-
return (_this.activeIndex === i);
|
|
1193
|
-
});
|
|
1194
|
-
if (tokenComponent) {
|
|
1195
|
-
tokenComponent.focusElement();
|
|
1196
|
-
}
|
|
1197
|
-
};
|
|
1198
|
-
SkyTokensComponent.prototype.removeActiveToken = function () {
|
|
1199
|
-
var token = this.tokens[this.activeIndex];
|
|
1200
|
-
if (token) {
|
|
1201
|
-
this.removeToken(token);
|
|
1202
|
-
}
|
|
1203
|
-
};
|
|
1204
|
-
SkyTokensComponent.prototype.initMessageStream = function () {
|
|
1205
|
-
var _this = this;
|
|
1206
|
-
if (this.messageStreamSub) {
|
|
1207
|
-
this.messageStreamSub.unsubscribe();
|
|
1208
|
-
}
|
|
1209
|
-
if (this.messageStream) {
|
|
1210
|
-
this.messageStreamSub = this.messageStream
|
|
1211
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1212
|
-
.subscribe(function (message) {
|
|
1213
|
-
/* tslint:disable-next-line:switch-default */
|
|
1214
|
-
switch (message.type) {
|
|
1215
|
-
case SkyTokensMessageType.FocusLastToken:
|
|
1216
|
-
_this.focusLastToken();
|
|
1217
|
-
break;
|
|
1218
|
-
case SkyTokensMessageType.FocusActiveToken:
|
|
1219
|
-
_this.focusActiveToken();
|
|
1220
|
-
break;
|
|
1221
|
-
case SkyTokensMessageType.FocusPreviousToken:
|
|
1222
|
-
_this.focusPreviousToken();
|
|
1223
|
-
break;
|
|
1224
|
-
case SkyTokensMessageType.FocusNextToken:
|
|
1225
|
-
_this.focusNextToken();
|
|
1226
|
-
break;
|
|
1227
|
-
case SkyTokensMessageType.RemoveActiveToken:
|
|
1228
|
-
_this.removeActiveToken();
|
|
1229
|
-
break;
|
|
1230
|
-
}
|
|
1231
|
-
});
|
|
1232
|
-
}
|
|
1233
|
-
};
|
|
1234
|
-
SkyTokensComponent.prototype.notifyTokenSelected = function (token) {
|
|
1235
|
-
this.tokenSelected.emit({
|
|
1236
|
-
token: token
|
|
1237
|
-
});
|
|
1238
|
-
};
|
|
1239
|
-
SkyTokensComponent.ctorParameters = function () { return [
|
|
1240
|
-
{ type: ChangeDetectorRef }
|
|
1241
|
-
]; };
|
|
1242
|
-
__decorate([
|
|
1243
|
-
Input()
|
|
1244
|
-
], SkyTokensComponent.prototype, "disabled", null);
|
|
1245
|
-
__decorate([
|
|
1246
|
-
Input()
|
|
1247
|
-
], SkyTokensComponent.prototype, "dismissible", null);
|
|
1248
|
-
__decorate([
|
|
1249
|
-
Input()
|
|
1250
|
-
], SkyTokensComponent.prototype, "displayWith", null);
|
|
1251
|
-
__decorate([
|
|
1252
|
-
Input()
|
|
1253
|
-
], SkyTokensComponent.prototype, "trackWith", void 0);
|
|
1254
|
-
__decorate([
|
|
1255
|
-
Input()
|
|
1256
|
-
], SkyTokensComponent.prototype, "focusable", null);
|
|
1257
|
-
__decorate([
|
|
1258
|
-
Input()
|
|
1259
|
-
], SkyTokensComponent.prototype, "tokens", null);
|
|
1260
|
-
__decorate([
|
|
1261
|
-
Input()
|
|
1262
|
-
], SkyTokensComponent.prototype, "messageStream", null);
|
|
1263
|
-
__decorate([
|
|
1264
|
-
Output()
|
|
1265
|
-
], SkyTokensComponent.prototype, "focusIndexOverRange", void 0);
|
|
1266
|
-
__decorate([
|
|
1267
|
-
Output()
|
|
1268
|
-
], SkyTokensComponent.prototype, "focusIndexUnderRange", void 0);
|
|
1269
|
-
__decorate([
|
|
1270
|
-
Output()
|
|
1271
|
-
], SkyTokensComponent.prototype, "tokenSelected", void 0);
|
|
1272
|
-
__decorate([
|
|
1273
|
-
Output()
|
|
1274
|
-
], SkyTokensComponent.prototype, "tokensChange", void 0);
|
|
1275
|
-
__decorate([
|
|
1276
|
-
ViewChildren(SkyTokenComponent)
|
|
1277
|
-
], SkyTokensComponent.prototype, "tokenComponents", void 0);
|
|
1278
|
-
SkyTokensComponent = __decorate([
|
|
1279
|
-
Component({
|
|
1280
|
-
selector: 'sky-tokens',
|
|
1281
|
-
template: "<div *ngIf=\"tokens\"\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"(tokens && tokens.length) ? 'list' : null\"\n>\n <sky-token *ngFor=\"let token of tokens; let i = index; trackBy: trackTokenFn\"\n role=\"listitem\"\n [@.disabled]=\"!trackWith\"\n [@dismiss]\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\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\n class=\"sky-tokens-content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n",
|
|
1282
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1283
|
-
animations: [
|
|
1284
|
-
trigger('blockAnimationOnLoad', [
|
|
1285
|
-
transition(':enter', [])
|
|
1286
|
-
]),
|
|
1287
|
-
trigger('dismiss', [
|
|
1288
|
-
transition(':enter', [
|
|
1289
|
-
style({
|
|
1290
|
-
opacity: 0,
|
|
1291
|
-
width: 0
|
|
1292
|
-
}),
|
|
1293
|
-
animate('150ms ease-in', style({
|
|
1294
|
-
opacity: 1,
|
|
1295
|
-
width: '*'
|
|
1296
|
-
}))
|
|
1297
|
-
]),
|
|
1298
|
-
transition(':leave', [
|
|
1299
|
-
animate('150ms ease-in', style({
|
|
1300
|
-
opacity: 0,
|
|
1301
|
-
width: 0
|
|
1302
|
-
}))
|
|
1303
|
-
])
|
|
1304
|
-
])
|
|
1305
|
-
],
|
|
1306
|
-
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:\"\u200B\"}"]
|
|
1307
|
-
})
|
|
1308
|
-
], SkyTokensComponent);
|
|
1309
|
-
return SkyTokensComponent;
|
|
1310
|
-
}());
|
|
1311
|
-
|
|
1312
|
-
var SkyTokensModule = /** @class */ (function () {
|
|
1313
|
-
function SkyTokensModule() {
|
|
1314
|
-
}
|
|
1315
|
-
SkyTokensModule = __decorate([
|
|
1316
|
-
NgModule({
|
|
1317
|
-
declarations: [
|
|
1318
|
-
SkyTokenComponent,
|
|
1319
|
-
SkyTokensComponent
|
|
1320
|
-
],
|
|
1321
|
-
imports: [
|
|
1322
|
-
CommonModule,
|
|
1323
|
-
SkyI18nModule,
|
|
1324
|
-
SkyIconModule,
|
|
1325
|
-
SkyIndicatorsResourcesModule
|
|
1326
|
-
],
|
|
1327
|
-
exports: [
|
|
1328
|
-
SkyTokenComponent,
|
|
1329
|
-
SkyTokensComponent
|
|
1330
|
-
]
|
|
1331
|
-
})
|
|
1332
|
-
], SkyTokensModule);
|
|
1333
|
-
return SkyTokensModule;
|
|
1334
|
-
}());
|
|
1335
|
-
|
|
1336
|
-
// Need to add the following to classes which contain static methods.
|
|
1337
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
1338
|
-
/**
|
|
1339
|
-
* @internal
|
|
1340
|
-
* @dynamic
|
|
1341
|
-
*/
|
|
1342
|
-
var SkyWaitAdapterService = /** @class */ (function () {
|
|
1343
|
-
function SkyWaitAdapterService(rendererFactory) {
|
|
1344
|
-
this.rendererFactory = rendererFactory;
|
|
1345
|
-
this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
|
|
1346
|
-
}
|
|
1347
|
-
SkyWaitAdapterService_1 = SkyWaitAdapterService;
|
|
1348
|
-
SkyWaitAdapterService.prototype.ngOnDestroy = function () {
|
|
1349
|
-
this.clearListeners();
|
|
1350
|
-
};
|
|
1351
|
-
SkyWaitAdapterService.prototype.setWaitBounds = function (waitEl) {
|
|
1352
|
-
this.renderer.setStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
|
|
1353
|
-
};
|
|
1354
|
-
SkyWaitAdapterService.prototype.removeWaitBounds = function (waitEl) {
|
|
1355
|
-
this.renderer.removeStyle(waitEl.nativeElement.parentElement, 'position');
|
|
1356
|
-
};
|
|
1357
|
-
SkyWaitAdapterService.prototype.setBusyState = function (waitEl, isFullPage, isWaiting, isNonBlocking, waitComponentId) {
|
|
1358
|
-
var _this = this;
|
|
1359
|
-
if (isNonBlocking === void 0) { isNonBlocking = false; }
|
|
1360
|
-
var busyEl = isFullPage ? document.body : waitEl.nativeElement.parentElement;
|
|
1361
|
-
if (!isNonBlocking) {
|
|
1362
|
-
if (isWaiting) {
|
|
1363
|
-
this.renderer.setAttribute(busyEl, 'aria-busy', 'true');
|
|
1364
|
-
// Remove focus from page when full page blocking wait
|
|
1365
|
-
if (isFullPage || busyEl.contains(document.activeElement)) {
|
|
1366
|
-
this.clearDocumentFocus();
|
|
1367
|
-
}
|
|
1368
|
-
if (isFullPage) {
|
|
1369
|
-
SkyWaitAdapterService_1.isPageWaitActive = true;
|
|
1370
|
-
var endListenerFunc = this.renderer.listen(document.body, 'keydown', function (event) {
|
|
1371
|
-
/*istanbul ignore else */
|
|
1372
|
-
if (event.key) {
|
|
1373
|
-
if (event.key.toLowerCase() === 'tab') {
|
|
1374
|
-
event.target.blur();
|
|
1375
|
-
event.preventDefault();
|
|
1376
|
-
event.stopPropagation();
|
|
1377
|
-
event.stopImmediatePropagation();
|
|
1378
|
-
_this.clearDocumentFocus();
|
|
1379
|
-
}
|
|
1380
|
-
}
|
|
1381
|
-
});
|
|
1382
|
-
SkyWaitAdapterService_1.busyElements[waitComponentId] = {
|
|
1383
|
-
listener: endListenerFunc,
|
|
1384
|
-
busyEl: undefined
|
|
1385
|
-
};
|
|
1386
|
-
}
|
|
1387
|
-
else {
|
|
1388
|
-
var endListenerFunc = this.renderer.listen(busyEl, 'focusin', function (event) {
|
|
1389
|
-
if (!isNonBlocking) {
|
|
1390
|
-
event.preventDefault();
|
|
1391
|
-
event.stopPropagation();
|
|
1392
|
-
event.stopImmediatePropagation();
|
|
1393
|
-
if (SkyWaitAdapterService_1.isPageWaitActive) {
|
|
1394
|
-
_this.clearDocumentFocus();
|
|
1395
|
-
}
|
|
1396
|
-
else {
|
|
1397
|
-
// Propagate tab navigation if attempted into waited element
|
|
1398
|
-
var target = event.target;
|
|
1399
|
-
target.blur();
|
|
1400
|
-
_this.focusNextElement(target, _this.isShift(event), busyEl);
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1403
|
-
});
|
|
1404
|
-
SkyWaitAdapterService_1.busyElements[waitComponentId] = {
|
|
1405
|
-
listener: endListenerFunc,
|
|
1406
|
-
busyEl: busyEl
|
|
1407
|
-
};
|
|
1408
|
-
}
|
|
1409
|
-
}
|
|
1410
|
-
else {
|
|
1411
|
-
this.renderer.removeAttribute(busyEl, 'aria-busy');
|
|
1412
|
-
if (isFullPage) {
|
|
1413
|
-
SkyWaitAdapterService_1.isPageWaitActive = false;
|
|
1414
|
-
}
|
|
1415
|
-
if (waitComponentId in SkyWaitAdapterService_1.busyElements) {
|
|
1416
|
-
SkyWaitAdapterService_1.busyElements[waitComponentId].listener();
|
|
1417
|
-
delete SkyWaitAdapterService_1.busyElements[waitComponentId];
|
|
1418
|
-
}
|
|
1419
|
-
}
|
|
1420
|
-
}
|
|
1421
|
-
};
|
|
1422
|
-
SkyWaitAdapterService.prototype.focusNextElement = function (targetElement, shiftKey, busyEl) {
|
|
1423
|
-
var focussable = this.getFocussableElements();
|
|
1424
|
-
// If shift tab, go in the other direction
|
|
1425
|
-
var modifier = shiftKey ? -1 : 1;
|
|
1426
|
-
// Find the next navigable element that isn't waiting
|
|
1427
|
-
var startingIndex = focussable.indexOf(targetElement);
|
|
1428
|
-
var curIndex = startingIndex + modifier;
|
|
1429
|
-
while (focussable[curIndex] && this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1430
|
-
curIndex += modifier;
|
|
1431
|
-
}
|
|
1432
|
-
if (focussable[curIndex] && !this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1433
|
-
focussable[curIndex].focus();
|
|
1434
|
-
}
|
|
1435
|
-
else {
|
|
1436
|
-
// Try wrapping the navigation
|
|
1437
|
-
curIndex = modifier > 0 ? 0 : focussable.length - 1;
|
|
1438
|
-
while (curIndex !== startingIndex &&
|
|
1439
|
-
focussable[curIndex] &&
|
|
1440
|
-
this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1441
|
-
/* istanbul ignore next */
|
|
1442
|
-
/* sanity check */
|
|
1443
|
-
curIndex += modifier;
|
|
1444
|
-
}
|
|
1445
|
-
/* istanbul ignore else */
|
|
1446
|
-
/* sanity check */
|
|
1447
|
-
if (focussable[curIndex] && !this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1448
|
-
focussable[curIndex].focus();
|
|
1449
|
-
}
|
|
1450
|
-
else {
|
|
1451
|
-
// No valid target, wipe focus
|
|
1452
|
-
this.clearDocumentFocus();
|
|
1453
|
-
}
|
|
1454
|
-
}
|
|
1455
|
-
// clear focussableElements list
|
|
1456
|
-
this.focussableElements = undefined;
|
|
1457
|
-
};
|
|
1458
|
-
SkyWaitAdapterService.prototype.isShift = function (event) {
|
|
1459
|
-
var _this = this;
|
|
1460
|
-
// Determine if shift+tab was used based on element order
|
|
1461
|
-
var elements = this.getFocussableElements().filter(function (elem) { return !_this.isElementHidden(elem); });
|
|
1462
|
-
var previousInd = elements.indexOf(event.relatedTarget);
|
|
1463
|
-
var currentInd = elements.indexOf(event.target);
|
|
1464
|
-
return previousInd === currentInd + 1
|
|
1465
|
-
|| (previousInd === 0 && currentInd === elements.length - 1)
|
|
1466
|
-
|| (previousInd > currentInd)
|
|
1467
|
-
|| !event.relatedTarget;
|
|
1468
|
-
};
|
|
1469
|
-
SkyWaitAdapterService.prototype.isElementHidden = function (element) {
|
|
1470
|
-
var style = window.getComputedStyle(element);
|
|
1471
|
-
return style.display === 'none' || style.visibility === 'hidden';
|
|
1472
|
-
};
|
|
1473
|
-
SkyWaitAdapterService.prototype.isElementBusyOrHidden = function (element) {
|
|
1474
|
-
var e_1, _a;
|
|
1475
|
-
if (this.isElementHidden(element)) {
|
|
1476
|
-
return true;
|
|
1477
|
-
}
|
|
1478
|
-
try {
|
|
1479
|
-
for (var _b = __values(Object.keys(SkyWaitAdapterService_1.busyElements)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
1480
|
-
var key = _c.value;
|
|
1481
|
-
var parentElement = SkyWaitAdapterService_1.busyElements[key].busyEl;
|
|
1482
|
-
if (parentElement && parentElement.contains(element)) {
|
|
1483
|
-
return true;
|
|
1484
|
-
}
|
|
1485
|
-
}
|
|
1486
|
-
}
|
|
1487
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
1488
|
-
finally {
|
|
1489
|
-
try {
|
|
1490
|
-
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
1491
|
-
}
|
|
1492
|
-
finally { if (e_1) throw e_1.error; }
|
|
1493
|
-
}
|
|
1494
|
-
return false;
|
|
1495
|
-
};
|
|
1496
|
-
SkyWaitAdapterService.prototype.clearDocumentFocus = function () {
|
|
1497
|
-
if (document.activeElement && document.activeElement.blur) {
|
|
1498
|
-
document.activeElement.blur();
|
|
1499
|
-
}
|
|
1500
|
-
document.body.focus();
|
|
1501
|
-
};
|
|
1502
|
-
SkyWaitAdapterService.prototype.getFocussableElements = function () {
|
|
1503
|
-
// Keep this cached so we can reduce querys
|
|
1504
|
-
if (this.focussableElements) {
|
|
1505
|
-
return this.focussableElements;
|
|
1506
|
-
}
|
|
1507
|
-
// Select all possible focussable elements
|
|
1508
|
-
var focussableElements = 'a[href], ' +
|
|
1509
|
-
'area[href], ' +
|
|
1510
|
-
'input:not([disabled]):not([tabindex=\'-1\']), ' +
|
|
1511
|
-
'button:not([disabled]):not([tabindex=\'-1\']), ' +
|
|
1512
|
-
'select:not([disabled]):not([tabindex=\'-1\']), ' +
|
|
1513
|
-
'textarea:not([disabled]):not([tabindex=\'-1\']), ' +
|
|
1514
|
-
'iframe, object, embed, ' +
|
|
1515
|
-
'*[tabindex]:not([tabindex=\'-1\']), ' +
|
|
1516
|
-
'*[contenteditable=true]';
|
|
1517
|
-
this.focussableElements = Array.prototype.filter.call(document.body.querySelectorAll(focussableElements), function (element) {
|
|
1518
|
-
return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
|
|
1519
|
-
});
|
|
1520
|
-
return this.focussableElements;
|
|
1521
|
-
};
|
|
1522
|
-
SkyWaitAdapterService.prototype.clearListeners = function () {
|
|
1523
|
-
var e_2, _a;
|
|
1524
|
-
SkyWaitAdapterService_1.isPageWaitActive = false;
|
|
1525
|
-
try {
|
|
1526
|
-
for (var _b = __values(Object.keys(SkyWaitAdapterService_1.busyElements)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
1527
|
-
var key = _c.value;
|
|
1528
|
-
SkyWaitAdapterService_1.busyElements[key].listener();
|
|
1529
|
-
delete SkyWaitAdapterService_1.busyElements[key];
|
|
1530
|
-
}
|
|
1531
|
-
}
|
|
1532
|
-
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
1533
|
-
finally {
|
|
1534
|
-
try {
|
|
1535
|
-
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
1536
|
-
}
|
|
1537
|
-
finally { if (e_2) throw e_2.error; }
|
|
1538
|
-
}
|
|
1539
|
-
};
|
|
1540
|
-
var SkyWaitAdapterService_1;
|
|
1541
|
-
SkyWaitAdapterService.isPageWaitActive = false;
|
|
1542
|
-
SkyWaitAdapterService.busyElements = {};
|
|
1543
|
-
SkyWaitAdapterService.ctorParameters = function () { return [
|
|
1544
|
-
{ type: RendererFactory2 }
|
|
1545
|
-
]; };
|
|
1546
|
-
SkyWaitAdapterService = SkyWaitAdapterService_1 = __decorate([
|
|
1547
|
-
Injectable()
|
|
1548
|
-
], SkyWaitAdapterService);
|
|
1549
|
-
return SkyWaitAdapterService;
|
|
1550
|
-
}());
|
|
1551
|
-
|
|
1552
|
-
var nextId = 0;
|
|
1553
|
-
var SkyWaitComponent = /** @class */ (function () {
|
|
1554
|
-
function SkyWaitComponent(elRef, adapterService, resourceService) {
|
|
1555
|
-
this.elRef = elRef;
|
|
1556
|
-
this.adapterService = adapterService;
|
|
1557
|
-
this.resourceService = resourceService;
|
|
1558
|
-
this.ariaLabelStream = new BehaviorSubject('');
|
|
1559
|
-
this.id = "sky-wait-" + ++nextId;
|
|
1560
|
-
}
|
|
1561
|
-
Object.defineProperty(SkyWaitComponent.prototype, "isWaiting", {
|
|
1562
|
-
get: function () {
|
|
1563
|
-
return this._isWaiting;
|
|
1564
|
-
},
|
|
1565
|
-
/**
|
|
1566
|
-
* When set to `true`, wait indication appears on the parent element of the `sky-wait` component.
|
|
1567
|
-
*/
|
|
1568
|
-
set: function (value) {
|
|
1569
|
-
if (value && !this._isFullPage) {
|
|
1570
|
-
this.adapterService.setWaitBounds(this.elRef);
|
|
1571
|
-
}
|
|
1572
|
-
else if (!value && !this._isFullPage) {
|
|
1573
|
-
this.adapterService.removeWaitBounds(this.elRef);
|
|
1574
|
-
}
|
|
1575
|
-
this.adapterService.setBusyState(this.elRef, this.isFullPage, value, this.isNonBlocking, this.id);
|
|
1576
|
-
this._isWaiting = value;
|
|
1577
|
-
},
|
|
1578
|
-
enumerable: true,
|
|
1579
|
-
configurable: true
|
|
1580
|
-
});
|
|
1581
|
-
Object.defineProperty(SkyWaitComponent.prototype, "isFullPage", {
|
|
1582
|
-
get: function () {
|
|
1583
|
-
return this._isFullPage;
|
|
1584
|
-
},
|
|
1585
|
-
/**
|
|
1586
|
-
* When set to `true`, wait indication appears on the page level instead of the
|
|
1587
|
-
* parent element level. We recommend that you use the `beginBlockingPageWait` or
|
|
1588
|
-
* `beginNonBlockingPageWait` functions of the `SkyWaitService` instead of setting this
|
|
1589
|
-
* on the component level.
|
|
1590
|
-
* @default false
|
|
1591
|
-
*/
|
|
1592
|
-
set: function (value) {
|
|
1593
|
-
if (value) {
|
|
1594
|
-
this.adapterService.removeWaitBounds(this.elRef);
|
|
1595
|
-
}
|
|
1596
|
-
else if (!value && this._isWaiting) {
|
|
1597
|
-
this.adapterService.setWaitBounds(this.elRef);
|
|
1598
|
-
}
|
|
1599
|
-
this._isFullPage = value;
|
|
1600
|
-
},
|
|
1601
|
-
enumerable: true,
|
|
1602
|
-
configurable: true
|
|
1603
|
-
});
|
|
1604
|
-
SkyWaitComponent.prototype.ngOnInit = function () {
|
|
1605
|
-
this.publishAriaLabel();
|
|
1606
|
-
};
|
|
1607
|
-
SkyWaitComponent.prototype.publishAriaLabel = function () {
|
|
1608
|
-
var _this = this;
|
|
1609
|
-
if (this.ariaLabel) {
|
|
1610
|
-
this.ariaLabelStream.next(this.ariaLabel);
|
|
1611
|
-
return;
|
|
1612
|
-
}
|
|
1613
|
-
if (this.resourceService) {
|
|
1614
|
-
var type = (this.isFullPage) ? '_page' : '';
|
|
1615
|
-
var blocking = (this.isNonBlocking) ? '' : '_blocking';
|
|
1616
|
-
var key = "skyux_wait" + type + blocking + "_aria_alt_text";
|
|
1617
|
-
this.resourceService.getString(key).subscribe(function (value) {
|
|
1618
|
-
_this.ariaLabelStream.next(value);
|
|
1619
|
-
});
|
|
1620
|
-
}
|
|
1621
|
-
};
|
|
1622
|
-
SkyWaitComponent.ctorParameters = function () { return [
|
|
1623
|
-
{ type: ElementRef },
|
|
1624
|
-
{ type: SkyWaitAdapterService },
|
|
1625
|
-
{ type: SkyLibResourcesService, decorators: [{ type: Optional }] }
|
|
1626
|
-
]; };
|
|
1627
|
-
__decorate([
|
|
1628
|
-
Input()
|
|
1629
|
-
], SkyWaitComponent.prototype, "ariaLabel", void 0);
|
|
1630
|
-
__decorate([
|
|
1631
|
-
Input()
|
|
1632
|
-
], SkyWaitComponent.prototype, "isWaiting", null);
|
|
1633
|
-
__decorate([
|
|
1634
|
-
Input()
|
|
1635
|
-
], SkyWaitComponent.prototype, "isFullPage", null);
|
|
1636
|
-
__decorate([
|
|
1637
|
-
Input()
|
|
1638
|
-
], SkyWaitComponent.prototype, "isNonBlocking", void 0);
|
|
1639
|
-
SkyWaitComponent = __decorate([
|
|
1640
|
-
Component({
|
|
1641
|
-
selector: 'sky-wait',
|
|
1642
|
-
template: "<div\n class=\"sky-wait-container\"\n>\n <div *ngIf=\"isWaiting\"\n class=\"sky-wait-mask\"\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\n class=\"sky-wait\"\n >\n <div\n class=\"sky-wait-double-bounce1\"\n >\n </div>\n <div\n class=\"sky-wait-double-bounce2\"\n >\n </div>\n </div>\n </div>\n</div>\n\n",
|
|
1643
|
-
providers: [
|
|
1644
|
-
SkyWaitAdapterService
|
|
1645
|
-
],
|
|
1646
|
-
styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(255,255,255,.7);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{top:auto;right:auto;bottom:0;left: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;-webkit-animation:2s ease-in-out infinite sk-bounce;animation:2s ease-in-out infinite sk-bounce}.sky-wait-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}"]
|
|
1647
|
-
}),
|
|
1648
|
-
__param(2, Optional())
|
|
1649
|
-
], SkyWaitComponent);
|
|
1650
|
-
return SkyWaitComponent;
|
|
1651
|
-
}());
|
|
1652
|
-
|
|
1653
|
-
/**
|
|
1654
|
-
* @internal
|
|
1655
|
-
*/
|
|
1656
|
-
var SkyWaitPageComponent = /** @class */ (function () {
|
|
1657
|
-
function SkyWaitPageComponent() {
|
|
1658
|
-
}
|
|
1659
|
-
__decorate([
|
|
1660
|
-
Input()
|
|
1661
|
-
], SkyWaitPageComponent.prototype, "hasBlockingWait", void 0);
|
|
1662
|
-
__decorate([
|
|
1663
|
-
Input()
|
|
1664
|
-
], SkyWaitPageComponent.prototype, "hasNonBlockingWait", void 0);
|
|
1665
|
-
SkyWaitPageComponent = __decorate([
|
|
1666
|
-
Component({
|
|
1667
|
-
selector: 'sky-wait-page',
|
|
1668
|
-
template: "<div\n class=\"sky-wait-page\"\n>\n <sky-wait\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n >\n </sky-wait>\n <sky-wait\n [isFullPage]=\"true\"\n [isWaiting]=\"hasBlockingWait\"\n >\n </sky-wait>\n</div>\n",
|
|
1669
|
-
styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}"]
|
|
1670
|
-
})
|
|
1671
|
-
], SkyWaitPageComponent);
|
|
1672
|
-
return SkyWaitPageComponent;
|
|
1673
|
-
}());
|
|
1674
|
-
|
|
1675
|
-
var SkyWaitModule = /** @class */ (function () {
|
|
1676
|
-
function SkyWaitModule() {
|
|
1677
|
-
}
|
|
1678
|
-
SkyWaitModule = __decorate([
|
|
1679
|
-
NgModule({
|
|
1680
|
-
declarations: [
|
|
1681
|
-
SkyWaitComponent,
|
|
1682
|
-
SkyWaitPageComponent
|
|
1683
|
-
],
|
|
1684
|
-
imports: [
|
|
1685
|
-
CommonModule,
|
|
1686
|
-
SkyI18nModule,
|
|
1687
|
-
SkyIndicatorsResourcesModule
|
|
1688
|
-
],
|
|
1689
|
-
exports: [
|
|
1690
|
-
SkyWaitComponent,
|
|
1691
|
-
SkyWaitPageComponent
|
|
1692
|
-
],
|
|
1693
|
-
entryComponents: [
|
|
1694
|
-
SkyWaitPageComponent
|
|
1695
|
-
]
|
|
1696
|
-
})
|
|
1697
|
-
], SkyWaitModule);
|
|
1698
|
-
return SkyWaitModule;
|
|
1699
|
-
}());
|
|
1700
|
-
|
|
1701
|
-
/**
|
|
1702
|
-
* @internal
|
|
1703
|
-
*/
|
|
1704
|
-
var SkyWaitPageAdapterService = /** @class */ (function () {
|
|
1705
|
-
function SkyWaitPageAdapterService() {
|
|
1706
|
-
}
|
|
1707
|
-
SkyWaitPageAdapterService.prototype.addPageWaitEl = function () {
|
|
1708
|
-
document.body.appendChild(document.createElement('sky-wait-page'));
|
|
1709
|
-
};
|
|
1710
|
-
SkyWaitPageAdapterService.prototype.removePageWaitEl = function () {
|
|
1711
|
-
document.body.removeChild(document.querySelector('sky-wait-page'));
|
|
1712
|
-
};
|
|
1713
|
-
SkyWaitPageAdapterService.ɵprov = ɵɵdefineInjectable({ factory: function SkyWaitPageAdapterService_Factory() { return new SkyWaitPageAdapterService(); }, token: SkyWaitPageAdapterService, providedIn: "root" });
|
|
1714
|
-
SkyWaitPageAdapterService = __decorate([
|
|
1715
|
-
Injectable({
|
|
1716
|
-
providedIn: 'root'
|
|
1717
|
-
})
|
|
1718
|
-
], SkyWaitPageAdapterService);
|
|
1719
|
-
return SkyWaitPageAdapterService;
|
|
1720
|
-
}());
|
|
1721
|
-
|
|
1722
|
-
// Need to add the following to classes which contain static methods.
|
|
1723
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
1724
|
-
// @dynamic
|
|
1725
|
-
var SkyWaitService = /** @class */ (function () {
|
|
1726
|
-
function SkyWaitService(resolver, appRef, waitAdapter, windowSvc) {
|
|
1727
|
-
this.resolver = resolver;
|
|
1728
|
-
this.appRef = appRef;
|
|
1729
|
-
this.waitAdapter = waitAdapter;
|
|
1730
|
-
this.windowSvc = windowSvc;
|
|
1731
|
-
}
|
|
1732
|
-
SkyWaitService_1 = SkyWaitService;
|
|
1733
|
-
/**
|
|
1734
|
-
* Starts a blocking page wait on the page.
|
|
1735
|
-
*/
|
|
1736
|
-
SkyWaitService.prototype.beginBlockingPageWait = function () {
|
|
1737
|
-
this.beginPageWait(true);
|
|
1738
|
-
};
|
|
1739
|
-
/**
|
|
1740
|
-
* Starts a non-blocking page wait on the page.
|
|
1741
|
-
*/
|
|
1742
|
-
SkyWaitService.prototype.beginNonBlockingPageWait = function () {
|
|
1743
|
-
this.beginPageWait(false);
|
|
1744
|
-
};
|
|
1745
|
-
/**
|
|
1746
|
-
* Ends a blocking page wait on the page. Blocking page wait indication
|
|
1747
|
-
* is removed when all running blocking page waits are ended.
|
|
1748
|
-
*/
|
|
1749
|
-
SkyWaitService.prototype.endBlockingPageWait = function () {
|
|
1750
|
-
this.endPageWait(true);
|
|
1751
|
-
};
|
|
1752
|
-
/**
|
|
1753
|
-
* Ends a non-blocking page wait on the page. Non-blocking page wait indication
|
|
1754
|
-
* is removed when all running non-blocking page waits are ended.
|
|
1755
|
-
*/
|
|
1756
|
-
SkyWaitService.prototype.endNonBlockingPageWait = function () {
|
|
1757
|
-
this.endPageWait(false);
|
|
1758
|
-
};
|
|
1759
|
-
/**
|
|
1760
|
-
* Clears all blocking and non-blocking page waits on the page.
|
|
1761
|
-
*/
|
|
1762
|
-
SkyWaitService.prototype.clearAllPageWaits = function () {
|
|
1763
|
-
this.clearPageWait(true);
|
|
1764
|
-
this.clearPageWait(false);
|
|
1765
|
-
};
|
|
1766
|
-
/**
|
|
1767
|
-
* @internal
|
|
1768
|
-
*/
|
|
1769
|
-
SkyWaitService.prototype.dispose = function () {
|
|
1770
|
-
if (SkyWaitService_1.waitComponent) {
|
|
1771
|
-
SkyWaitService_1.waitComponent = undefined;
|
|
1772
|
-
SkyWaitService_1.pageWaitBlockingCount = 0;
|
|
1773
|
-
SkyWaitService_1.pageWaitNonBlockingCount = 0;
|
|
1774
|
-
this.waitAdapter.removePageWaitEl();
|
|
1775
|
-
}
|
|
1776
|
-
};
|
|
1777
|
-
/**
|
|
1778
|
-
* Launches a page wait and automatically stops when the specific asynchronous event completes.
|
|
1779
|
-
*/
|
|
1780
|
-
SkyWaitService.prototype.blockingWrap = function (observable) {
|
|
1781
|
-
var _this = this;
|
|
1782
|
-
return defer(function () {
|
|
1783
|
-
_this.beginBlockingPageWait();
|
|
1784
|
-
return observable.pipe(finalize(function () { return _this.endBlockingPageWait(); }));
|
|
1785
|
-
});
|
|
1786
|
-
};
|
|
1787
|
-
/**
|
|
1788
|
-
* Launches a non-blocking page wait and automatically stops when the specific
|
|
1789
|
-
* asynchronous event completes.
|
|
1790
|
-
*/
|
|
1791
|
-
SkyWaitService.prototype.nonBlockingWrap = function (observable) {
|
|
1792
|
-
var _this = this;
|
|
1793
|
-
return defer(function () {
|
|
1794
|
-
_this.beginNonBlockingPageWait();
|
|
1795
|
-
return observable.pipe(finalize(function () { return _this.endNonBlockingPageWait(); }));
|
|
1796
|
-
});
|
|
1797
|
-
};
|
|
1798
|
-
SkyWaitService.prototype.setWaitComponentProperties = function (isBlocking) {
|
|
1799
|
-
if (isBlocking) {
|
|
1800
|
-
SkyWaitService_1.waitComponent.hasBlockingWait = true;
|
|
1801
|
-
SkyWaitService_1.pageWaitBlockingCount++;
|
|
1802
|
-
}
|
|
1803
|
-
else {
|
|
1804
|
-
SkyWaitService_1.waitComponent.hasNonBlockingWait = true;
|
|
1805
|
-
SkyWaitService_1.pageWaitNonBlockingCount++;
|
|
1806
|
-
}
|
|
1807
|
-
};
|
|
1808
|
-
SkyWaitService.prototype.beginPageWait = function (isBlocking) {
|
|
1809
|
-
var _this = this;
|
|
1810
|
-
if (!SkyWaitService_1.waitComponent) {
|
|
1811
|
-
/*
|
|
1812
|
-
Dynamic component creation needs to be done in a timeout to prevent ApplicationRef from
|
|
1813
|
-
crashing when wait service is called in Angular lifecycle functions.
|
|
1814
|
-
*/
|
|
1815
|
-
this.windowSvc.nativeWindow.setTimeout(function () {
|
|
1816
|
-
// Ensuring here that we recheck this after the setTimeout is over so that we don't clash
|
|
1817
|
-
// with any other waits that are created.
|
|
1818
|
-
if (!SkyWaitService_1.waitComponent) {
|
|
1819
|
-
var factory = _this.resolver.resolveComponentFactory(SkyWaitPageComponent);
|
|
1820
|
-
_this.waitAdapter.addPageWaitEl();
|
|
1821
|
-
var cmpRef = _this.appRef.bootstrap(factory);
|
|
1822
|
-
SkyWaitService_1.waitComponent = cmpRef.instance;
|
|
1823
|
-
}
|
|
1824
|
-
_this.setWaitComponentProperties(isBlocking);
|
|
1825
|
-
});
|
|
1826
|
-
}
|
|
1827
|
-
else {
|
|
1828
|
-
this.setWaitComponentProperties(isBlocking);
|
|
1829
|
-
}
|
|
1830
|
-
};
|
|
1831
|
-
SkyWaitService.prototype.endPageWait = function (isBlocking) {
|
|
1832
|
-
/*
|
|
1833
|
-
Needs to yield so that wait creation can finish
|
|
1834
|
-
before it is dismissed in the event of a race.
|
|
1835
|
-
*/
|
|
1836
|
-
this.windowSvc.nativeWindow.setTimeout(function () {
|
|
1837
|
-
if (SkyWaitService_1.waitComponent) {
|
|
1838
|
-
if (isBlocking) {
|
|
1839
|
-
if (SkyWaitService_1.pageWaitBlockingCount > 0) {
|
|
1840
|
-
SkyWaitService_1.pageWaitBlockingCount--;
|
|
1841
|
-
}
|
|
1842
|
-
if (SkyWaitService_1.pageWaitBlockingCount < 1) {
|
|
1843
|
-
SkyWaitService_1.waitComponent.hasBlockingWait = false;
|
|
1844
|
-
}
|
|
1845
|
-
}
|
|
1846
|
-
else {
|
|
1847
|
-
if (SkyWaitService_1.pageWaitNonBlockingCount > 0) {
|
|
1848
|
-
SkyWaitService_1.pageWaitNonBlockingCount--;
|
|
1849
|
-
}
|
|
1850
|
-
if (SkyWaitService_1.pageWaitNonBlockingCount < 1) {
|
|
1851
|
-
SkyWaitService_1.waitComponent.hasNonBlockingWait = false;
|
|
1852
|
-
}
|
|
1853
|
-
}
|
|
1854
|
-
}
|
|
1855
|
-
});
|
|
1856
|
-
};
|
|
1857
|
-
SkyWaitService.prototype.clearPageWait = function (isBlocking) {
|
|
1858
|
-
if (SkyWaitService_1.waitComponent) {
|
|
1859
|
-
if (isBlocking) {
|
|
1860
|
-
SkyWaitService_1.pageWaitBlockingCount = 0;
|
|
1861
|
-
SkyWaitService_1.waitComponent.hasBlockingWait = false;
|
|
1862
|
-
}
|
|
1863
|
-
else {
|
|
1864
|
-
SkyWaitService_1.pageWaitNonBlockingCount = 0;
|
|
1865
|
-
SkyWaitService_1.waitComponent.hasNonBlockingWait = false;
|
|
1866
|
-
}
|
|
1867
|
-
}
|
|
1868
|
-
};
|
|
1869
|
-
var SkyWaitService_1;
|
|
1870
|
-
SkyWaitService.pageWaitBlockingCount = 0;
|
|
1871
|
-
SkyWaitService.pageWaitNonBlockingCount = 0;
|
|
1872
|
-
SkyWaitService.ctorParameters = function () { return [
|
|
1873
|
-
{ type: ComponentFactoryResolver },
|
|
1874
|
-
{ type: ApplicationRef },
|
|
1875
|
-
{ type: SkyWaitPageAdapterService },
|
|
1876
|
-
{ type: SkyAppWindowRef }
|
|
1877
|
-
]; };
|
|
1878
|
-
SkyWaitService.ɵprov = ɵɵdefineInjectable({ factory: function SkyWaitService_Factory() { return new SkyWaitService(ɵɵinject(ComponentFactoryResolver), ɵɵinject(ApplicationRef), ɵɵinject(SkyWaitPageAdapterService), ɵɵinject(SkyAppWindowRef)); }, token: SkyWaitService, providedIn: "root" });
|
|
1879
|
-
SkyWaitService = SkyWaitService_1 = __decorate([
|
|
1880
|
-
Injectable({
|
|
1881
|
-
providedIn: 'root'
|
|
1882
|
-
})
|
|
1883
|
-
], SkyWaitService);
|
|
1884
|
-
return SkyWaitService;
|
|
1885
|
-
}());
|
|
1886
|
-
|
|
1887
|
-
/**
|
|
1888
|
-
* Generated bundle index. Do not edit.
|
|
1889
|
-
*/
|
|
1890
|
-
|
|
1891
|
-
export { SkyAlertModule, SkyChevronModule, SkyHelpInlineModule, SkyIconModule, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as ɵa, SkyIconClassListPipe as ɵb, SkyIconResolverService as ɵc, SkyIconComponent as ɵd, SkyIconStackComponent as ɵe, SkyIndicatorsResourcesModule as ɵf, SkyIndicatorsResourcesProvider as ɵg, SkyChevronComponent as ɵh, SkyHelpInlineComponent as ɵi, SkyKeyInfoComponent as ɵj, SkyKeyInfoLabelComponent as ɵk, SkyKeyInfoValueComponent as ɵl, SkyLabelComponent as ɵm, SkyStatusIndicatorComponent as ɵn, SkyTextHighlightDirective as ɵo, SkyTokenComponent as ɵp, SkyTokensComponent as ɵq, SkyWaitComponent as ɵr, SkyWaitAdapterService as ɵs, SkyWaitPageComponent as ɵt, SkyWaitPageAdapterService as ɵu };
|
|
1892
|
-
//# sourceMappingURL=skyux-indicators.js.map
|