@skyux/indicators 8.0.0-alpha.20 → 8.0.0-alpha.21

package/fesm2020/skyux-indicators.mjs

@@ -8,7 +8,7 @@ import * as i2 from '@skyux/theme';
 import { SkyThemeIconManifestService, SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i2$1 from '@skyux/core';
-import { SkyLogService, SkyTrimModule, SkyMutationObserverService, SkyAppWindowRef, SkyDynamicComponentService, SkyDynamicComponentLocation } from '@skyux/core';
+import { SkyLogService, SkyTrimModule, SkyMutationObserverService, SkyLiveAnnouncerService, SkyAppWindowRef, SkyDynamicComponentService, SkyDynamicComponentLocation } from '@skyux/core';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { Subject, BehaviorSubject, defer } from 'rxjs';
 import { takeUntil, take, finalize } from 'rxjs/operators';
@@ -210,6 +210,10 @@ const RESOURCES = {
         skyux_wait_page_blocking_aria_alt_text: {
             message: 'Page loading. Please wait.',
         },
+        skyux_wait_screen_reader_completed_text: { message: 'Loading complete.' },
+        skyux_wait_page_screen_reader_completed_text: {
+            message: 'Page loading complete.',
+        },
     },
 };
 class SkyIndicatorsResourcesProvider {
@@ -1799,16 +1803,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
-var _SkyWaitComponent_instances, _SkyWaitComponent_customAriaLabel, _SkyWaitComponent_id, _SkyWaitComponent_elRef, _SkyWaitComponent_adapterService, _SkyWaitComponent_resourceSvc, _SkyWaitComponent_ngUnsubscribe, _SkyWaitComponent__isFullPage, _SkyWaitComponent__isNonBlocking, _SkyWaitComponent__isWaiting, _SkyWaitComponent_publishAriaLabel;
+var _SkyWaitComponent_instances, _SkyWaitComponent_customAriaLabel, _SkyWaitComponent_customScreenReaderCompletedText, _SkyWaitComponent_id, _SkyWaitComponent_elRef, _SkyWaitComponent_adapterService, _SkyWaitComponent_liveAnnouncer, _SkyWaitComponent_resourceSvc, _SkyWaitComponent_ngUnsubscribe, _SkyWaitComponent__isFullPage, _SkyWaitComponent__isNonBlocking, _SkyWaitComponent__isWaiting, _SkyWaitComponent_publishAriaLabel, _SkyWaitComponent_publishScreenReaderCompletedText;
 let nextId = 0;
 class SkyWaitComponent {
     constructor() {
         _SkyWaitComponent_instances.add(this);
         this.ariaLabelStream = new BehaviorSubject('');
+        this.ariaLiveText = '';
+        this.screenReaderCompletedTextStream = new BehaviorSubject('');
         _SkyWaitComponent_customAriaLabel.set(this, void 0);
+        _SkyWaitComponent_customScreenReaderCompletedText.set(this, void 0);
         _SkyWaitComponent_id.set(this, `sky-wait-${++nextId}`);
         _SkyWaitComponent_elRef.set(this, inject(ElementRef));
         _SkyWaitComponent_adapterService.set(this, inject(SkyWaitAdapterService));
+        _SkyWaitComponent_liveAnnouncer.set(this, inject(SkyLiveAnnouncerService));
         _SkyWaitComponent_resourceSvc.set(this, inject(SkyLibResourcesService));
         _SkyWaitComponent_ngUnsubscribe.set(this, new Subject());
         _SkyWaitComponent__isFullPage.set(this, void 0);
@@ -1816,13 +1824,12 @@ class SkyWaitComponent {
         _SkyWaitComponent__isWaiting.set(this, void 0);
     }
     /**
-     * The ARIA label for the wait icon while an element or page loads.
-     * This sets the icon's `aria-label` attribute
-     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
-     * The default value varies based on whether the wait is for an element or a page
-     * and whether it is a blocking wait. For example, the default for a page-blocking
-     * wait is "Page loading. Please wait."
-     * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).
+     * The ARIA label for the wait icon.
+     * This sets the icon's `aria-label` attribute to provide a text equivalent for screen readers
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) when an element or page loads and when users tab to a wait icon.
+     * The default value varies based on whether the wait is for an element or a page and whether it is a blocking wait. For example, the default for a page-level blocking wait is "Page loading. Please wait."
+     * For element-level waits, we recommend that consumers overwrite the default to describe the specific element.
+     * "For more information, see the Design tab and the [WAI-ARIA `aria-label` definition](https://www.w3.org/TR/wai-aria/#aria-label).
      */
     set ariaLabel(value) {
         __classPrivateFieldSet(this, _SkyWaitComponent_customAriaLabel, value, "f");
@@ -1841,6 +1848,13 @@ class SkyWaitComponent {
             }
         }
         __classPrivateFieldGet(this, _SkyWaitComponent_adapterService, "f").setBusyState(__classPrivateFieldGet(this, _SkyWaitComponent_elRef, "f"), !!this.isFullPage, !!value, !!this.isNonBlocking, __classPrivateFieldGet(this, _SkyWaitComponent_id, "f"));
+        if (value) {
+            __classPrivateFieldGet(this, _SkyWaitComponent_liveAnnouncer, "f").announce(this.ariaLabelStream.getValue());
+        }
+        else if (__classPrivateFieldGet(this, _SkyWaitComponent__isWaiting, "f")) {
+            // NOTE: This should only happen if the wait was previously waiting and no longer is waiting.
+            __classPrivateFieldGet(this, _SkyWaitComponent_liveAnnouncer, "f").announce(this.screenReaderCompletedTextStream.getValue());
+        }
         __classPrivateFieldSet(this, _SkyWaitComponent__isWaiting, value, "f");
     }
     get isWaiting() {
@@ -1863,6 +1877,7 @@ class SkyWaitComponent {
         }
         __classPrivateFieldSet(this, _SkyWaitComponent__isFullPage, value, "f");
         __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
+        __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishScreenReaderCompletedText).call(this);
     }
     get isFullPage() {
         return __classPrivateFieldGet(this, _SkyWaitComponent__isFullPage, "f");
@@ -1879,21 +1894,31 @@ class SkyWaitComponent {
     get isNonBlocking() {
         return __classPrivateFieldGet(this, _SkyWaitComponent__isNonBlocking, "f");
     }
+    /**
+     * Screen reader text [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility) when the wait toggles off.
+     *  The default varies based on whether the wait is for an element or a page.
+     * For example, the default for a page-level wait is "Page loading complete."
+     * For element-level waits, we recommend that consumers overwrite the default to describe the specific element.
+     * For more information, see the Design tab and the [WCAG documentation on status messages](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html).
+     */
+    set screenReaderCompletedText(value) {
+        __classPrivateFieldSet(this, _SkyWaitComponent_customScreenReaderCompletedText, value, "f");
+        __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishScreenReaderCompletedText).call(this);
+    }
     ngOnInit() {
         __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishAriaLabel).call(this);
+        __classPrivateFieldGet(this, _SkyWaitComponent_instances, "m", _SkyWaitComponent_publishScreenReaderCompletedText).call(this);
     }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f").next();
         __classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f").complete();
     }
 }
