@skyux/indicators 6.18.0 → 6.20.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 (60) hide show
  1. package/documentation.json +1715 -563
  2. package/esm2020/index.mjs +2 -1
  3. package/esm2020/lib/modules/icon/icon-stack.component.mjs +1 -1
  4. package/esm2020/lib/modules/icon/icon.component.mjs +1 -10
  5. package/esm2020/lib/modules/key-info/key-info-layout-type.mjs +2 -0
  6. package/esm2020/lib/modules/key-info/key-info.component.mjs +1 -1
  7. package/esm2020/lib/modules/status-indicator/status-indicator.component.mjs +6 -6
  8. package/esm2020/lib/modules/tokens/token.component.mjs +31 -29
  9. package/esm2020/lib/modules/tokens/tokens.component.mjs +100 -86
  10. package/esm2020/lib/modules/tokens/types/token.mjs +1 -1
  11. package/esm2020/lib/modules/wait/wait-adapter.service.mjs +131 -128
  12. package/esm2020/lib/modules/wait/wait-page.component.mjs +1 -1
  13. package/esm2020/lib/modules/wait/wait.component.mjs +83 -36
  14. package/esm2020/lib/modules/wait/wait.service.mjs +80 -73
  15. package/esm2020/testing/alert/alert-harness-filters.mjs +1 -1
  16. package/esm2020/testing/alert/alert-harness.mjs +53 -8
  17. package/esm2020/testing/key-info/key-info-harness-filters.mjs +2 -0
  18. package/esm2020/testing/key-info/key-info-harness.mjs +49 -0
  19. package/esm2020/testing/key-info/key-info-label-harness.mjs +18 -0
  20. package/esm2020/testing/key-info/key-info-value-harness.mjs +18 -0
  21. package/esm2020/testing/label/label-harness-filters.mjs +2 -0
  22. package/esm2020/testing/label/label-harness.mjs +94 -0
  23. package/esm2020/testing/public-api.mjs +7 -3
  24. package/esm2020/testing/tokens/token-harness.mjs +6 -3
  25. package/esm2020/testing/tokens/tokens-harness.mjs +4 -1
  26. package/esm2020/testing/wait-fixture.mjs +1 -1
  27. package/fesm2015/skyux-indicators-testing.mjs +329 -85
  28. package/fesm2015/skyux-indicators-testing.mjs.map +1 -1
  29. package/fesm2015/skyux-indicators.mjs +423 -364
  30. package/fesm2015/skyux-indicators.mjs.map +1 -1
  31. package/fesm2020/skyux-indicators-testing.mjs +297 -75
  32. package/fesm2020/skyux-indicators-testing.mjs.map +1 -1
  33. package/fesm2020/skyux-indicators.mjs +422 -364
  34. package/fesm2020/skyux-indicators.mjs.map +1 -1
  35. package/index.d.ts +1 -0
  36. package/lib/modules/icon/icon-stack.component.d.ts +1 -1
  37. package/lib/modules/icon/icon.component.d.ts +4 -4
  38. package/lib/modules/key-info/key-info-layout-type.d.ts +1 -0
  39. package/lib/modules/key-info/key-info.component.d.ts +2 -1
  40. package/lib/modules/status-indicator/status-indicator.component.d.ts +8 -8
  41. package/lib/modules/tokens/token.component.d.ts +10 -27
  42. package/lib/modules/tokens/tokens.component.d.ts +17 -34
  43. package/lib/modules/tokens/types/token.d.ts +2 -1
  44. package/lib/modules/wait/wait-adapter.service.d.ts +3 -13
  45. package/lib/modules/wait/wait-page.component.d.ts +2 -2
  46. package/lib/modules/wait/wait.component.d.ts +12 -16
  47. package/lib/modules/wait/wait.service.d.ts +1 -11
  48. package/package.json +5 -5
  49. package/testing/alert/alert-harness-filters.d.ts +0 -1
  50. package/testing/alert/alert-harness.d.ts +12 -2
  51. package/testing/key-info/key-info-harness-filters.d.ts +6 -0
  52. package/testing/key-info/key-info-harness.d.ts +31 -0
  53. package/testing/key-info/key-info-label-harness.d.ts +15 -0
  54. package/testing/key-info/key-info-value-harness.d.ts +15 -0
  55. package/testing/label/label-harness-filters.d.ts +6 -0
  56. package/testing/label/label-harness.d.ts +35 -0
  57. package/testing/public-api.d.ts +6 -2
  58. package/testing/tokens/token-harness.d.ts +3 -0
  59. package/testing/tokens/tokens-harness.d.ts +3 -0
  60. package/testing/wait-fixture.d.ts +1 -1
@@ -11,7 +11,7 @@ import * as i2 from '@skyux/core';
11
11
  import { SkyTrimModule, MutationObserverService } from '@skyux/core';
12
12
  import { trigger, transition, style, animate } from '@angular/animations';
13
13
  import { Subject, BehaviorSubject, defer } from 'rxjs';
14
- import { takeUntil, finalize } from 'rxjs/operators';
14
+ import { takeUntil, take, finalize } from 'rxjs/operators';
15
15
 
16
16
  /**
17
17
  * @internal
@@ -104,15 +104,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
104
104
  }] } });
105
105
 
106
106
  class SkyIconComponent {
107
- constructor() {
108
- /**
109
- * Specifies the type of icon to display. Specifying `"fa"` will display a Font Awesome icon,
110
- * while specifying `"skyux"` will display an icon from the custom SKY UX icon font. Note that
111
- * the custom SKY UX icon font is currently in beta.
112
- * @default "fa"
113
- */
114
- this.iconType = 'fa';
115
- }
116
107
  }
117
108
  SkyIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
118
109
  SkyIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyIconComponent, selector: "sky-icon", inputs: { icon: "icon", iconType: "iconType", size: "size", fixedWidth: "fixedWidth", variant: "variant" }, ngImport: i0, template: "<i\n *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [ngClass]=\"icon | skyIconClassList: iconType:size:fixedWidth:variant\"\n>\n</i>\n", styles: [":host{display:inline-block}i{display:inherit}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyIconClassList": SkyIconClassListPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -781,7 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
781
772
  }]
782
773
  }] });
783
774
 
784
- var _SkyStatusIndicatorComponent_instances, _SkyStatusIndicatorComponent_changeDetector, _SkyStatusIndicatorComponent_resources, _SkyStatusIndicatorComponent__descriptionType, _SkyStatusIndicatorComponent__customDescription, _SkyStatusIndicatorComponent_updateIcon, _SkyStatusIndicatorComponent_updateDescriptionComputed;
775
+ var _SkyStatusIndicatorComponent_instances, _SkyStatusIndicatorComponent_changeDetector, _SkyStatusIndicatorComponent_resourcesSvc, _SkyStatusIndicatorComponent__descriptionType, _SkyStatusIndicatorComponent__customDescription, _SkyStatusIndicatorComponent_updateIcon, _SkyStatusIndicatorComponent_updateDescriptionComputed;
785
776
  const INDICATOR_TYPE_DEFAULT = 'warning';
786
777
  /**
787
778
  * Displays status text with an icon matching the specified indicator type.
@@ -794,11 +785,11 @@ class SkyStatusIndicatorComponent {
794
785
  _SkyStatusIndicatorComponent_instances.add(this);
795
786
  this.indicatorTypeOrDefault = INDICATOR_TYPE_DEFAULT;
796
787
  _SkyStatusIndicatorComponent_changeDetector.set(this, void 0);
797
- _SkyStatusIndicatorComponent_resources.set(this, void 0);
788
+ _SkyStatusIndicatorComponent_resourcesSvc.set(this, void 0);
798
789
  _SkyStatusIndicatorComponent__descriptionType.set(this, void 0);
799
790
  _SkyStatusIndicatorComponent__customDescription.set(this, void 0);
800
791
  __classPrivateFieldSet(this, _SkyStatusIndicatorComponent_changeDetector, changeDetector, "f");
801
- __classPrivateFieldSet(this, _SkyStatusIndicatorComponent_resources, resources, "f");
792
+ __classPrivateFieldSet(this, _SkyStatusIndicatorComponent_resourcesSvc, resources, "f");
802
793
  }
803
794
  /**
804
795
  * Specifies a style for the status indicator to determine the icon.
@@ -836,7 +827,7 @@ class SkyStatusIndicatorComponent {
836
827
  __classPrivateFieldGet(this, _SkyStatusIndicatorComponent_instances, "m", _SkyStatusIndicatorComponent_updateIcon).call(this);
837
828
  }
838
829
  }
839
- _SkyStatusIndicatorComponent_changeDetector = new WeakMap(), _SkyStatusIndicatorComponent_resources = new WeakMap(), _SkyStatusIndicatorComponent__descriptionType = new WeakMap(), _SkyStatusIndicatorComponent__customDescription = new WeakMap(), _SkyStatusIndicatorComponent_instances = new WeakSet(), _SkyStatusIndicatorComponent_updateIcon = function _SkyStatusIndicatorComponent_updateIcon() {
830
+ _SkyStatusIndicatorComponent_changeDetector = new WeakMap(), _SkyStatusIndicatorComponent_resourcesSvc = new WeakMap(), _SkyStatusIndicatorComponent__descriptionType = new WeakMap(), _SkyStatusIndicatorComponent__customDescription = new WeakMap(), _SkyStatusIndicatorComponent_instances = new WeakSet(), _SkyStatusIndicatorComponent_updateIcon = function _SkyStatusIndicatorComponent_updateIcon() {
840
831
  const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.indicatorTypeOrDefault);
841
832
  this.icon = indicatorIcon.defaultThemeIcon;
842
833
  this.baseIcon = indicatorIcon.modernThemeBaseIcon;
@@ -851,7 +842,7 @@ _SkyStatusIndicatorComponent_changeDetector = new WeakMap(), _SkyStatusIndicator
851
842
  this.descriptionComputed = this.customDescription;
852
843
  break;
853
844
  default:
854
- __classPrivateFieldGet(this, _SkyStatusIndicatorComponent_resources, "f")
845
+ __classPrivateFieldGet(this, _SkyStatusIndicatorComponent_resourcesSvc, "f")
855
846
  .getString('skyux_status_indicator_sr_' +
856
847
  this.descriptionType.replace(/-/g, '_'))
857
848
  .subscribe((value) => {
@@ -1074,30 +1065,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
1074
1065
  }]
1075
1066
  }] });
1076
1067
 
1068
+ var _SkyTokenComponent_instances, _SkyTokenComponent_ariaLabelOrDefault, _SkyTokenComponent_elementRef, _SkyTokenComponent_resourcesSvc, _SkyTokenComponent__disabled, _SkyTokenComponent__dismissible, _SkyTokenComponent_getDefaultAriaLabel;
1077
1069
  class SkyTokenComponent {
1078
- constructor(elementRef, resourcesService) {
1079
- this.elementRef = elementRef;
1080
- this.resourcesService = resourcesService;
1070
+ constructor(elementRef, resourcesSvc) {
1071
+ _SkyTokenComponent_instances.add(this);
1081
1072
  /**
1082
- * Fires when users click the close button or press the `Backspace` key to dismiss the token.
1073
+ * Fires when users click the close button.
1083
1074
  */
