@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.
Files changed (199) hide show
  1. package/LICENSE +21 -0
  2. package/bundles/skyux-indicators-testing.umd.js +15 -11
  3. package/bundles/skyux-indicators-testing.umd.js.map +1 -1
  4. package/bundles/skyux-indicators.umd.js +1113 -858
  5. package/bundles/skyux-indicators.umd.js.map +1 -1
  6. package/documentation.json +6097 -0
  7. package/esm2015/modules/alert/alert.component.js +27 -24
  8. package/esm2015/modules/alert/alert.module.js +31 -18
  9. package/esm2015/modules/chevron/chevron.component.js +24 -24
  10. package/esm2015/modules/chevron/chevron.module.js +29 -18
  11. package/esm2015/modules/help-inline/help-inline.component.js +20 -15
  12. package/esm2015/modules/help-inline/help-inline.module.js +31 -18
  13. package/esm2015/modules/icon/icon-class-list.pipe.js +13 -14
  14. package/esm2015/modules/icon/icon-resolver.service.js +11 -15
  15. package/esm2015/modules/icon/icon-stack-item.js +2 -1
  16. package/esm2015/modules/icon/icon-stack.component.js +22 -21
  17. package/esm2015/modules/icon/icon.component.js +27 -28
  18. package/esm2015/modules/icon/icon.module.js +30 -20
  19. package/esm2015/modules/icon/types/icon-type.js +2 -1
  20. package/esm2015/modules/icon/types/icon-variant-type.js +2 -1
  21. package/esm2015/modules/key-info/key-info-label.component.js +13 -11
  22. package/esm2015/modules/key-info/key-info-value.component.js +13 -11
  23. package/esm2015/modules/key-info/key-info.component.js +17 -15
  24. package/esm2015/modules/key-info/key-info.module.js +30 -21
  25. package/esm2015/modules/label/label-type.js +2 -1
  26. package/esm2015/modules/label/label.component.js +19 -15
  27. package/esm2015/modules/label/label.module.js +24 -17
  28. package/esm2015/modules/shared/indicator-description-type.js +2 -1
  29. package/esm2015/modules/shared/indicator-icon-type.js +2 -1
  30. package/esm2015/modules/shared/indicator-icon-utility.js +1 -1
  31. package/esm2015/modules/shared/indicator-icon.js +2 -1
  32. package/esm2015/modules/shared/sky-indicators-resources.module.js +41 -0
  33. package/esm2015/modules/status-indicator/status-indicator.component.js +26 -28
  34. package/esm2015/modules/status-indicator/status-indicator.module.js +29 -18
  35. package/esm2015/modules/text-highlight/text-highlight.directive.js +25 -25
  36. package/esm2015/modules/text-highlight/text-highlight.module.js +23 -18
  37. package/esm2015/modules/tokens/token.component.js +32 -40
  38. package/esm2015/modules/tokens/tokens.component.js +86 -74
  39. package/esm2015/modules/tokens/tokens.module.js +33 -20
  40. package/esm2015/modules/tokens/types/token-selected-event-args.js +2 -1
  41. package/esm2015/modules/tokens/types/token.js +2 -1
  42. package/esm2015/modules/tokens/types/tokens-message-type.js +1 -1
  43. package/esm2015/modules/tokens/types/tokens-message.js +2 -1
  44. package/esm2015/modules/wait/wait-adapter.service.js +29 -27
  45. package/esm2015/modules/wait/wait-page-adapter.service.js +15 -12
  46. package/esm2015/modules/wait/wait-page.component.js +19 -18
  47. package/esm2015/modules/wait/wait.component.js +35 -36
  48. package/esm2015/modules/wait/wait.module.js +32 -23
  49. package/esm2015/modules/wait/wait.service.js +37 -46
  50. package/esm2015/public-api.js +36 -0
  51. package/esm2015/skyux-indicators.js +2 -23
  52. package/esm2015/testing/alert-fixture.js +1 -1
  53. package/esm2015/testing/label-fixture.js +1 -1
  54. package/esm2015/testing/public-api.js +4 -0
  55. package/esm2015/testing/skyux-indicators-testing.js +2 -2
  56. package/esm2015/testing/wait-fixture.js +1 -1
  57. package/fesm2015/skyux-indicators-testing.js.map +1 -1
  58. package/fesm2015/skyux-indicators.js +752 -616
  59. package/fesm2015/skyux-indicators.js.map +1 -1
  60. package/modules/alert/alert.component.d.ts +3 -0
  61. package/modules/alert/alert.module.d.ts +10 -0
  62. package/modules/chevron/chevron.component.d.ts +4 -1
  63. package/modules/chevron/chevron.module.d.ts +9 -0
  64. package/modules/help-inline/help-inline.component.d.ts +3 -0
  65. package/modules/help-inline/help-inline.module.d.ts +10 -0
  66. package/modules/icon/icon-class-list.pipe.d.ts +3 -0
  67. package/modules/icon/icon-resolver.service.d.ts +3 -0
  68. package/modules/icon/icon-stack.component.d.ts +3 -0
  69. package/modules/icon/icon.component.d.ts +3 -0
  70. package/modules/icon/icon.module.d.ts +9 -0
  71. package/modules/key-info/key-info-label.component.d.ts +3 -0
  72. package/modules/key-info/key-info-value.component.d.ts +3 -0
  73. package/modules/key-info/key-info.component.d.ts +3 -0
  74. package/modules/key-info/key-info.module.d.ts +8 -0
  75. package/modules/label/label.component.d.ts +3 -0
  76. package/modules/label/label.module.d.ts +7 -0
  77. package/modules/shared/sky-indicators-resources.module.d.ts +14 -0
  78. package/modules/status-indicator/status-indicator.component.d.ts +3 -0
  79. package/modules/status-indicator/status-indicator.module.d.ts +9 -0
  80. package/modules/text-highlight/text-highlight.directive.d.ts +3 -0
  81. package/modules/text-highlight/text-highlight.module.d.ts +5 -0
  82. package/modules/tokens/token.component.d.ts +4 -1
  83. package/modules/tokens/tokens.component.d.ts +3 -0
  84. package/modules/tokens/tokens.module.d.ts +10 -0
  85. package/modules/wait/wait-adapter.service.d.ts +3 -0
  86. package/modules/wait/wait-page-adapter.service.d.ts +3 -0
  87. package/modules/wait/wait-page.component.d.ts +3 -0
  88. package/modules/wait/wait.component.d.ts +3 -0
  89. package/modules/wait/wait.module.d.ts +9 -0
  90. package/modules/wait/wait.service.d.ts +3 -0
  91. package/package.json +12 -27
  92. package/public-api.d.ts +33 -0
  93. package/skyux-indicators.d.ts +2 -22
  94. package/testing/package.json +2 -5
  95. package/testing/{public_api.d.ts → public-api.d.ts} +0 -0
  96. package/testing/skyux-indicators-testing.d.ts +2 -1
  97. package/CHANGELOG.md +0 -203
  98. package/bundles/skyux-indicators-testing.umd.min.js +0 -2
  99. package/bundles/skyux-indicators-testing.umd.min.js.map +0 -1
  100. package/bundles/skyux-indicators.umd.min.js +0 -16
  101. package/bundles/skyux-indicators.umd.min.js.map +0 -1
  102. package/esm2015/modules/shared/indicators-resources.module.js +0 -17
  103. package/esm2015/plugin-resources/indicators-resources-provider.js +0 -16
  104. package/esm2015/public_api.js +0 -13
  105. package/esm2015/testing/public_api.js +0 -4
  106. package/esm5/modules/alert/alert.component.js +0 -62
  107. package/esm5/modules/alert/alert.module.js +0 -32
  108. package/esm5/modules/chevron/chevron.component.js +0 -35
  109. package/esm5/modules/chevron/chevron.module.js +0 -30
  110. package/esm5/modules/help-inline/help-inline.component.js +0 -26
  111. package/esm5/modules/help-inline/help-inline.module.js +0 -32
  112. package/esm5/modules/icon/icon-class-list.pipe.js +0 -39
  113. package/esm5/modules/icon/icon-resolver.service.js +0 -57
  114. package/esm5/modules/icon/icon-stack-item.js +0 -1
  115. package/esm5/modules/icon/icon-stack.component.js +0 -25
  116. package/esm5/modules/icon/icon.component.js +0 -38
  117. package/esm5/modules/icon/icon.module.js +0 -31
  118. package/esm5/modules/icon/types/icon-type.js +0 -1
  119. package/esm5/modules/icon/types/icon-variant-type.js +0 -1
  120. package/esm5/modules/key-info/key-info-label.component.js +0 -19
  121. package/esm5/modules/key-info/key-info-value.component.js +0 -19
  122. package/esm5/modules/key-info/key-info.component.js +0 -25
  123. package/esm5/modules/key-info/key-info.module.js +0 -30
  124. package/esm5/modules/label/label-type.js +0 -1
  125. package/esm5/modules/label/label.component.js +0 -41
  126. package/esm5/modules/label/label.module.js +0 -26
  127. package/esm5/modules/shared/indicator-description-type.js +0 -1
  128. package/esm5/modules/shared/indicator-icon-type.js +0 -1
  129. package/esm5/modules/shared/indicator-icon-utility.js +0 -45
  130. package/esm5/modules/shared/indicator-icon.js +0 -1
  131. package/esm5/modules/shared/indicators-resources.module.js +0 -20
  132. package/esm5/modules/status-indicator/status-indicator.component.js +0 -111
  133. package/esm5/modules/status-indicator/status-indicator.module.js +0 -30
  134. package/esm5/modules/text-highlight/text-highlight.directive.js +0 -134
  135. package/esm5/modules/text-highlight/text-highlight.module.js +0 -24
  136. package/esm5/modules/tokens/token.component.js +0 -134
  137. package/esm5/modules/tokens/tokens.component.js +0 -325
  138. package/esm5/modules/tokens/tokens.module.js +0 -33
  139. package/esm5/modules/tokens/types/token-selected-event-args.js +0 -1
  140. package/esm5/modules/tokens/types/token.js +0 -1
  141. package/esm5/modules/tokens/types/tokens-message-type.js +0 -24
  142. package/esm5/modules/tokens/types/tokens-message.js +0 -1
  143. package/esm5/modules/wait/wait-adapter.service.js +0 -219
  144. package/esm5/modules/wait/wait-page-adapter.service.js +0 -25
  145. package/esm5/modules/wait/wait-page.component.js +0 -25
  146. package/esm5/modules/wait/wait.component.js +0 -107
  147. package/esm5/modules/wait/wait.module.js +0 -34
  148. package/esm5/modules/wait/wait.service.js +0 -176
  149. package/esm5/plugin-resources/indicators-resources-provider.js +0 -17
  150. package/esm5/public_api.js +0 -13
  151. package/esm5/skyux-indicators.js +0 -26
  152. package/esm5/testing/alert-fixture.js +0 -85
  153. package/esm5/testing/label-fixture.js +0 -50
  154. package/esm5/testing/public_api.js +0 -4
  155. package/esm5/testing/skyux-indicators-testing.js +0 -5
  156. package/esm5/testing/wait-fixture.js +0 -42
  157. package/fesm5/skyux-indicators-testing.js +0 -178
  158. package/fesm5/skyux-indicators-testing.js.map +0 -1
  159. package/fesm5/skyux-indicators.js +0 -1892
  160. package/fesm5/skyux-indicators.js.map +0 -1
  161. package/modules/shared/indicators-resources.module.d.ts +0 -2
  162. package/plugin-resources/indicators-resources-provider.d.ts +0 -5
  163. package/public_api.d.ts +0 -19
  164. package/skyux-indicators.metadata.json +0 -1
  165. package/src/assets/img/guidelines/alert/alert-anatomy.png +0 -0
  166. package/src/assets/img/guidelines/alert/alert-layout-1.png +0 -0
  167. package/src/assets/img/guidelines/alert/alert-layout-2.png +0 -0
  168. package/src/assets/img/guidelines/alert/alert-layout-3.png +0 -0
  169. package/src/assets/img/guidelines/alert/alert-option-1.png +0 -0
  170. package/src/assets/img/guidelines/alert/alert-type-1.png +0 -0
  171. package/src/assets/img/guidelines/alert/alert-type-2.png +0 -0
  172. package/src/assets/img/guidelines/alert/alert-type-3.png +0 -0
  173. package/src/assets/img/guidelines/alert/alert-type-4.png +0 -0
  174. package/src/assets/img/guidelines/alert/alert-usage-1.png +0 -0
  175. package/src/assets/img/guidelines/alert/alert-usage-2.png +0 -0
  176. package/src/assets/img/guidelines/alert/alert-usage-3.png +0 -0
  177. package/src/assets/img/guidelines/alert/alert-usage-4.png +0 -0
  178. package/src/assets/img/guidelines/alert/alert-usage-5.png +0 -0
  179. package/src/assets/img/guidelines/alert/alert-usage-6.png +0 -0
  180. package/src/assets/img/guidelines/key-info/horizontal-layout.png +0 -0
  181. package/src/assets/img/guidelines/key-info/key-info-anatomy.png +0 -0
  182. package/src/assets/img/guidelines/key-info/key-info-usage-1.png +0 -0
  183. package/src/assets/img/guidelines/key-info/key-info-usage-2.png +0 -0
  184. package/src/assets/img/guidelines/key-info/key-info-usage-3.png +0 -0
  185. package/src/assets/img/guidelines/key-info/key-info-usage-4.png +0 -0
  186. package/src/assets/img/guidelines/key-info/key-info-usage-5.png +0 -0
  187. package/src/assets/img/guidelines/key-info/key-info-usage-6.png +0 -0
  188. package/src/assets/img/guidelines/key-info/vertical-layout.png +0 -0
  189. package/src/assets/img/guidelines/status-indicator/status-indicator-anatomy.png +0 -0
  190. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-1.png +0 -0
  191. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-2-5.png +0 -0
  192. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-2.5.png +0 -0
  193. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-2.png +0 -0
  194. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-3.png +0 -0
  195. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-4.png +0 -0
  196. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-5.png +0 -0
  197. package/src/assets/img/guidelines/status-indicator/status-indicator-usage-6.png +0 -0
  198. package/src/assets/locales/resources_en_US.json +0 -54
  199. 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