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