1084
1075
  this.dismiss = new EventEmitter();
1085
1076
  /**
1086
1077
  * Fires when users place focus on the token by navigating to it with the `Tab` key.
1087
1078
  */
1088
1079
  this.tokenFocus = new EventEmitter();
1080
+ this.tokenActive = false;
1081
+ this.closeActive = false;
1082
+ this.tabIndex = 0;
1083
+ _SkyTokenComponent_ariaLabelOrDefault.set(this, void 0);
1084
+ _SkyTokenComponent_elementRef.set(this, void 0);
1085
+ _SkyTokenComponent_resourcesSvc.set(this, void 0);
1086
+ _SkyTokenComponent__disabled.set(this, false);
1087
+ _SkyTokenComponent__dismissible.set(this, true);
1088
+ __classPrivateFieldSet(this, _SkyTokenComponent_elementRef, elementRef, "f");
1089
+ __classPrivateFieldSet(this, _SkyTokenComponent_resourcesSvc, resourcesSvc, "f");
1090
+ __classPrivateFieldSet(this, _SkyTokenComponent_ariaLabelOrDefault, __classPrivateFieldGet(this, _SkyTokenComponent_instances, "m", _SkyTokenComponent_getDefaultAriaLabel).call(this), "f");
1089
1091
  }
1090
1092
  /**
1091
1093
  * Indicates whether to disable the token to prevent users from selecting it, dismissing it,
1092
1094
  * or navigating to it with the arrow keys. When the token is disabled,
1093
1095
  * users can still place focus on it using the `Tab` key.
1094
- * @default true
1096
+ * @default false
1095
1097
  */
1096
1098
  set disabled(value) {
1097
- this._disabled = value;
1099
+ __classPrivateFieldSet(this, _SkyTokenComponent__disabled, !!value, "f");
1098
1100
  }
1099
1101
  get disabled() {
1100
- return !!this._disabled;
1102
+ return __classPrivateFieldGet(this, _SkyTokenComponent__disabled, "f");
1101
1103
  }
1102
1104
  /**
1103
1105
  * Specifies an ARIA label for the token's close button. This sets the button's `aria-label`
@@ -1105,21 +1107,20 @@ class SkyTokenComponent {
1105
1107
  * @default "Remove item"
1106
1108
  */
1107
1109
  set ariaLabel(value) {
1108
- this._ariaLabel = value;
1110
+ __classPrivateFieldSet(this, _SkyTokenComponent_ariaLabelOrDefault, value || __classPrivateFieldGet(this, _SkyTokenComponent_instances, "m", _SkyTokenComponent_getDefaultAriaLabel).call(this), "f");
1109
1111
  }
1110
1112
  get ariaLabel() {
1111
- return (this._ariaLabel || this.getString('skyux_tokens_dismiss_button_title'));
1113
+ return __classPrivateFieldGet(this, _SkyTokenComponent_ariaLabelOrDefault, "f");
1112
1114
  }
1113
1115
  /**
1114
- * Indicates whether users can remove the token from the list by selecting the close button
1115
- * or pressing the `Backspace` key.
1116
+ * Indicates whether users can remove the token from the list by selecting the close button.
1116
1117
  * @default true
1117
1118
  */
1118
1119
  set dismissible(value) {
1119
- this._dismissible = value;
1120
+ __classPrivateFieldSet(this, _SkyTokenComponent__dismissible, value !== false, "f");
1120
1121
  }
1121
1122
  get dismissible() {
1122
- return this._dismissible !== false;
1123
+ return __classPrivateFieldGet(this, _SkyTokenComponent__dismissible, "f");
1123
1124
  }
1124
1125
  /**
1125
1126
  * Indicates whether users can press the `Tab` key to place focus on the token. This does not
@@ -1127,23 +1128,14 @@ class SkyTokenComponent {
1127
1128
  * @default true
1128
1129
  */
1129
1130
  set focusable(value) {
1130
- this._focusable = value;
1131
- }
1132
- get focusable() {
1133
- return this._focusable !== false;
1134
- }
1135
- /**
1136
- * @internal
1137
- */
1138
- get tabIndex() {
1139
- return this.focusable ? 0 : -1;
1131
+ this.tabIndex = value !== false ? 0 : -1;
1140
1132
  }
1141
1133
  dismissToken(event) {
1142
1134
  event.stopPropagation();
1143
1135
  this.dismiss.emit();
1144
1136
  }
1145
1137
  focusElement() {
1146
- this.elementRef.nativeElement.querySelector('.sky-token').focus();
1138
+ __classPrivateFieldGet(this, _SkyTokenComponent_elementRef, "f").nativeElement.querySelector('.sky-token').focus();
1147
1139
  }