-_SkyWaitComponent_customAriaLabel = new WeakMap(), _SkyWaitComponent_id = new WeakMap(), _SkyWaitComponent_elRef = new WeakMap(), _SkyWaitComponent_adapterService = new WeakMap(), _SkyWaitComponent_resourceSvc = new WeakMap(), _SkyWaitComponent_ngUnsubscribe = new WeakMap(), _SkyWaitComponent__isFullPage = new WeakMap(), _SkyWaitComponent__isNonBlocking = new WeakMap(), _SkyWaitComponent__isWaiting = new WeakMap(), _SkyWaitComponent_instances = new WeakSet(), _SkyWaitComponent_publishAriaLabel = function _SkyWaitComponent_publishAriaLabel() {
+_SkyWaitComponent_customAriaLabel = new WeakMap(), _SkyWaitComponent_customScreenReaderCompletedText = new WeakMap(), _SkyWaitComponent_id = new WeakMap(), _SkyWaitComponent_elRef = new WeakMap(), _SkyWaitComponent_adapterService = new WeakMap(), _SkyWaitComponent_liveAnnouncer = new WeakMap(), _SkyWaitComponent_resourceSvc = new WeakMap(), _SkyWaitComponent_ngUnsubscribe = new WeakMap(), _SkyWaitComponent__isFullPage = new WeakMap(), _SkyWaitComponent__isNonBlocking = new WeakMap(), _SkyWaitComponent__isWaiting = new WeakMap(), _SkyWaitComponent_instances = new WeakSet(), _SkyWaitComponent_publishAriaLabel = function _SkyWaitComponent_publishAriaLabel() {
     if (__classPrivateFieldGet(this, _SkyWaitComponent_customAriaLabel, "f")) {
         this.ariaLabelStream.next(__classPrivateFieldGet(this, _SkyWaitComponent_customAriaLabel, "f"));
-        return;
     }
-    /* istanbul ignore else */
-    if (__classPrivateFieldGet(this, _SkyWaitComponent_resourceSvc, "f")) {
+    else {
         const type = this.isFullPage ? '_page' : '';
         const blocking = this.isNonBlocking ? '' : '_blocking';
         const key = `skyux_wait${type}${blocking}_aria_alt_text`;
@@ -1904,9 +1929,23 @@ _SkyWaitComponent_customAriaLabel = new WeakMap(), _SkyWaitComponent_id = new We
             this.ariaLabelStream.next(value);
         });
     }
+}, _SkyWaitComponent_publishScreenReaderCompletedText = function _SkyWaitComponent_publishScreenReaderCompletedText() {
+    if (__classPrivateFieldGet(this, _SkyWaitComponent_customScreenReaderCompletedText, "f")) {
+        this.screenReaderCompletedTextStream.next(__classPrivateFieldGet(this, _SkyWaitComponent_customScreenReaderCompletedText, "f"));
+    }
+    else {
+        const type = this.isFullPage ? '_page' : '';
+        const key = `skyux_wait${type}_screen_reader_completed_text`;
+        __classPrivateFieldGet(this, _SkyWaitComponent_resourceSvc, "f")
+            .getString(key)
+            .pipe(take(1), takeUntil(__classPrivateFieldGet(this, _SkyWaitComponent_ngUnsubscribe, "f")))
+            .subscribe((value) => {
+            this.screenReaderCompletedTextStream.next(value);
+        });
+    }
 };
 SkyWaitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyWaitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyWaitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyWaitComponent, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div\n  class=\"sky-wait-container\"\n  [ngClass]=\"{\n    'sky-wait-full-page': isFullPage,\n    'sky-wait-non-blocking': isNonBlocking\n  }\"\n>\n  <div\n    *ngIf=\"isWaiting\"\n    class=\"sky-wait-mask\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabelStream | async\"\n    [ngClass]=\"{\n      'sky-wait-mask-loading-fixed': isFullPage,\n      'sky-wait-mask-loading-non-blocking': isNonBlocking,\n      'sky-wait-mask-loading-blocking': !isNonBlocking\n    }\"\n  >\n    <div class=\"sky-wait\">\n      <div class=\"sky-wait-double-bounce1\"></div>\n      <div class=\"sky-wait-double-bounce2\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+SkyWaitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyWaitComponent, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking", screenReaderCompletedText: "screenReaderCompletedText" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div\n  class=\"sky-wait-container\"\n  [ngClass]=\"{\n    'sky-wait-full-page': isFullPage,\n    'sky-wait-non-blocking': isNonBlocking\n  }\"\n>\n  <div\n    *ngIf=\"isWaiting\"\n    class=\"sky-wait-mask\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabelStream | async\"\n    [ngClass]=\"{\n      'sky-wait-mask-loading-fixed': isFullPage,\n      'sky-wait-mask-loading-non-blocking': isNonBlocking,\n      'sky-wait-mask-loading-blocking': !isNonBlocking\n    }\"\n  >\n    <div class=\"sky-wait\">\n      <div class=\"sky-wait-double-bounce1\"></div>\n      <div class=\"sky-wait-double-bounce2\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyWaitComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-wait', providers: [SkyWaitAdapterService], template: "<div\n  class=\"sky-wait-container\"\n  [ngClass]=\"{\n    'sky-wait-full-page': isFullPage,\n    'sky-wait-non-blocking': isNonBlocking\n  }\"\n>\n  <div\n    *ngIf=\"isWaiting\"\n    class=\"sky-wait-mask\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabelStream | async\"\n    [ngClass]=\"{\n      'sky-wait-mask-loading-fixed': isFullPage,\n      'sky-wait-mask-loading-non-blocking': isNonBlocking,\n      'sky-wait-mask-loading-blocking': !isNonBlocking\n    }\"\n  >\n    <div class=\"sky-wait\">\n      <div class=\"sky-wait-double-bounce1\"></div>\n      <div class=\"sky-wait-double-bounce2\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;inset:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{inset:auto auto 0 0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"] }]