1148
1140
  setTokenActive(tokenActive) {
1149
1141
  this.tokenActive = tokenActive;
@@ -1151,11 +1143,11 @@ class SkyTokenComponent {
1151
1143
  setCloseActive(closeActive) {
1152
1144
  this.closeActive = closeActive;
1153
1145
  }
1154
- getString(key) {
1155
- // TODO: Need to implement the async `getString` method in a breaking change.
1156
- return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
1157
- }
1158
1146
  }
1147
+ _SkyTokenComponent_ariaLabelOrDefault = new WeakMap(), _SkyTokenComponent_elementRef = new WeakMap(), _SkyTokenComponent_resourcesSvc = new WeakMap(), _SkyTokenComponent__disabled = new WeakMap(), _SkyTokenComponent__dismissible = new WeakMap(), _SkyTokenComponent_instances = new WeakSet(), _SkyTokenComponent_getDefaultAriaLabel = function _SkyTokenComponent_getDefaultAriaLabel() {
1148
+ // TODO: Need to implement the async `getString` method in a breaking change.
1149
+ return __classPrivateFieldGet(this, _SkyTokenComponent_resourcesSvc, "f").getStringForLocale({ locale: 'en-US' }, 'skyux_tokens_dismiss_button_title');
1150
+ };
1159
1151
  SkyTokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTokenComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
1160
1152
  SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, 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)=\"setTokenActive(false)\"\n (focus)=\"tokenFocus.emit()\"\n (mousedown)=\"setTokenActive(true)\"\n>\n <ng-content></ng-content>\n <button\n *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)=\"setCloseActive(false)\"\n (mousedown)=\"setCloseActive(true)\"\n >\n <sky-icon class=\"sky-token-btn-close-icon-default\" icon=\"times\"></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", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;overflow:hidden;padding:2px 8px;display:inline-block;-webkit-user-select:none;user-select:none}.sky-token:hover,.sky-token:focus{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token:focus{box-shadow:0 0 8px #00b4f199;border:1px solid #00b4f1;outline:none}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn-close{background:transparent;padding:0;border:0;margin-left:2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus{opacity:1}.sky-token-btn-close-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}:host-context(.sky-theme-modern) .sky-token.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissable{padding-right:1px}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token:focus,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus{outline:none}: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 #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}.sky-theme-modern .sky-token.sky-btn-disabled{color:#212327}.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{padding-right:1px}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token:focus,.sky-theme-modern .sky-token:hover{background-color:#c1e8fb}.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{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus{outline:none}.sky-theme-modern .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1161
1153
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTokenComponent, decorators: [{
@@ -1199,16 +1191,23 @@ var SkyTokensMessageType;
1199
1191
  SkyTokensMessageType[SkyTokensMessageType["RemoveActiveToken"] = 4] = "RemoveActiveToken";
1200
1192
  })(SkyTokensMessageType || (SkyTokensMessageType = {}));
1201
1193
 
1194
+ var _SkyTokensComponent_instances, _SkyTokensComponent__disabled, _SkyTokensComponent__dismissible, _SkyTokensComponent__focusable, _SkyTokensComponent__tokens, _SkyTokensComponent__displayWith, _SkyTokensComponent_messageStreamSub, _SkyTokensComponent_ngUnsubscribe, _SkyTokensComponent__messageStream, _SkyTokensComponent_changeDetector, _SkyTokensComponent__activeIndex, _SkyTokensComponent_focusPreviousToken, _SkyTokensComponent_focusNextToken, _SkyTokensComponent_focusLastToken, _SkyTokensComponent_focusActiveToken, _SkyTokensComponent_removeActiveToken, _SkyTokensComponent_initMessageStream, _SkyTokensComponent_notifyTokenSelected;
1195
+ const DISPLAY_WITH_DEFAULT = 'name';
1196
+ /**
1197
+ * Creates a container that enables navigation between tokens using keyboard arrow keys.
1198
+ * This is useful when combined with other components where the <kbd>Tab</kbd> key is
1199
+ * reserved for other functions, such as the SKY UX Lookup component.
1200
+ */
1202
1201
  class SkyTokensComponent {
1203
1202
  constructor(changeDetector) {
1204
- this.changeDetector = changeDetector;
1203
+ _SkyTokensComponent_instances.add(this);
1205
1204
  /**
1206
1205
  * Fires when users navigate through the tokens list with the `Tab` key
1207
1206
  * and attempt to move past the final token in the list.
1208
1207
  */
1209
1208
  this.focusIndexOverRange = new EventEmitter();
1210
1209
  /**
1211
- * Fires when usersnavigate through the tokens list with the `Tab` key
1210
+ * Fires when users navigate through the tokens list with the `Tab` key
1212
1211
  * and attempt to move before the first token in the list.
1213
1212
  */
1214
1213
  this.focusIndexUnderRange = new EventEmitter();
@@ -1221,7 +1220,17 @@ class SkyTokensComponent {
1221
1220
  * This event emits an array of the tokens in the updated list.
1222
1221
  */
1223
1222
  this.tokensChange = new EventEmitter();
1224
- this.ngUnsubscribe = new Subject();
1223
+ _SkyTokensComponent__disabled.set(this, false);
1224
+ _SkyTokensComponent__dismissible.set(this, true);
1225
+ _SkyTokensComponent__focusable.set(this, true);
1226
+ _SkyTokensComponent__tokens.set(this, []);
1227
+ _SkyTokensComponent__displayWith.set(this, DISPLAY_WITH_DEFAULT);
1228
+ _SkyTokensComponent_messageStreamSub.set(this, void 0);
1229
+ _SkyTokensComponent_ngUnsubscribe.set(this, new Subject());
1230
+ _SkyTokensComponent__messageStream.set(this, new Subject());
1231
+ _SkyTokensComponent_changeDetector.set(this, void 0);
1232
+ _SkyTokensComponent__activeIndex.set(this, 0);
1233
+ __classPrivateFieldSet(this, _SkyTokensComponent_changeDetector, changeDetector, "f");
1225
1234
  // Angular calls the trackBy function without applying the component instance's scope.
1226
1235
  // Use a fat-arrow function so the current component instance's trackWith property can
1227
1236
  // be referenced.
@@ -1239,31 +1248,30 @@ class SkyTokensComponent {
1239
1248
  * @default false
1240
1249
  */
1241
1250
  set disabled(value) {
1242
- this._disabled = value;
1251
+ __classPrivateFieldSet(this, _SkyTokensComponent__disabled, !!value, "f");
1243
1252
  }
1244
1253
  get disabled() {
1245
- return !!this._disabled;
1254
+ return __classPrivateFieldGet(this, _SkyTokensComponent__disabled, "f");
1246
1255
  }
1247
1256
  /**
1248
- * Indicates whether users can remove tokens from the list by selecting their close buttons
1249
- * or pressing the `Backspace` key.
1257
+ * Indicates whether users can remove a token from the list by selecting a token's close button.
1250
1258
  * @default true
1251
1259
  */
1252
1260
  set dismissible(value) {
1253
- this._dismissible = value;
1261
+ __classPrivateFieldSet(this, _SkyTokensComponent__dismissible, value !== false, "f");
1254
1262
  }
1255
1263
  get dismissible() {
1256
- return this._dismissible !== false;
1264
+ return __classPrivateFieldGet(this, _SkyTokensComponent__dismissible, "f");
1257
1265
  }
1258
1266
  /**
1259
1267
  * Specifies the token property to display for each item in the tokens list.
1260
1268
  * @default "name"
1261
1269
  */
1262
1270
  set displayWith(value) {
1263
- this._displayWith = value;
1271
+ __classPrivateFieldSet(this, _SkyTokensComponent__displayWith, value || DISPLAY_WITH_DEFAULT, "f");
1264
1272
  }
1265
1273
  get displayWith() {
1266
- return this._displayWith || 'name';
1274
+ return __classPrivateFieldGet(this, _SkyTokensComponent__displayWith, "f");
1267
1275
  }
1268
1276
  /**
1269
1277
  * Indicates whether users can focus on items in the list using the `Tab` key.
@@ -1272,72 +1280,73 @@ class SkyTokensComponent {
1272
1280
  * @default true
1273
1281
  */
1274
1282
  set focusable(value) {
1275
- this._focusable = value;
1283
+ __classPrivateFieldSet(this, _SkyTokensComponent__focusable, value !== false, "f");
1276
1284
  }
1277
1285
  get focusable() {
1278
- return this._focusable !== false;
1286
+ return __classPrivateFieldGet(this, _SkyTokensComponent__focusable, "f");
1279
1287
  }
1280
1288
  /**
1281
1289
  * Specifies an array of tokens to include in the list.
1282
1290
  */
1283
1291
  set tokens(value) {
1284
- this._tokens = value;
1285
- this.tokensChange.emit(this._tokens);
1292
+ __classPrivateFieldSet(this, _SkyTokensComponent__tokens, value || [], "f");
1293
+ // The previous behavior was to set `this._tokens = value`, then emit `this._tokens`,
1294
+ // which would emit `undefined` instead of a default value of `[]` returned by the
1295
+ // get accessor when set to `undefined`. Emitting `value` instead of `this.#_tokensOrDefault`
1296
+ // preserves that behavior.
1297
+ this.tokensChange.emit(value);
1286
1298
  }
1287
1299
  get tokens() {
1288
- return this._tokens || [];
1300
+ return __classPrivateFieldGet(this, _SkyTokensComponent__tokens, "f");
1289
1301
  }
1290
1302
  /**
1291
1303
  * Specifies an observable of `SkyTokensMessage` that can place focus on a
1292
1304
  * particular token or remove the active token from the list.
1293
1305
  */
1294
1306
  set messageStream(value) {
1295
- this._messageStream = value;
1296
- this.initMessageStream();
1307
+ __classPrivateFieldSet(this, _SkyTokensComponent__messageStream, value || new Subject(), "f");
1308
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_initMessageStream).call(this);
1297
1309
  }
1298
1310
  get messageStream() {
1299
- return this._messageStream;
1311
+ return __classPrivateFieldGet(this, _SkyTokensComponent__messageStream, "f");
1300
1312
  }
1301
- /**
1302
- * @internal
1303
- */
1304
1313
  get activeIndex() {
1305
- return this._activeIndex || 0;
1314
+ return __classPrivateFieldGet(this, _SkyTokensComponent__activeIndex, "f");
1306
1315
  }
1307
1316
  set activeIndex(value) {
1308
- if (value >= this.tokens.length) {
1309
- value = this.tokens.length - 1;
1317
+ if (value >= __classPrivateFieldGet(this, _SkyTokensComponent__tokens, "f").length) {
1318
+ value = __classPrivateFieldGet(this, _SkyTokensComponent__tokens, "f").length - 1;
1310
1319
  this.focusIndexOverRange.emit();
1311
1320
  }
1312
1321
  if (value < 0) {
1313
1322
  value = 0;
1314
1323
  this.focusIndexUnderRange.emit();
1315
1324
  }
1316
- this._activeIndex = value;
1325
+ __classPrivateFieldSet(this, _SkyTokensComponent__activeIndex, value || 0, "f");
1317
1326
  }
1318
1327
  ngOnDestroy() {
1319
- this.ngUnsubscribe.next();
1320
- this.ngUnsubscribe.complete();
1328
+ __classPrivateFieldGet(this, _SkyTokensComponent_ngUnsubscribe, "f").next();
1329
+ __classPrivateFieldGet(this, _SkyTokensComponent_ngUnsubscribe, "f").complete();
1321
1330
  }
1322
1331
  onTokenClick(token) {
1323
1332
  if (this.disabled) {
1324
1333
  return;
1325
1334
  }
1326
- this.notifyTokenSelected(token);
1335
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_notifyTokenSelected).call(this, token);
1327
1336
  }
1328
1337
  onTokenKeyDown(event) {
1329
1338
  if (!this.disabled) {
1330
1339
  switch (event.key) {
1331
1340
  case 'Left':
1332
1341
  case 'ArrowLeft':
1333
- this.messageStream.next({
1342
+ __classPrivateFieldGet(this, _SkyTokensComponent__messageStream, "f").next({
1334
1343
  type: SkyTokensMessageType.FocusPreviousToken,
1335
1344
  });
1336
1345
  event.preventDefault();
1337
1346
  break;
1338
1347
  case 'Right':
1339
1348
  case 'ArrowRight':
1340
- this.messageStream.next({
1349
+ __classPrivateFieldGet(this, _SkyTokensComponent__messageStream, "f").next({
1341
1350
  type: SkyTokensMessageType.FocusNextToken,
1342
1351
  });
1343
1352
  event.preventDefault();
@@ -1347,26 +1356,27 @@ class SkyTokensComponent {
1347
1356
  }
1348
1357
  selectToken(token) {
1349
1358
  if (!this.disabled) {
1350
- this.notifyTokenSelected(token);
1359
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_notifyTokenSelected).call(this, token);
1351
1360
  }
1352
1361
  }
1353
1362
  removeToken(token) {
1354
1363
  this.tokens = this.tokens.filter((t) => t !== token);
1355
- this.changeDetector.detectChanges();
1356
- }
1357
- focusPreviousToken() {
1358
- this.activeIndex--;
1359
- this.focusActiveToken();
1360
- }
1361
- focusNextToken() {
1362
- this.activeIndex++;
1363
- this.focusActiveToken();
1364
+ __classPrivateFieldGet(this, _SkyTokensComponent_changeDetector, "f").detectChanges();
1364
1365
  }
1365
- focusLastToken() {
1366
+ }
1367
+ _SkyTokensComponent__disabled = new WeakMap(), _SkyTokensComponent__dismissible = new WeakMap(), _SkyTokensComponent__focusable = new WeakMap(), _SkyTokensComponent__tokens = new WeakMap(), _SkyTokensComponent__displayWith = new WeakMap(), _SkyTokensComponent_messageStreamSub = new WeakMap(), _SkyTokensComponent_ngUnsubscribe = new WeakMap(), _SkyTokensComponent__messageStream = new WeakMap(), _SkyTokensComponent_changeDetector = new WeakMap(), _SkyTokensComponent__activeIndex = new WeakMap(), _SkyTokensComponent_instances = new WeakSet(), _SkyTokensComponent_focusPreviousToken = function _SkyTokensComponent_focusPreviousToken() {
1368
+ this.activeIndex--;
1369
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
1370
+ }, _SkyTokensComponent_focusNextToken = function _SkyTokensComponent_focusNextToken() {
1371
+ this.activeIndex++;
1372
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
1373
+ }, _SkyTokensComponent_focusLastToken = function _SkyTokensComponent_focusLastToken() {
1374
+ if (this.tokenComponents) {
1366
1375
  this.activeIndex = this.tokenComponents.length - 1;
1367
- this.focusActiveToken();
1376
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
1368
1377
  }
1369
- focusActiveToken() {
1378
+ }, _SkyTokensComponent_focusActiveToken = function _SkyTokensComponent_focusActiveToken() {
1379
+ if (this.tokenComponents) {
1370
1380
  const tokenComponent = this.tokenComponents.find((_comp, i) => {
1371
1381
  return this.activeIndex === i;
1372
1382
  });
@@ -1374,48 +1384,43 @@ class SkyTokensComponent {
1374
1384
  tokenComponent.focusElement();
1375
1385
  }
1376
1386
  }
1377
- removeActiveToken() {
1378
- const token = this.tokens[this.activeIndex];
1379
- if (token) {
1380
- this.removeToken(token);
1381
- }
1382
- }
1383
- initMessageStream() {
1384
- if (this.messageStreamSub) {
1385
- this.messageStreamSub.unsubscribe();
1386
- }
1387
- if (this.messageStream) {
1388
- this.messageStreamSub = this.messageStream
1389
- .pipe(takeUntil(this.ngUnsubscribe))
1390
- .subscribe((message) => {
1391
- switch (message.type) {
1392
- case SkyTokensMessageType.FocusLastToken:
1393
- this.focusLastToken();
1394
- break;
1395
- case SkyTokensMessageType.FocusActiveToken:
1396
- this.focusActiveToken();
1397
- break;
1398
- case SkyTokensMessageType.FocusPreviousToken:
1399
- this.focusPreviousToken();
1400
- break;
1401
- case SkyTokensMessageType.FocusNextToken:
1402
- this.focusNextToken();
1403
- break;
1404
- case SkyTokensMessageType.RemoveActiveToken:
1405
- this.removeActiveToken();
1406
- break;
1407
- }
1408
- });
1387
+ }, _SkyTokensComponent_removeActiveToken = function _SkyTokensComponent_removeActiveToken() {
1388
+ const token = this.tokens[this.activeIndex];
1389
+ if (token) {
1390
+ this.removeToken(token);
1391
+ }
1392
+ }, _SkyTokensComponent_initMessageStream = function _SkyTokensComponent_initMessageStream() {
1393
+ if (__classPrivateFieldGet(this, _SkyTokensComponent_messageStreamSub, "f")) {
1394
+ __classPrivateFieldGet(this, _SkyTokensComponent_messageStreamSub, "f").unsubscribe();
1395
+ }
1396
+ __classPrivateFieldSet(this, _SkyTokensComponent_messageStreamSub, this.messageStream
1397
+ .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTokensComponent_ngUnsubscribe, "f")))
1398
+ .subscribe((message) => {
1399
+ switch (message.type) {
1400
+ case SkyTokensMessageType.FocusLastToken:
1401
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusLastToken).call(this);
1402
+ break;
1403
+ case SkyTokensMessageType.FocusActiveToken:
1404
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusActiveToken).call(this);
1405
+ break;
1406
+ case SkyTokensMessageType.FocusPreviousToken:
1407
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusPreviousToken).call(this);
1408
+ break;
1409
+ case SkyTokensMessageType.FocusNextToken:
1410
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_focusNextToken).call(this);
1411
+ break;
1412
+ case SkyTokensMessageType.RemoveActiveToken:
1413
+ __classPrivateFieldGet(this, _SkyTokensComponent_instances, "m", _SkyTokensComponent_removeActiveToken).call(this);
1414
+ break;
1409
1415
  }
1410
- }
1411
- notifyTokenSelected(token) {
1412
- this.tokenSelected.emit({
1413
- token,
1414
- });
1415
- }
1416
- }
1416
+ }), "f");
1417
+ }, _SkyTokensComponent_notifyTokenSelected = function _SkyTokensComponent_notifyTokenSelected(token) {
1418
+ this.tokenSelected.emit({
1419
+ token,
1420
+ });
1421
+ };
1417
1422
  SkyTokensComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTokensComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1418
- SkyTokensComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTokensComponent, selector: "sky-tokens", inputs: { disabled: "disabled", dismissible: "dismissible", displayWith: "displayWith", trackWith: "trackWith", focusable: "focusable", tokens: "tokens", messageStream: "messageStream" }, outputs: { focusIndexOverRange: "focusIndexOverRange", focusIndexUnderRange: "focusIndexUnderRange", tokenSelected: "tokenSelected", tokensChange: "tokensChange" }, viewQueries: [{ propertyName: "tokenComponents", predicate: SkyTokenComponent, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"tokens\"\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens && tokens.length ? 'list' : null\"\n>\n <sky-token\n *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 class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"], components: [{ type: SkyTokenComponent, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable"], outputs: ["dismiss", "tokenFocus"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
1423
+ SkyTokensComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTokensComponent, selector: "sky-tokens", inputs: { disabled: "disabled", dismissible: "dismissible", displayWith: "displayWith", trackWith: "trackWith", focusable: "focusable", tokens: "tokens", messageStream: "messageStream" }, outputs: { focusIndexOverRange: "focusIndexOverRange", focusIndexUnderRange: "focusIndexUnderRange", tokenSelected: "tokenSelected", tokensChange: "tokensChange" }, viewQueries: [{ propertyName: "tokenComponents", predicate: SkyTokenComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens.length ? 'list' : null\"\n>\n <sky-token\n *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 class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"], components: [{ type: SkyTokenComponent, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable"], outputs: ["dismiss", "tokenFocus"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
1419
1424
  trigger('blockAnimationOnLoad', [transition(':enter', [])]),
1420
1425
  trigger('dismiss', [
1421
1426
  transition(':enter', [
@@ -1458,7 +1463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
1458
1463
  })),
1459
1464
  ]),
1460
1465
  ]),
1461
- ], template: "<div\n *ngIf=\"tokens\"\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens && tokens.length ? 'list' : null\"\n>\n <sky-token\n *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 class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"] }]
1466
+ ], template: "<div\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens.length ? 'list' : null\"\n>\n <sky-token\n *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 class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"] }]
1462
1467
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
1463
1468
  type: Input
1464
1469
  }], dismissible: [{
@@ -1513,6 +1518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
1513
1518
  }]
1514
1519
  }] });
1515
1520
 
1521
+ var _SkyWaitAdapterService_instances, _SkyWaitAdapterService_focusableElements, _SkyWaitAdapterService_renderer, _SkyWaitAdapterService_focusNextElement, _SkyWaitAdapterService_isShift, _SkyWaitAdapterService_isElementHidden, _SkyWaitAdapterService_isElementBusyOrHidden, _SkyWaitAdapterService_clearDocumentFocus, _SkyWaitAdapterService_getFocusableElements, _SkyWaitAdapterService_clearListeners;
1522
+ const busyElements = {};
1516
1523
  // Need to add the following to classes which contain static methods.
1517
1524
  // See: https://github.com/ng-packagr/ng-packagr/issues/641
1518
1525
  /**
@@ -1521,19 +1528,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
1521
1528
  */
1522
1529
  class SkyWaitAdapterService {
1523
1530
  constructor(rendererFactory) {
1524
- this.rendererFactory = rendererFactory;
1525
- this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
1531
+ _SkyWaitAdapterService_instances.add(this);
1532
+ _SkyWaitAdapterService_focusableElements.set(this, void 0);
1533
+ _SkyWaitAdapterService_renderer.set(this, void 0);
1534
+ __classPrivateFieldSet(this, _SkyWaitAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
1526
1535
  }
1527
1536
  ngOnDestroy() {
1528
- this.clearListeners();
1537
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearListeners).call(this);
1529
1538
  }
1530
1539
  setWaitBounds(waitEl) {
1531
- this.renderer.setStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
1540
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").setStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
1532
1541
  }
1533
1542
  removeWaitBounds(waitEl) {
1534
- this.renderer.removeStyle(waitEl.nativeElement.parentElement, 'position');
1543
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").removeStyle(waitEl.nativeElement.parentElement, 'position');
1535
1544
  }
1536
- setBusyState(waitEl, isFullPage, isWaiting, isNonBlocking = false, waitComponentId) {
1545
+ setBusyState(waitEl, isFullPage, isWaiting, isNonBlocking, waitComponentId) {
1537
1546
  const busyEl = isFullPage
1538
1547
  ? document.body
1539
1548
  : waitEl.nativeElement.parentElement;
@@ -1541,18 +1550,18 @@ class SkyWaitAdapterService {
1541
1550
  if (isWaiting) {
1542
1551
  let restoreFocusElement = undefined;
1543
1552
  let restoreFocusCheckElement = undefined;
1544
- this.renderer.setAttribute(busyEl, 'aria-busy', 'true');
1553
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").setAttribute(busyEl, 'aria-busy', 'true');
1545
1554
  // Remove focus from page when full page blocking wait
1546
1555
  if (isFullPage || busyEl.contains(document.activeElement)) {
1547
1556
  if (document.activeElement !== document.body) {
1548
1557
  restoreFocusElement = document.activeElement;
1549
1558
  }
1550
- this.clearDocumentFocus();
1559
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
1551
1560
  restoreFocusCheckElement = document.activeElement;
1552
1561
  }
1553
1562
  if (isFullPage) {
1554
1563
  SkyWaitAdapterService.isPageWaitActive = true;
1555
- const endListenerFunc = this.renderer.listen(document.body, 'keydown', (event) => {
1564
+ const endListenerFunc = __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").listen(document.body, 'keydown', (event) => {
1556
1565
  /*istanbul ignore else */
1557
1566
  if (event.key) {
1558
1567
  /* istanbul ignore else */
@@ -1561,198 +1570,221 @@ class SkyWaitAdapterService {
1561
1570
  event.preventDefault();
1562
1571
  event.stopPropagation();
1563
1572
  event.stopImmediatePropagation();
1564
- this.clearDocumentFocus();
1573
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
1565
1574
  }
1566
1575
  }
1567
1576
  });
1568
- SkyWaitAdapterService.busyElements[waitComponentId] = {
1569
- listener: endListenerFunc,
1570
- busyEl: undefined,
1571
- restoreFocusElement,
1572
- restoreFocusCheckElement,
1573
- };
1577
+ if (waitComponentId) {
1578
+ busyElements[waitComponentId] = {
1579
+ listener: endListenerFunc,
1580
+ busyEl: undefined,
1581
+ restoreFocusElement,
1582
+ restoreFocusCheckElement,
1583
+ };
1584
+ }
1574
1585
  }
1575
1586
  else {
1576
- const endListenerFunc = this.renderer.listen(busyEl, 'focusin', (event) => {
1587
+ const endListenerFunc = __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").listen(busyEl, 'focusin', (event) => {
1577
1588
  /* istanbul ignore else */
1578
1589
  if (!isNonBlocking) {
1579
1590
  event.preventDefault();
1580
1591
  event.stopPropagation();
1581
1592
  event.stopImmediatePropagation();
1582
1593
  if (SkyWaitAdapterService.isPageWaitActive) {
1583
- this.clearDocumentFocus();
1594
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
1584
1595
  }
1585
1596
  else {
1586
1597
  // Propagate tab navigation if attempted into waited element
1587
1598
  const target = event.target;
1588
- target.blur();
1589
- this.focusNextElement(target, this.isShift(event), busyEl);
1599
+ if (target) {
1600
+ target.blur();
1601
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_focusNextElement).call(this, target, __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isShift).call(this, event));
1602
+ }
1590
1603
  }
1591
1604
  }
1592
1605
  });
1593
- SkyWaitAdapterService.busyElements[waitComponentId] = {
1594
- listener: endListenerFunc,
1595
- busyEl: busyEl,
1596
- restoreFocusElement,
1597
- restoreFocusCheckElement,
1598
- };
1606
+ if (waitComponentId) {
1607
+ busyElements[waitComponentId] = {
1608
+ listener: endListenerFunc,
1609
+ busyEl,
1610
+ restoreFocusElement,
1611
+ restoreFocusCheckElement,
1612
+ };
1613
+ }
1599
1614
  }
1600
1615
  }
1601
1616
  else {
1602
- this.renderer.removeAttribute(busyEl, 'aria-busy');
1617
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_renderer, "f").removeAttribute(busyEl, 'aria-busy');
1603
1618
  if (isFullPage) {
1604
1619
  SkyWaitAdapterService.isPageWaitActive = false;
1605
1620
  }
1606
- if (waitComponentId in SkyWaitAdapterService.busyElements) {
1607
- SkyWaitAdapterService.busyElements[waitComponentId].listener();
1621
+ if (waitComponentId && waitComponentId in busyElements) {
1622
+ const busyElement = busyElements[waitComponentId];
1623
+ busyElement.listener();
1608
1624
  // If there is a restore focus element and the focus has not moved, restore focus.
1609
- if (SkyWaitAdapterService.busyElements[waitComponentId]
1610
- .restoreFocusElement &&
1611
- SkyWaitAdapterService.busyElements[waitComponentId]
1612
- .restoreFocusCheckElement === document.activeElement) {
1613
- SkyWaitAdapterService.busyElements[waitComponentId].restoreFocusElement.focus();
1625
+ if (busyElement.restoreFocusCheckElement === document.activeElement) {
1626
+ busyElement.restoreFocusElement?.focus();
1614
1627
  }
1615
- delete SkyWaitAdapterService.busyElements[waitComponentId];
1628
+ delete busyElements[waitComponentId];
1616
1629
  }
1617
1630
  }
1618
1631
  }
1619
1632
  }
1620
- focusNextElement(targetElement, shiftKey, busyEl) {
1621
- const focussable = this.getFocussableElements();
1622
- // If shift tab, go in the other direction
1623
- const modifier = shiftKey ? -1 : 1;
1624
- // Find the next navigable element that isn't waiting
1625
- const startingIndex = focussable.indexOf(targetElement);
1626
- let curIndex = startingIndex + modifier;
1627
- while (focussable[curIndex] &&
1628
- this.isElementBusyOrHidden(focussable[curIndex])) {
1629
- curIndex += modifier;
1630
- }
1631
- if (focussable[curIndex] &&
1632
- !this.isElementBusyOrHidden(focussable[curIndex])) {
1633
- focussable[curIndex].focus();
1634
- }
1635
- else {
1636
- // Try wrapping the navigation
1633
+ }
1634
+ _SkyWaitAdapterService_focusableElements = new WeakMap(), _SkyWaitAdapterService_renderer = new WeakMap(), _SkyWaitAdapterService_instances = new WeakSet(), _SkyWaitAdapterService_focusNextElement = function _SkyWaitAdapterService_focusNextElement(targetElement, shiftKey) {
1635
+ const focusable = __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_getFocusableElements).call(this);
1636
+ // If shift tab, go in the other direction
1637
+ const modifier = shiftKey ? -1 : 1;
1638
+ // Find the next navigable element that isn't waiting
1639
+ const startingIndex = focusable.indexOf(targetElement);
1640
+ let curIndex = startingIndex + modifier;
1641
+ while (focusable[curIndex] &&
1642
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
1643
+ curIndex += modifier;
1644
+ }
1645
+ if (focusable[curIndex] &&
1646
+ !__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
1647
+ focusable[curIndex].focus();
1648
+ }
1649
+ else {
1650
+ // Try wrapping the navigation
1651
+ /* istanbul ignore next */
1652
+ /* sanity check */
1653
+ curIndex = modifier > 0 ? 0 : focusable.length - 1;
1654
+ while (curIndex !== startingIndex &&
1655
+ focusable[curIndex] &&
1656
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
1637
1657
  /* istanbul ignore next */
1638
1658
  /* sanity check */
1639
- curIndex = modifier > 0 ? 0 : focussable.length - 1;
1640
- while (curIndex !== startingIndex &&
1641
- focussable[curIndex] &&
1642
- this.isElementBusyOrHidden(focussable[curIndex])) {
1643
- /* istanbul ignore next */
1644
- /* sanity check */
1645
- curIndex += modifier;
1646
- }
1647
- /* istanbul ignore else */
1648
- /* sanity check */
1649
- if (focussable[curIndex] &&
1650
- !this.isElementBusyOrHidden(focussable[curIndex])) {
1651
- focussable[curIndex].focus();
1652
- }
1653
- else {
1654
- // No valid target, wipe focus
1655
- this.clearDocumentFocus();
1656
- }
1657
- }
1658
- // clear focussableElements list
1659
- this.focussableElements = undefined;
1660
- }
1661
- isShift(event) {
1662
- // Determine if shift+tab was used based on element order
1663
- const elements = this.getFocussableElements().filter((elem) => !this.isElementHidden(elem));
1664
- const previousInd = elements.indexOf(event.relatedTarget);
1665
- const currentInd = elements.indexOf(event.target);
1666
- return (previousInd === currentInd + 1 ||
1667
- (previousInd === 0 && currentInd === elements.length - 1) ||
1668
- previousInd > currentInd ||
1669
- !event.relatedTarget);
1670
- }
1671
- isElementHidden(element) {
1672
- const style = window.getComputedStyle(element);
1673
- return style.display === 'none' || style.visibility === 'hidden';
1674
- }
1675
- isElementBusyOrHidden(element) {
1676
- if (this.isElementHidden(element)) {
1677
- return true;
1678
- }
1679
- for (const key of Object.keys(SkyWaitAdapterService.busyElements)) {
1680
- const parentElement = SkyWaitAdapterService.busyElements[key].busyEl;
1681
- if (parentElement && parentElement.contains(element)) {
1682
- return true;
1683
- }
1659
+ curIndex += modifier;
1684
1660
  }
1685
- return false;
1686
- }
1687
- clearDocumentFocus() {
1688
1661
  /* istanbul ignore else */
1689
- if (document.activeElement && document.activeElement.blur) {
1690
- document.activeElement.blur();
1662
+ /* sanity check */
1663
+ if (focusable[curIndex] &&
1664
+ !__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementBusyOrHidden).call(this, focusable[curIndex])) {
1665
+ focusable[curIndex].focus();
1691
1666
  }
1692
- document.body.focus();
1693
- }
1694
- getFocussableElements() {
1695
- // Keep this cached so we can reduce querys
1696
- if (this.focussableElements) {
1697
- return this.focussableElements;
1667
+ else {
1668
+ // No valid target, wipe focus
1669
+ __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_clearDocumentFocus).call(this);
1698
1670
  }
1699
- // Select all possible focussable elements
1700
- const focussableElements = 'a[href], ' +
1701
- 'area[href], ' +
1702
- "input:not([disabled]):not([tabindex='-1']), " +
1703
- "button:not([disabled]):not([tabindex='-1']), " +
1704
- "select:not([disabled]):not([tabindex='-1']), " +
1705
- "textarea:not([disabled]):not([tabindex='-1']), " +
1706
- 'iframe, object, embed, ' +
1707
- "*[tabindex]:not([tabindex='-1']), " +
1708
- '*[contenteditable=true]';
1709
- this.focussableElements = Array.prototype.filter.call(document.body.querySelectorAll(focussableElements), (element) => {
1710
- return (element.offsetWidth > 0 ||
1711
- element.offsetHeight > 0 ||
1712
- element === document.activeElement);
1713
- });
1714
- return this.focussableElements;
1715
1671
  }
1716
- clearListeners() {
1717
- SkyWaitAdapterService.isPageWaitActive = false;
1718
- for (const key of Object.keys(SkyWaitAdapterService.busyElements)) {
1719
- SkyWaitAdapterService.busyElements[key].listener();
1720
- delete SkyWaitAdapterService.busyElements[key];
1672
+ // clear focusableElements list
1673
+ __classPrivateFieldSet(this, _SkyWaitAdapterService_focusableElements, undefined, "f");
1674
+ }, _SkyWaitAdapterService_isShift = function _SkyWaitAdapterService_isShift(event) {
1675
+ // Determine if shift+tab was used based on element order
1676
+ const elements = __classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_getFocusableElements).call(this).filter((elem) => !__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementHidden).call(this, elem));
1677
+ const previousInd = elements.indexOf(event.relatedTarget);
1678
+ const currentInd = elements.indexOf(event.target);
1679
+ return (previousInd === currentInd + 1 ||
1680
+ (previousInd === 0 && currentInd === elements.length - 1) ||
1681
+ previousInd > currentInd ||
1682
+ !event.relatedTarget);
1683
+ }, _SkyWaitAdapterService_isElementHidden = function _SkyWaitAdapterService_isElementHidden(element) {
1684
+ const style = window.getComputedStyle(element);
1685
+ return style.display === 'none' || style.visibility === 'hidden';
1686
+ }, _SkyWaitAdapterService_isElementBusyOrHidden = function _SkyWaitAdapterService_isElementBusyOrHidden(element) {
1687
+ if (__classPrivateFieldGet(this, _SkyWaitAdapterService_instances, "m", _SkyWaitAdapterService_isElementHidden).call(this, element)) {
1688
+ return true;
1689
+ }
1690
+ for (const key of Object.keys(busyElements)) {
1691
+ const parentElement = busyElements[key].busyEl;
1692
+ if (parentElement && parentElement.contains(element)) {
1693
+ return true;
1721
1694
  }
1722
1695
  }
1723
- }
1696
+ return false;
1697
+ }, _SkyWaitAdapterService_clearDocumentFocus = function _SkyWaitAdapterService_clearDocumentFocus() {
1698
+ const activeElement = document.activeElement;
1699
+ /* istanbul ignore else */
1700
+ if (activeElement) {
1701
+ activeElement.blur();
1702
+ }
1703
+ document.body.focus();
1704
+ }, _SkyWaitAdapterService_getFocusableElements = function _SkyWaitAdapterService_getFocusableElements() {
1705
+ // Keep this cached so we can reduce queries
1706
+ if (__classPrivateFieldGet(this, _SkyWaitAdapterService_focusableElements, "f")) {
1707
+ return __classPrivateFieldGet(this, _SkyWaitAdapterService_focusableElements, "f");
1708
+ }
1709
+ // Select all possible focusable elements
1710
+ const focusableElements = 'a[href], ' +
1711
+ 'area[href], ' +
1712
+ "input:not([disabled]):not([tabindex='-1']), " +
1713
+ "button:not([disabled]):not([tabindex='-1']), " +
1714
+ "select:not([disabled]):not([tabindex='-1']), " +
1715
+ "textarea:not([disabled]):not([tabindex='-1']), " +
1716
+ 'iframe, object, embed, ' +
1717
+ "*[tabindex]:not([tabindex='-1']), " +
1718
+ '*[contenteditable=true]';
1719
+ __classPrivateFieldSet(this, _SkyWaitAdapterService_focusableElements, Array.prototype.filter.call(document.body.querySelectorAll(focusableElements), (element) => {
1720
+ return (element.offsetWidth > 0 ||
1721
+ element.offsetHeight > 0 ||
1722
+ element === document.activeElement);
1723
+ }), "f");
1724
+ return __classPrivateFieldGet(this, _SkyWaitAdapterService_focusableElements, "f");
1725
+ }, _SkyWaitAdapterService_clearListeners = function _SkyWaitAdapterService_clearListeners() {
1726
+ SkyWaitAdapterService.isPageWaitActive = false;
1727
+ for (const key of Object.keys(busyElements)) {
1728
+ busyElements[key].listener();
1729
+ delete busyElements[key];
1730
+ }
1731
+ };
1724
1732
  SkyWaitAdapterService.isPageWaitActive = false;