@@ -1918,6 +1957,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 type: Input
             }], isNonBlocking: [{
                 type: Input
+            }], screenReaderCompletedText: [{
+                type: Input
             }] } });
 
 /**
@@ -1926,7 +1967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
 class SkyWaitPageComponent {
 }
 SkyWaitPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyWaitPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyWaitPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyWaitPageComponent, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n  <sky-wait\n    data-sky-id=\"page-wait-non-blocking\"\n    [isFullPage]=\"true\"\n    [isNonBlocking]=\"true\"\n    [isWaiting]=\"hasNonBlockingWait\"\n  >\n  </sky-wait>\n  <sky-wait\n    data-sky-id=\"page-wait-blocking\"\n    [isFullPage]=\"true\"\n    [isWaiting]=\"hasBlockingWait\"\n  >\n  </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], dependencies: [{ kind: "component", type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }] });
+SkyWaitPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyWaitPageComponent, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n  <sky-wait\n    data-sky-id=\"page-wait-non-blocking\"\n    [isFullPage]=\"true\"\n    [isNonBlocking]=\"true\"\n    [isWaiting]=\"hasNonBlockingWait\"\n  >\n  </sky-wait>\n  <sky-wait\n    data-sky-id=\"page-wait-blocking\"\n    [isFullPage]=\"true\"\n    [isWaiting]=\"hasBlockingWait\"\n  >\n  </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], dependencies: [{ kind: "component", type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyWaitPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-wait-page', template: "<div class=\"sky-wait-page\">\n  <sky-wait\n    data-sky-id=\"page-wait-non-blocking\"\n    [isFullPage]=\"true\"\n    [isNonBlocking]=\"true\"\n    [isWaiting]=\"hasNonBlockingWait\"\n  >\n  </sky-wait>\n  <sky-wait\n    data-sky-id=\"page-wait-blocking\"\n    [isFullPage]=\"true\"\n    [isWaiting]=\"hasBlockingWait\"\n  >\n  </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"] }]