1725
- SkyWaitAdapterService.busyElements = {};
1726
1733
  SkyWaitAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
1727
1734
  SkyWaitAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitAdapterService });
1728
1735
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitAdapterService, decorators: [{
1729
1736
  type: Injectable
1730
1737
  }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
1731
1738
 
1739
+ var _SkyWaitComponent_instances, _SkyWaitComponent_elRef, _SkyWaitComponent_adapterService, _SkyWaitComponent_resourceSvc, _SkyWaitComponent_ngUnsubscribe, _SkyWaitComponent_id, _SkyWaitComponent_customAriaLabel, _SkyWaitComponent__isFullPage, _SkyWaitComponent__isNonBlocking, _SkyWaitComponent__isWaiting, _SkyWaitComponent_publishAriaLabel;
1732
1740
  let nextId = 0;
1733
1741
  class SkyWaitComponent {
1734
- constructor(elRef, adapterService, resourceService) {
1735
- this.elRef = elRef;
1736
- this.adapterService = adapterService;
1737
- this.resourceService = resourceService;
1742
+ constructor(elRef, adapterService, resourceSvc) {
1743
+ _SkyWaitComponent_instances.add(this);
1738
1744
  this.ariaLabelStream = new BehaviorSubject('');
1739
- this.id = `sky-wait-${++nextId}`;
1745
+ _SkyWaitComponent_elRef.set(this, void 0);
1746
+ _SkyWaitComponent_adapterService.set(this, void 0);
1747
+ _SkyWaitComponent_resourceSvc.set(this, void 0);
1748
+ _SkyWaitComponent_ngUnsubscribe.set(this, new Subject());
1749
+ _SkyWaitComponent_id.set(this, void 0);
1750
+ _SkyWaitComponent_customAriaLabel.set(this, void 0);
1751
+ _SkyWaitComponent__isFullPage.set(this, void 0);
1752
+ _SkyWaitComponent__isNonBlocking.set(this, void 0);
1753
+ _SkyWaitComponent__isWaiting.set(this, void 0);
1754
+ __classPrivateFieldSet(this, _SkyWaitComponent_elRef, elRef, "f");
1755
+ __classPrivateFieldSet(this, _SkyWaitComponent_adapterService, adapterService, "f");
1756
+ __classPrivateFieldSet(this, _SkyWaitComponent_resourceSvc, resourceSvc, "f");
1757
+ __classPrivateFieldSet(this, _SkyWaitComponent_id, `sky-wait-${++nextId}`, "f");
1758
+ }
1759
+ /**
1760
+ * Specifies an ARIA label for the wait icon while an element or page loads.
1761
+ * This sets the icon's `aria-label` attribute
1762
+ * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
1763
+ * The default value varies based on whether the wait is for an element or a page
1764
+ * and whether it is a blocking wait. For example, the default for a page-blocking
1765
+ * wait is "Page loading. Please wait."
1766
+ */
1767
+ set ariaLabel(value) {
1768
+ __classPrivateFieldSet(this, _SkyWaitComponent_customAriaLabel, value, "f");
1769
+ __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
1740
1770
  }
1741
1771
  /**
1742
1772
  * When set to `true`, wait indication appears on the parent element of the `sky-wait` component.
1743
1773
  */
1744
1774
  set isWaiting(value) {
1745
- if (value && !this._isFullPage) {
1746
- this.adapterService.setWaitBounds(this.elRef);
1747
- }
1748
- else if (!value && !this._isFullPage) {
1749
- this.adapterService.removeWaitBounds(this.elRef);
1775
+ if (!this.isFullPage) {
1776
+ if (value) {
1777
+ __classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
1778
+ }
1779
+ else {
1780
+ __classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").removeWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
1781
+ }
1750
1782
  }
1751
- this.adapterService.setBusyState(this.elRef, this.isFullPage, value, this.isNonBlocking, this.id);
1752
- this._isWaiting = value;
1783
+ __classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setBusyState(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"), !!this.isFullPage, !!value, !!this.isNonBlocking, __classPrivateFieldGet(this, _SkyWaitComponent_id, "f"));
1784
+ __classPrivateFieldSet(this, _SkyWaitComponent__isWaiting, value, "f");
1753
1785
  }
1754
1786
  get isWaiting() {
1755
- return this._isWaiting;
1787
+ return __classPrivateFieldGet(this, _SkyWaitComponent__isWaiting, "f");
1756
1788
  }
1757
1789
  /**
1758
1790
  * When set to `true`, wait indication appears on the page level instead of the
@@ -1764,35 +1796,55 @@ class SkyWaitComponent {
1764
1796
  set isFullPage(value) {
1765
1797
  /* istanbul ignore else: untestable */
1766
1798
  if (value) {
1767
- this.adapterService.removeWaitBounds(this.elRef);
1799
+ __classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").removeWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
1768
1800
  }
1769
- else if (!value && this._isWaiting) {
1770
- this.adapterService.setWaitBounds(this.elRef);
1801
+ else if (this.isWaiting) {
1802
+ __classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setWaitBounds(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"));
1771
1803
  }
1772
- this._isFullPage = value;
1804
+ __classPrivateFieldSet(this, _SkyWaitComponent__isFullPage, value, "f");
1805
+ __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
1773
1806
  }
1774
1807
  get isFullPage() {
1775
- return this._isFullPage;
1808
+ return __classPrivateFieldGet(this, _SkyWaitComponent__isFullPage, "f");
1809
+ }
1810
+ /**
1811
+ * When set to `true`, wait indication appears in the bottom left corner of the element
1812
+ * instead of hiding the entire parent element.
1813
+ * @default false
1814
+ */
1815
+ set isNonBlocking(value) {
1816
+ __classPrivateFieldSet(this, _SkyWaitComponent__isNonBlocking, value, "f");
1817
+ __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
1818
+ }
1819
+ get isNonBlocking() {
1820
+ return __classPrivateFieldGet(this, _SkyWaitComponent__isNonBlocking, "f");
1776
1821
  }
1777
1822
  ngOnInit() {
1778
- this.publishAriaLabel();
1823
+ __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
1779
1824
  }
1780
- publishAriaLabel() {
1781
- if (this.ariaLabel) {
1782
- this.ariaLabelStream.next(this.ariaLabel);
1783
- return;
1784
- }
1785
- /* istanbul ignore else */
1786
- if (this.resourceService) {
1787
- const type = this.isFullPage ? '_page' : '';
1788
- const blocking = this.isNonBlocking ? '' : '_blocking';
1789
- const key = `skyux_wait${type}${blocking}_aria_alt_text`;
1790
- this.resourceService.getString(key).subscribe((value) => {
1791
- this.ariaLabelStream.next(value);
1792
- });
1793
- }
1825
+ ngOnDestroy() {
1826
+ __classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f").next();
1827
+ __classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f").complete();
1794
1828
  }
1795
1829
  }
1830
+ _SkyWaitComponent_elRef = new WeakMap(), _SkyWaitComponent_adapterService = new WeakMap(), _SkyWaitComponent_resourceSvc = new WeakMap(), _SkyWaitComponent_ngUnsubscribe = new WeakMap(), _SkyWaitComponent_id = new WeakMap(), _SkyWaitComponent_customAriaLabel = new WeakMap(), _SkyWaitComponent__isFullPage = new WeakMap(), _SkyWaitComponent__isNonBlocking = new WeakMap(), _SkyWaitComponent__isWaiting = new WeakMap(), _SkyWaitComponent_instances = new WeakSet(), _SkyWaitComponent_publishAriaLabel = function _SkyWaitComponent_publishAriaLabel() {
1831
+ if (__classPrivateFieldGet(this, _SkyWaitComponent_customAriaLabel, "f")) {
1832
+ this.ariaLabelStream.next(__classPrivateFieldGet(this, _SkyWaitComponent_customAriaLabel, "f"));
1833
+ return;
1834
+ }
1835
+ /* istanbul ignore else */
1836
+ if (__classPrivateFieldGet(this, _SkyWaitComponent_resourceSvc, "f")) {
1837
+ const type = this.isFullPage ? '_page' : '';
1838
+ const blocking = this.isNonBlocking ? '' : '_blocking';
1839
+ const key = `skyux_wait${type}${blocking}_aria_alt_text`;
1840
+ __classPrivateFieldGet(this, _SkyWaitComponent_resourceSvc, "f")
1841
+ .getString(key)
1842
+ .pipe(take(1), takeUntil(__classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f")))
1843
+ .subscribe((value) => {
1844
+ this.ariaLabelStream.next(value);
1845
+ });
1846
+ }
1847
+ };
1796
1848
  SkyWaitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitComponent, deps: [{ token: i0.ElementRef }, { token: SkyWaitAdapterService }, { token: i1$2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1797
1849
  SkyWaitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyWaitComponent, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div class=\"sky-wait-container\">\n <div\n *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 class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;top:0;right:0;left:0;bottom:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{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;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
1798
1850
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitComponent, decorators: [{
@@ -1863,58 +1915,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
1863
1915
  }]
1864
1916
  }] });
1865
1917
 
1918
+ var _SkyWaitService_instances, _SkyWaitService_resolver, _SkyWaitService_appRef, _SkyWaitService_waitAdapter, _SkyWaitService_windowSvc, _SkyWaitService_setWaitComponentProperties, _SkyWaitService_beginPageWait, _SkyWaitService_endPageWait, _SkyWaitService_clearPageWait;
1919
+ let waitComponent;
1920
+ let pageWaitBlockingCount = 0;
1921
+ let pageWaitNonBlockingCount = 0;
1866
1922
  // Need to add the following to classes which contain static methods.
1867
1923
  // See: https://github.com/ng-packagr/ng-packagr/issues/641
1868
1924
  // @dynamic
1869
1925
  class SkyWaitService {
1870
1926
  constructor(resolver, appRef, waitAdapter, windowSvc) {
1871
- this.resolver = resolver;
1872
- this.appRef = appRef;
1873
- this.waitAdapter = waitAdapter;
1874
- this.windowSvc = windowSvc;
1927
+ _SkyWaitService_instances.add(this);
1928
+ _SkyWaitService_resolver.set(this, void 0);
1929
+ _SkyWaitService_appRef.set(this, void 0);
1930
+ _SkyWaitService_waitAdapter.set(this, void 0);
1931
+ _SkyWaitService_windowSvc.set(this, void 0);
1932
+ __classPrivateFieldSet(this, _SkyWaitService_resolver, resolver, "f");
1933
+ __classPrivateFieldSet(this, _SkyWaitService_appRef, appRef, "f");
1934
+ __classPrivateFieldSet(this, _SkyWaitService_waitAdapter, waitAdapter, "f");
1935
+ __classPrivateFieldSet(this, _SkyWaitService_windowSvc, windowSvc, "f");
1875
1936
  }
1876
1937
  /**
1877
1938
  * Starts a blocking page wait on the page.
1878
1939
  */
1879
1940
  beginBlockingPageWait() {
1880
- this.beginPageWait(true);
1941
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_beginPageWait).call(this, true);
1881
1942
  }
1882
1943
  /**
1883
1944
  * Starts a non-blocking page wait on the page.
1884
1945
  */
1885
1946
  beginNonBlockingPageWait() {
1886
- this.beginPageWait(false);
1947
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_beginPageWait).call(this, false);
1887
1948
  }
1888
1949
  /**
1889
1950
  * Ends a blocking page wait on the page. Blocking page wait indication
1890
1951
  * is removed when all running blocking page waits are ended.
1891
1952
  */
1892
1953
  endBlockingPageWait() {
1893
- this.endPageWait(true);
1954
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_endPageWait).call(this, true);
1894
1955
  }
1895
1956
  /**
1896
1957
  * Ends a non-blocking page wait on the page. Non-blocking page wait indication
1897
1958
  * is removed when all running non-blocking page waits are ended.
1898
1959
  */
1899
1960
  endNonBlockingPageWait() {
1900
- this.endPageWait(false);
1961
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_endPageWait).call(this, false);
1901
1962
  }
1902
1963
  /**
1903
1964
  * Clears all blocking and non-blocking page waits on the page.
1904
1965
  */
1905
1966
  clearAllPageWaits() {
1906
- this.clearPageWait(true);
1907
- this.clearPageWait(false);
1967
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_clearPageWait).call(this, true);
1968
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_clearPageWait).call(this, false);
1908
1969
  }
1909
1970
  /**
1910
1971
  * @internal
1911
1972
  */
1912
1973
  dispose() {
1913
- if (SkyWaitService.waitComponent) {
1914
- SkyWaitService.waitComponent = undefined;
1915
- SkyWaitService.pageWaitBlockingCount = 0;
1916
- SkyWaitService.pageWaitNonBlockingCount = 0;
1917
- this.waitAdapter.removePageWaitEl();
1974
+ if (waitComponent) {
1975
+ waitComponent = undefined;
1976
+ pageWaitBlockingCount = 0;
1977
+ pageWaitNonBlockingCount = 0;
1978
+ __classPrivateFieldGet(this, _SkyWaitService_waitAdapter, "f").removePageWaitEl();
1918
1979
  }
1919
1980
  }
1920
1981
  /**
@@ -1936,79 +1997,76 @@ class SkyWaitService {
1936
1997
  return observable.pipe(finalize(() => this.endNonBlockingPageWait()));
1937
1998
  });
1938
1999
  }
1939
- setWaitComponentProperties(isBlocking) {
2000
+ }
2001
+ _SkyWaitService_resolver = new WeakMap(), _SkyWaitService_appRef = new WeakMap(), _SkyWaitService_waitAdapter = new WeakMap(), _SkyWaitService_windowSvc = new WeakMap(), _SkyWaitService_instances = new WeakSet(), _SkyWaitService_setWaitComponentProperties = function _SkyWaitService_setWaitComponentProperties(isBlocking) {
2002
+ if (waitComponent) {
1940
2003
  if (isBlocking) {
1941
- SkyWaitService.waitComponent.hasBlockingWait = true;
1942
- SkyWaitService.pageWaitBlockingCount++;
1943
- }
1944
- else {
1945
- SkyWaitService.waitComponent.hasNonBlockingWait = true;
1946
- SkyWaitService.pageWaitNonBlockingCount++;
1947
- }
1948
- }
1949
- beginPageWait(isBlocking) {
1950
- if (!SkyWaitService.waitComponent) {
1951
- /*
1952
- Dynamic component creation needs to be done in a timeout to prevent ApplicationRef from
1953
- crashing when wait service is called in Angular lifecycle functions.
1954
- */
1955
- this.windowSvc.nativeWindow.setTimeout(() => {
1956
- // Ensuring here that we recheck this after the setTimeout is over so that we don't clash
1957
- // with any other waits that are created.
1958
- if (!SkyWaitService.waitComponent) {
1959
- const factory = this.resolver.resolveComponentFactory(SkyWaitPageComponent);
1960
- this.waitAdapter.addPageWaitEl();
1961
- const cmpRef = this.appRef.bootstrap(factory);
1962
- SkyWaitService.waitComponent = cmpRef.instance;
1963
- }
1964
- this.setWaitComponentProperties(isBlocking);
1965
- });
2004
+ waitComponent.hasBlockingWait = true;
2005
+ pageWaitBlockingCount++;
1966
2006
  }
1967
2007
  else {
1968
- this.setWaitComponentProperties(isBlocking);
2008
+ waitComponent.hasNonBlockingWait = true;
2009
+ pageWaitNonBlockingCount++;
1969
2010
  }
1970
2011
  }
1971
- endPageWait(isBlocking) {
2012
+ }, _SkyWaitService_beginPageWait = function _SkyWaitService_beginPageWait(isBlocking) {
2013
+ if (!waitComponent) {
1972
2014
  /*
1973
- Needs to yield so that wait creation can finish
1974
- before it is dismissed in the event of a race.
2015
+ Dynamic component creation needs to be done in a timeout to prevent ApplicationRef from
2016
+ crashing when wait service is called in Angular lifecycle functions.
1975
2017
  */
1976
- this.windowSvc.nativeWindow.setTimeout(() => {
1977
- if (SkyWaitService.waitComponent) {
1978
- if (isBlocking) {
1979
- if (SkyWaitService.pageWaitBlockingCount > 0) {
1980
- SkyWaitService.pageWaitBlockingCount--;
1981
- }
1982
- if (SkyWaitService.pageWaitBlockingCount < 1) {
1983
- SkyWaitService.waitComponent.hasBlockingWait = false;
1984
- }
1985
- }
1986
- else {
1987
- if (SkyWaitService.pageWaitNonBlockingCount > 0) {
1988
- SkyWaitService.pageWaitNonBlockingCount--;
1989
- }
1990
- if (SkyWaitService.pageWaitNonBlockingCount < 1) {
1991
- SkyWaitService.waitComponent.hasNonBlockingWait = false;
1992
- }
1993
- }
2018
+ __classPrivateFieldGet(this, _SkyWaitService_windowSvc, "f").nativeWindow.setTimeout(() => {
2019
+ // Ensuring here that we recheck this after the setTimeout is over so that we don't clash
2020
+ // with any other waits that are created.
2021
+ if (!waitComponent) {
2022
+ const factory = __classPrivateFieldGet(this, _SkyWaitService_resolver, "f").resolveComponentFactory(SkyWaitPageComponent);
2023
+ __classPrivateFieldGet(this, _SkyWaitService_waitAdapter, "f").addPageWaitEl();
2024
+ const cmpRef = __classPrivateFieldGet(this, _SkyWaitService_appRef, "f").bootstrap(factory);
2025
+ waitComponent = cmpRef.instance;
1994
2026
  }
2027
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_setWaitComponentProperties).call(this, isBlocking);
1995
2028
  });
1996
2029
  }
1997
- clearPageWait(isBlocking) {
1998
- if (SkyWaitService.waitComponent) {
2030
+ else {
2031
+ __classPrivateFieldGet(this, _SkyWaitService_instances, "m", _SkyWaitService_setWaitComponentProperties).call(this, isBlocking);
2032
+ }
2033
+ }, _SkyWaitService_endPageWait = function _SkyWaitService_endPageWait(isBlocking) {
2034
+ /*
2035
+ Needs to yield so that wait creation can finish
2036
+ before it is dismissed in the event of a race.
2037
+ */
2038
+ __classPrivateFieldGet(this, _SkyWaitService_windowSvc, "f").nativeWindow.setTimeout(() => {
2039
+ if (waitComponent) {
1999
2040
  if (isBlocking) {
2000
- SkyWaitService.pageWaitBlockingCount = 0;
2001
- SkyWaitService.waitComponent.hasBlockingWait = false;
2041
+ if (pageWaitBlockingCount > 0) {
2042
+ pageWaitBlockingCount--;
2043
+ }
2044
+ if (pageWaitBlockingCount < 1) {
2045
+ waitComponent.hasBlockingWait = false;
2046
+ }
2002
2047
  }
2003
2048
  else {
2004
- SkyWaitService.pageWaitNonBlockingCount = 0;
2005
- SkyWaitService.waitComponent.hasNonBlockingWait = false;
2049
+ if (pageWaitNonBlockingCount > 0) {
2050
+ pageWaitNonBlockingCount--;
2051
+ }
2052
+ if (pageWaitNonBlockingCount < 1) {
2053
+ waitComponent.hasNonBlockingWait = false;
2054
+ }
2006
2055
  }
2007
2056
  }
2057
+ });
2058
+ }, _SkyWaitService_clearPageWait = function _SkyWaitService_clearPageWait(isBlocking) {
2059
+ if (waitComponent) {
2060
+ if (isBlocking) {
2061
+ pageWaitBlockingCount = 0;
2062
+ waitComponent.hasBlockingWait = false;
2063
+ }
2064
+ else {
2065
+ pageWaitNonBlockingCount = 0;
2066
+ waitComponent.hasNonBlockingWait = false;
2067
+ }
2008
2068
  }
2009
- }
2010
- SkyWaitService.pageWaitBlockingCount = 0;
2011
- SkyWaitService.pageWaitNonBlockingCount = 0;
2069
+ };
2012
2070
  SkyWaitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: SkyWaitPageAdapterService }, { token: i2.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
2013
2071
  SkyWaitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitService, providedIn: 'root' });
2014
2072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyWaitService, decorators: [{