@skyux/indicators 5.7.2 → 6.0.0-beta.2

package/fesm2015/skyux-indicators.mjs

@@ -0,0 +1,1830 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Pipe, Component, Input, ChangeDetectionStrategy, NgModule, EventEmitter, Output, Directive, ViewChildren, Optional } from '@angular/core';
+import * as i1$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3 from '@skyux/theme';
+import { SkyThemeIconManifestModule, SkyThemeModule } from '@skyux/theme';
+import * as i1$2 from '@skyux/core';
+import { MutationObserverService } from '@skyux/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { Subject, BehaviorSubject, defer } from 'rxjs';
+import { takeUntil, finalize } from 'rxjs/operators';
+
+/**
+ * @internal
+ */
+class SkyIconResolverService {
+    constructor(manifestSvc) {
+        this.glyphMap = new Map();
+        // Map the icons by name for more efficient lookup.
+        for (const glyph of manifestSvc.getManifest().glyphs) {
+            this.glyphMap.set(glyph.name, glyph);
+        }
+    }
+    resolveIcon(iconName, variant) {
+        const variantIconName = variant && `${iconName}-${variant}`;
+        if (variantIconName && this.glyphMap.has(variantIconName)) {
+            // A variant was specified and exists; return it.
+            return variantIconName;
+        }
+        if (variant !== 'line' && !this.glyphMap.has(iconName)) {
+            // Either the solid variant was specified and doesn't exist, or no variant was
+            // specified and a non-variant doesn't exist; fall back to the line variant.
+            const lineIconName = `${iconName}-line`;
+            if (this.glyphMap.has(lineIconName)) {
+                return lineIconName;
+            }
+        }
+        // Fall back to the icon name as-is.
+        return iconName;
+    }
+}
+SkyIconResolverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconResolverService, deps: [{ token: i3.SkyThemeIconManifestService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyIconResolverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconResolverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i3.SkyThemeIconManifestService }]; } });
+
+/**
+ * @internal
+ */
+class SkyIconClassListPipe {
+    constructor(resolver) {
+        this.resolver = resolver;
+    }
+    transform(icon, iconType, size, fixedWidth, variant) {
+        let classList;
+        if (iconType === 'skyux') {
+            const resolvedIcon = this.resolver.resolveIcon(icon, variant);
+            classList = ['sky-i-' + resolvedIcon];
+        }
+        else {
+            classList = ['fa', 'fa-' + icon];
+        }
+        if (size) {
+            classList.push('fa-' + size);
+        }
+        if (fixedWidth) {
+            classList.push('fa-fw');
+        }
+        return classList;
+    }
+}
+SkyIconClassListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconClassListPipe, deps: [{ token: SkyIconResolverService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyIconClassListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconClassListPipe, name: "skyIconClassList" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconClassListPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyIconClassList',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyIconResolverService }]; } });
+
+class SkyIconStackComponent {
+}
+SkyIconStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyIconClassList": SkyIconClassListPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-icon-stack', template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], baseIcon: [{
+                type: Input
+            }], topIcon: [{
+                type: Input
+            }] } });
+
+class SkyIconComponent {
+    constructor() {
+        /**
+         * Specifies the type of icon to display. Specifying `"fa"` will display a Font Awesome icon,
+         * while specifying `"skyux"` will display an icon from the custom SKY UX icon font. Note that
+         * the custom SKY UX icon font is currently in beta.
+         * @default "fa"
+         */
+        this.iconType = 'fa';
+    }
+}
+SkyIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyIconComponent, selector: "sky-icon", inputs: { icon: "icon", iconType: "iconType", size: "size", fixedWidth: "fixedWidth", variant: "variant" }, ngImport: i0, template: "<i\n  *ngIf=\"icon\"\n  aria-hidden=\"true\"\n  class=\"sky-icon\"\n  [ngClass]=\"icon | skyIconClassList: iconType:size:fixedWidth:variant\"\n>\n</i>\n", styles: [":host{display:inline-block}i{display:inherit}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyIconClassList": SkyIconClassListPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-icon', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconType: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fixedWidth: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
+class SkyIconModule {
+}
+SkyIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconModule, declarations: [SkyIconClassListPipe, SkyIconComponent, SkyIconStackComponent], imports: [CommonModule, SkyThemeIconManifestModule], exports: [SkyIconComponent, SkyIconStackComponent] });
+SkyIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconModule, imports: [[CommonModule, SkyThemeIconManifestModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyIconClassListPipe, SkyIconComponent, SkyIconStackComponent],
+                    imports: [CommonModule, SkyThemeIconManifestModule],
+                    exports: [SkyIconComponent, SkyIconStackComponent],
+                }]
+        }] });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-indicators' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_alert_close: { message: 'Close the alert' },
+        skyux_help_inline_button_title: { message: 'Show help content' },
+        skyux_status_indicator_sr_completed: { message: 'Completed:' },
+        skyux_status_indicator_sr_error: { message: 'Error:' },
+        skyux_status_indicator_sr_important_info: {
+            message: 'Important information:',
+        },
+        skyux_status_indicator_sr_warning: { message: 'Warning:' },
+        skyux_tokens_dismiss_button_title: { message: 'Remove item' },
+        skyux_wait_aria_alt_text: { message: 'Loading.' },
+        skyux_wait_blocking_aria_alt_text: { message: 'Loading. Please wait.' },
+        skyux_wait_page_aria_alt_text: { message: 'Page loading.' },
+        skyux_wait_page_blocking_aria_alt_text: {
+            message: 'Page loading. Please wait.',
+        },
+    },
+};
+class SkyIndicatorsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyIndicatorsResourcesModule {
+}
+SkyIndicatorsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIndicatorsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIndicatorsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIndicatorsResourcesModule, exports: [SkyI18nModule] });
+SkyIndicatorsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIndicatorsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyIndicatorsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIndicatorsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyIndicatorsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internl
+ */
+class SkyIndicatorIconUtility {
+    static getIconsForType(indicatorType) {
+        let icon;
+        let baseIcon;
+        let topIcon;
+        // tslint:disable-next-line: switch-default
+        switch (indicatorType) {
+            case 'danger':
+            case 'warning':
+                icon = 'warning';
+                baseIcon = 'triangle-solid';
+                topIcon = 'exclamation';
+                break;
+            case 'info':
+                icon = 'exclamation-circle';
+                baseIcon = 'circle-solid';
+                topIcon = 'help-i';
+                break;
+            case 'success':
+                icon = 'check';
+                baseIcon = 'circle-solid';
+                topIcon = 'check';
+                break;
+        }
+        return {
+            defaultThemeIcon: icon,
+            modernThemeBaseIcon: {
+                icon: baseIcon,
+                iconType: 'skyux',
+            },
+            modernThemeTopIcon: {
+                icon: topIcon,
+                iconType: 'skyux',
+            },
+        };
+    }
+}
+
+const ALERT_TYPE_DEFAULT = 'warning';
+class SkyAlertComponent {
+    constructor() {
+        /**
+         * Fires when users close the alert.
+         */
+        this.closedChange = new EventEmitter();
+    }
+    /**
+     * Specifies a style for the alert to determine the icon and background color.
+     * The valid options are `danger`, `info`, `success`, and `warning`.
+     * @default "warning"
+     */
+    set alertType(value) {
+        this._alertType = value;
+        this.updateAlertIcon();
+    }
+    get alertType() {
+        return this._alertType || ALERT_TYPE_DEFAULT;
+    }
+    ngOnInit() {
+        this.updateAlertIcon();
+    }
+    close() {
+        this.closed = true;
+        this.closedChange.emit(true);
+    }
+    updateAlertIcon() {
+        const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.alertType);
+        this.alertBaseIcon = indicatorIcon.modernThemeBaseIcon;
+        this.alertTopIcon = indicatorIcon.modernThemeTopIcon;
+    }
+}
+SkyAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertType === 'info',\n    'sky-alert-success': alertType === 'success',\n    'sky-alert-warning': alertType === 'warning',\n    'sky-alert-danger': alertType === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{padding:0 10px;margin-bottom:20px;border-left:solid 30px;color:#212327;display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding-top:10px;padding-bottom:10px;width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:#212327}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info{background-color:#81d4f7;border-color:#00b4f1}.sky-alert.sky-alert-info:before{content:\"\\f06a\";font-family:FontAwesome;margin-left:-31px;margin-right:20px;color:#fff}.sky-alert.sky-alert-success{background-color:#b7da9b;border-color:#72bf44}.sky-alert.sky-alert-success:before{content:\"\\f00c\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-warning{background-color:#ffd597;border-color:#fbb034}.sky-alert.sky-alert-warning:before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-danger{background-color:#f7a08f;border-color:#ef4044}.sky-alert.sky-alert-danger:before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:#212327;opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-close-icon-theme-modern,.sky-alert-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-alert{border-left-width:7px}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:15px}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-alert-info:before,:host-context(.sky-theme-modern) .sky-alert-success:before,:host-context(.sky-theme-modern) .sky-alert-warning:before,:host-context(.sky-theme-modern) .sky-alert-danger:before{display:none}:host-context(.sky-theme-modern) .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}:host-context(.sky-theme-modern) .sky-alert-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-modern{display:inline}.sky-theme-modern .sky-alert{border-left-width:7px}.sky-theme-modern .sky-alert .sky-alert-content{padding:15px}.sky-theme-modern .sky-alert.sky-alert-info{background-color:#c1e8fb}.sky-theme-modern .sky-alert-info:before,.sky-theme-modern .sky-alert-success:before,.sky-theme-modern .sky-alert-warning:before,.sky-theme-modern .sky-alert-danger:before{display:none}.sky-theme-modern .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-alert-icon-theme-modern{display:block}.sky-theme-modern .sky-alert-close-icon-theme-default{display:none}.sky-theme-modern .sky-alert-close-icon-theme-modern{display:inline}\n"], components: [{ type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-alert', template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertType === 'info',\n    'sky-alert-success': alertType === 'success',\n    'sky-alert-warning': alertType === 'warning',\n    'sky-alert-danger': alertType === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{padding:0 10px;margin-bottom:20px;border-left:solid 30px;color:#212327;display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding-top:10px;padding-bottom:10px;width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:#212327}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info{background-color:#81d4f7;border-color:#00b4f1}.sky-alert.sky-alert-info:before{content:\"\\f06a\";font-family:FontAwesome;margin-left:-31px;margin-right:20px;color:#fff}.sky-alert.sky-alert-success{background-color:#b7da9b;border-color:#72bf44}.sky-alert.sky-alert-success:before{content:\"\\f00c\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-warning{background-color:#ffd597;border-color:#fbb034}.sky-alert.sky-alert-warning:before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-danger{background-color:#f7a08f;border-color:#ef4044}.sky-alert.sky-alert-danger:before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:#212327;opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-close-icon-theme-modern,.sky-alert-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-alert{border-left-width:7px}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:15px}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-alert-info:before,:host-context(.sky-theme-modern) .sky-alert-success:before,:host-context(.sky-theme-modern) .sky-alert-warning:before,:host-context(.sky-theme-modern) .sky-alert-danger:before{display:none}:host-context(.sky-theme-modern) .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}:host-context(.sky-theme-modern) .sky-alert-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-modern{display:inline}.sky-theme-modern .sky-alert{border-left-width:7px}.sky-theme-modern .sky-alert .sky-alert-content{padding:15px}.sky-theme-modern .sky-alert.sky-alert-info{background-color:#c1e8fb}.sky-theme-modern .sky-alert-info:before,.sky-theme-modern .sky-alert-success:before,.sky-theme-modern .sky-alert-warning:before,.sky-theme-modern .sky-alert-danger:before{display:none}.sky-theme-modern .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-alert-icon-theme-modern{display:block}.sky-theme-modern .sky-alert-close-icon-theme-default{display:none}.sky-theme-modern .sky-alert-close-icon-theme-modern{display:inline}\n"] }]
+        }], propDecorators: { alertType: [{
+                type: Input
+            }], closeable: [{
+                type: Input
+            }], closed: [{
+                type: Input
+            }], closedChange: [{
+                type: Output
+            }] } });
+
+class SkyAlertModule {
+}
+SkyAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAlertModule, declarations: [SkyAlertComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyIndicatorsResourcesModule,
+        SkyThemeModule], exports: [SkyAlertComponent] });
+SkyAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAlertModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyIndicatorsResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyAlertComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyIndicatorsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyAlertComponent],
+                }]
+        }] });
+
+/**
+ * Displays a chevron icon.
+ * @internal
+ */
+class SkyExpansionIndicatorComponent {
+    /**
+     * Specifies whether the chevron points up or down.
+     */
+    set direction(value) {
+        /* istanbul ignore else */
+        if (value != this._direction) {
+            this._direction = value;
+        }
+    }
+    get direction() {
+        return this._direction || 'up';
+    }
+}
+SkyExpansionIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyExpansionIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyExpansionIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: { direction: "direction" }, ngImport: i0, template: "<div\n  aria-hidden=\"true\"\n  class=\"sky-expansion-indicator\"\n  [ngClass]=\"['sky-expansion-indicator-' + direction]\"\n>\n  <ng-container *skyThemeIf=\"'default'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n  </ng-container>\n  <ng-container *skyThemeIf=\"'modern'\">\n    <span class=\"sky-expansion-indicator-glyph-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    </span>\n  </ng-container>\n</div>\n\n<ng-template #icon>\n  <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n  <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part{border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator{height:26px;width:26px}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{left:10.5px}.sky-theme-modern .sky-expansion-indicator{height:26px;width:26px}.sky-theme-modern .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}.sky-theme-modern .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}.sky-theme-modern .sky-expansion-indicator-left{border-radius:1px 0 0 1px}.sky-theme-modern .sky-expansion-indicator-right{border-radius:0 1px 1px 0}.sky-theme-modern .sky-expansion-indicator-left{left:4px}.sky-theme-modern .sky-expansion-indicator-right{left:10.5px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyExpansionIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-expansion-indicator', template: "<div\n  aria-hidden=\"true\"\n  class=\"sky-expansion-indicator\"\n  [ngClass]=\"['sky-expansion-indicator-' + direction]\"\n>\n  <ng-container *skyThemeIf=\"'default'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n  </ng-container>\n  <ng-container *skyThemeIf=\"'modern'\">\n    <span class=\"sky-expansion-indicator-glyph-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    </span>\n  </ng-container>\n</div>\n\n<ng-template #icon>\n  <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n  <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part{border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator{height:26px;width:26px}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{left:4px}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{left:10.5px}.sky-theme-modern .sky-expansion-indicator{height:26px;width:26px}.sky-theme-modern .sky-expansion-indicator-part{background:#686c73;border:none;height:2px;width:11px;top:13px}.sky-theme-modern .sky-expansion-indicator-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}.sky-theme-modern .sky-expansion-indicator-left{border-radius:1px 0 0 1px}.sky-theme-modern .sky-expansion-indicator-right{border-radius:0 1px 1px 0}.sky-theme-modern .sky-expansion-indicator-left{left:4px}.sky-theme-modern .sky-expansion-indicator-right{left:10.5px}\n"] }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }] } });
+
+class SkyExpansionIndicatorModule {
+}
+SkyExpansionIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyExpansionIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyExpansionIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyExpansionIndicatorModule, declarations: [SkyExpansionIndicatorComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyExpansionIndicatorComponent] });
+SkyExpansionIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyExpansionIndicatorModule, imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyExpansionIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyExpansionIndicatorComponent],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [SkyExpansionIndicatorComponent],
+                }]
+        }] });
+
+/**
+ * Creates an accessible button that wraps the chevron icon.
+ * @internal
+ */
+class SkyChevronComponent {
+    constructor() {
+        /**
+         * Indicates whether to disable the chevron button.
+         */
+        this.disabled = false;
+        /**
+         * Fires when the direction of the chevron changes.
+         */
+        this.directionChange = new EventEmitter();
+    }
+    /**
+     * Specifies whether the chevron points up or down.
+     */
+    set direction(value) {
+        /* istanbul ignore else */
+        if (value != this._direction) {
+            this._direction = value;
+            /* istanbul ignore else */
+            if (value === 'up') {
+                this.ariaExpanded = true;
+            }
+            else if (this.direction === 'down') {
+                this.ariaExpanded = false;
+            }
+        }
+    }
+    get direction() {
+        return this._direction || 'up';
+    }
+    chevronClick(event) {
+        event.stopPropagation();
+        this.direction = this.direction === 'up' ? 'down' : 'up';
+        this.directionChange.emit(this.direction);
+    }
+}
+SkyChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyChevronComponent, selector: "sky-chevron", inputs: { ariaControls: "ariaControls", ariaLabel: "ariaLabel", direction: "direction", disabled: "disabled" }, outputs: { directionChange: "directionChange" }, ngImport: i0, template: "<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + direction]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n>\n  <sky-expansion-indicator [direction]=\"direction\"></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"], components: [{ type: SkyExpansionIndicatorComponent, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyChevronComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-chevron', template: "<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + direction]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n>\n  <sky-expansion-indicator [direction]=\"direction\"></sky-expansion-indicator>\n</button>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;padding:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}\n"] }]
+        }], propDecorators: { ariaControls: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], directionChange: [{
+                type: Output
+            }] } });
+
+class SkyChevronModule {
+}
+SkyChevronModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyChevronModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyChevronModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyChevronModule, declarations: [SkyChevronComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIndicatorsResourcesModule,
+        SkyThemeModule,
+        SkyExpansionIndicatorModule], exports: [SkyChevronComponent] });
+SkyChevronModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyChevronModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIndicatorsResourcesModule,
+            SkyThemeModule,
+            SkyExpansionIndicatorModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyChevronModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyChevronComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIndicatorsResourcesModule,
+                        SkyThemeModule,
+                        SkyExpansionIndicatorModule,
+                    ],
+                    exports: [SkyChevronComponent],
+                }]
+        }] });
+
+class SkyHelpInlineComponent {
+    constructor() {
+        /**
+         * Fires when the user clicks the help inline button.
+         */
+        this.actionClick = new EventEmitter();
+    }
+    onClick() {
+        this.actionClick.emit();
+    }
+}
+SkyHelpInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyHelpInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyHelpInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyHelpInlineComponent, selector: "sky-help-inline", outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<button\n  class=\"sky-help-inline\"\n  type=\"button\"\n  [attr.aria-label]=\"'skyux_help_inline_button_title' | skyLibResources\"\n  (click)=\"onClick()\"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"info-circle\"> </sky-icon>\n  <sky-icon-stack\n    *skyThemeIf=\"'modern'\"\n    size=\"xs\"\n    [baseIcon]=\"{\n      icon: 'circle-solid',\n      iconType: 'skyux'\n    }\"\n    [topIcon]=\"{\n      icon: 'help-i',\n      iconType: 'skyux'\n    }\"\n  >\n  </sky-icon-stack>\n</button>\n", styles: [".sky-help-inline{color:#0974a1;font-size:15px;background-color:transparent;border:none;display:inline-block}.sky-help-inline:hover{color:#065171;transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }], directives: [{ type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyHelpInlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-help-inline', template: "<button\n  class=\"sky-help-inline\"\n  type=\"button\"\n  [attr.aria-label]=\"'skyux_help_inline_button_title' | skyLibResources\"\n  (click)=\"onClick()\"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"info-circle\"> </sky-icon>\n  <sky-icon-stack\n    *skyThemeIf=\"'modern'\"\n    size=\"xs\"\n    [baseIcon]=\"{\n      icon: 'circle-solid',\n      iconType: 'skyux'\n    }\"\n    [topIcon]=\"{\n      icon: 'help-i',\n      iconType: 'skyux'\n    }\"\n  >\n  </sky-icon-stack>\n</button>\n", styles: [".sky-help-inline{color:#0974a1;font-size:15px;background-color:transparent;border:none;display:inline-block}.sky-help-inline:hover{color:#065171;transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}\n"] }]
+        }], propDecorators: { actionClick: [{
+                type: Output
+            }] } });
+
+class SkyHelpInlineModule {
+}
+SkyHelpInlineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyHelpInlineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyHelpInlineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyHelpInlineModule, declarations: [SkyHelpInlineComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyIndicatorsResourcesModule,
+        SkyThemeModule], exports: [SkyHelpInlineComponent] });
+SkyHelpInlineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyHelpInlineModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyIndicatorsResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyHelpInlineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyHelpInlineComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyIndicatorsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyHelpInlineComponent],
+                }]
+        }] });
+
+/**
+ * Specifies a label to display in smaller, plain text under or beside the value.
+ * @required
+ */
+class SkyKeyInfoLabelComponent {
+}
+SkyKeyInfoLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyKeyInfoLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyKeyInfoLabelComponent, selector: "sky-key-info-label", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-key-info-label',
+                    template: '<ng-content></ng-content>',
+                }]
+        }] });
+
+/**
+ * Specifies a value to display in larger, bold text.
+ * @required
+ */
+class SkyKeyInfoValueComponent {
+}
+SkyKeyInfoValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyKeyInfoValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyKeyInfoValueComponent, selector: "sky-key-info-value", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoValueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-key-info-value',
+                    template: '<ng-content></ng-content>',
+                }]
+        }] });
+
+class SkyKeyInfoComponent {
+    constructor() {
+        /**
+         * Specifies whether to display key info in a `vertical` layout with the label under the
+         * value or in a `horizontal` layout with the label beside the value.
+         * @default "vertical"
+         */
+        this.layout = 'vertical';
+    }
+}
+SkyKeyInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { layout: "layout" }, ngImport: i0, template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <ng-content select=\"sky-key-info-label\"> </ng-content>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-key-info', template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <ng-content select=\"sky-key-info-label\"> </ng-content>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"] }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }] } });
+
+class SkyKeyInfoModule {
+}
+SkyKeyInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyKeyInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoModule, declarations: [SkyKeyInfoComponent,
+        SkyKeyInfoLabelComponent,
+        SkyKeyInfoValueComponent], imports: [CommonModule], exports: [SkyKeyInfoComponent,
+        SkyKeyInfoLabelComponent,
+        SkyKeyInfoValueComponent] });
+SkyKeyInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyKeyInfoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyKeyInfoComponent,
+                        SkyKeyInfoLabelComponent,
+                        SkyKeyInfoValueComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SkyKeyInfoComponent,
+                        SkyKeyInfoLabelComponent,
+                        SkyKeyInfoValueComponent,
+                    ],
+                }]
+        }] });
+
+class SkyLabelComponent {
+    /**
+     * The type of label to display.
+     * @required
+     */
+    set labelType(value) {
+        this._labelType = value;
+        this.updateIcon();
+    }
+    get labelType() {
+        return this._labelType || 'info';
+    }
+    updateIcon() {
+        const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.labelType);
+        this.icon = indicatorIcon.defaultThemeIcon;
+        this.baseIcon = indicatorIcon.modernThemeBaseIcon;
+        this.topIcon = indicatorIcon.modernThemeTopIcon;
+    }
+}
+SkyLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelType\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-label', template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelType\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"] }]
+        }], propDecorators: { labelType: [{
+                type: Input
+            }] } });
+
+class SkyLabelModule {
+}
+SkyLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLabelModule, declarations: [SkyLabelComponent], imports: [CommonModule, SkyIconModule], exports: [SkyLabelComponent] });
+SkyLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLabelModule, imports: [[CommonModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyLabelComponent],
+                    imports: [CommonModule, SkyIconModule],
+                    exports: [SkyLabelComponent],
+                }]
+        }] });
+
+const INDICATOR_TYPE_DEFAULT = 'warning';
+class SkyStatusIndicatorComponent {
+    constructor(changeDetector, resources) {
+        this.changeDetector = changeDetector;
+        this.resources = resources;
+    }
+    /**
+     * Specifies a style for the status indicator to determine the icon.
+     * The valid options are `danger`, `info`, `success`, and `warning`.
+     * @default "warning"
+     */
+    set indicatorType(value) {
+        this._indicatorType = value;
+        this.updateIcon();
+    }
+    get indicatorType() {
+        return this._indicatorType || INDICATOR_TYPE_DEFAULT;
+    }
+    /**
+     * Specifies the predefined text to be read by screen readers for users
+     * who cannot see the indicator icon. The valid options are `none`, `custom`,
+     * `error`, `warning`, `completed`, and `important-info`.
+     * @required
+     */
+    set descriptionType(value) {
+        this._descriptionType = value;
+        this.updateDescriptionComputed();
+    }
+    get descriptionType() {
+        return this._descriptionType;
+    }
+    /**
+     * Specifies the text to be read by screen readers for users who cannot see
+     * the indicator icon when `descriptionType` is `custom`.
+     */
+    set customDescription(value) {
+        this._customDescription = value;
+        this.updateDescriptionComputed();
+    }
+    get customDescription() {
+        return this._customDescription;
+    }
+    updateIcon() {
+        const indicatorIcon = SkyIndicatorIconUtility.getIconsForType(this.indicatorType);
+        this.icon = indicatorIcon.defaultThemeIcon;
+        this.baseIcon = indicatorIcon.modernThemeBaseIcon;
+        this.topIcon = indicatorIcon.modernThemeTopIcon;
+    }
+    updateDescriptionComputed() {
+        if (this.descriptionType) {
+            switch (this.descriptionType) {
+                case 'none':
+                    this.descriptionComputed = '';
+                    break;
+                case 'custom':
+                    this.descriptionComputed = this.customDescription;
+                    break;
+                default:
+                    this.resources
+                        .getString('skyux_status_indicator_sr_' +
+                        this.descriptionType.replace(/-/g, '_'))
+                        .subscribe((value) => {
+                        this.descriptionComputed = value;
+                        this.changeDetector.markForCheck();
+                    });
+                    break;
+            }
+        }
+        else {
+            this.descriptionComputed = undefined;
+        }
+    }
+}
+SkyStatusIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
+SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorType\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorType\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyLibResourcesService }]; }, propDecorators: { indicatorType: [{
+                type: Input
+            }], descriptionType: [{
+                type: Input
+            }], customDescription: [{
+                type: Input
+            }] } });
+
+class SkyStatusIndicatorModule {
+}
+SkyStatusIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyStatusIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyStatusIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyStatusIndicatorModule, declarations: [SkyStatusIndicatorComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyIndicatorsResourcesModule], exports: [SkyStatusIndicatorComponent] });
+SkyStatusIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyStatusIndicatorModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyIndicatorsResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyStatusIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyStatusIndicatorComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyIndicatorsResourcesModule,
+                    ],
+                    exports: [SkyStatusIndicatorComponent],
+                }]
+        }] });
+
+const className = 'sky-highlight-mark';
+// Need to add the following to classes which contain static methods.
+// See: https://github.com/ng-packagr/ng-packagr/issues/641
+// @dynamic
+/**
+ * Highlights all matching text within DOM elements that it is placed on.
+ * The directive is only valid for elements that contain content, so you
+ * cannot place it on `ng-template`, `ng-content`, or `ng-container` tags.
+ */
+class SkyTextHighlightDirective {
+    constructor(el, observerService) {
+        this.el = el;
+        this.observerService = observerService;
+        this.existingHighlight = false;
+    }
+    /**
+     * Specifies the text to highlight.
+     */
+    set skyHighlight(value) {
+        value = value || [];
+        this._skyHighlight = [];
+        if (Array.isArray(value)) {
+            this._skyHighlight = value.filter((item) => !!item);
+            // Reorder strings by their length in descending order to avoid missing matches
+            // that contain substrings of other matches.
+            this._skyHighlight.sort(function (a, b) {
+                return b.length - a.length;
+            });
+        }
+        else {
+            this._skyHighlight = [value];
+        }
+    }
+    static cleanRegex(regex) {
+        return regex.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    }
+    static markNode(node, searchTerms) {
+        /* istanbul ignore else */
+        if (searchTerms) {
+            const text = node.nodeValue;
+            for (let i = 0; i < searchTerms.length; i++) {
+                searchTerms[i] = this.cleanRegex(searchTerms[i]);
+            }
+            const searchRegex = new RegExp(searchTerms.join('|'), 'gi');
+            const match = searchRegex.exec(text);
+            if (match) {
+                // Split apart text node with mark tags in the middle on the search term.
+                const matchIndex = match.index;
+                const middle = node.splitText(matchIndex);
+                middle.splitText(searchRegex.lastIndex - matchIndex);
+                const middleClone = middle.cloneNode(true);
+                const markNode = document.createElement('mark');
+                markNode.className = className;
+                markNode.appendChild(middleClone);
+                middle.parentNode.replaceChild(markNode, middle);
+                return 1;
+            }
+        }
+        return 0;
+    }
+    static markTextNodes(node, searchTerms) {
+        if (node.nodeType === 3) {
+            return SkyTextHighlightDirective.markNode(node, searchTerms);
+        }
+        else if (node.nodeType === 1 && node.childNodes) {
+            for (let i = 0; i < node.childNodes.length; i++) {
+                const childNode = node.childNodes[i];
+                i += SkyTextHighlightDirective.markTextNodes(childNode, searchTerms);
+            }
+        }
+        return 0;
+    }
+    static removeHighlight(el) {
+        const matchedElements = el.nativeElement.querySelectorAll(`mark.${className}`);
+        /* istanbul ignore else */
+        /* sanity check */
+        if (matchedElements) {
+            for (let i = 0; i < matchedElements.length; i++) {
+                const node = matchedElements[i];
+                const parentNode = node.parentNode;
+                parentNode.replaceChild(node.firstChild, node);
+                parentNode.normalize();
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.skyHighlight && !changes.skyHighlight.firstChange) {
+            this.highlight();
+        }
+    }
+    ngAfterViewInit() {
+        this.observer = this.observerService.create(() => {
+            this.highlight();
+        });
+        this.observeDom();
+        if (this._skyHighlight && this._skyHighlight.length > 0) {
+            this.highlight();
+        }
+    }
+    ngOnDestroy() {
+        /* istanbul ignore else */
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    readyForHighlight(searchText) {
+        return searchText && searchText.length > 0 && this.el.nativeElement;
+    }
+    highlight() {
+        /* istanbul ignore else */
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        const searchText = this._skyHighlight;
+        if (this.existingHighlight) {
+            SkyTextHighlightDirective.removeHighlight(this.el);
+        }
+        /* istanbul ignore else */
+        if (this.readyForHighlight(searchText)) {
+            const node = this.el.nativeElement;
+            // mark all matched text in the DOM
+            SkyTextHighlightDirective.markTextNodes(node, searchText);
+            this.existingHighlight = true;
+        }
+        this.observeDom();
+    }
+    observeDom() {
+        /* istanbul ignore else */
+        if (this.observer) {
+            const config = {
+                attributes: false,
+                childList: true,
+                characterData: true,
+            };
+            this.observer.observe(this.el.nativeElement, config);
+        }
+    }
+}
+SkyTextHighlightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.MutationObserverService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyTextHighlightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: { skyHighlight: "skyHighlight" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextHighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyHighlight]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.MutationObserverService }]; }, propDecorators: { skyHighlight: [{
+                type: Input
+            }] } });
+
+class SkyTextHighlightModule {
+}
+SkyTextHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextHighlightModule, declarations: [SkyTextHighlightDirective], exports: [SkyTextHighlightDirective] });
+SkyTextHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextHighlightModule, providers: [MutationObserverService] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextHighlightModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTextHighlightDirective],
+                    exports: [SkyTextHighlightDirective],
+                    providers: [MutationObserverService],
+                }]
+        }] });
+
+class SkyTokenComponent {
+    constructor(elementRef, resourcesService) {
+        this.elementRef = elementRef;
+        this.resourcesService = resourcesService;
+        /**
+         * Fires when users click the close button or press the `Backspace` key to dismiss the token.
+         */
+        this.dismiss = new EventEmitter();
+        /**
+         * Fires when users place focus on the token by navigating to it with the `Tab` key.
+         */
+        this.tokenFocus = new EventEmitter();
+    }
+    /**
+     * Indicates whether to disable the token to prevent users from selecting it, dismissing it,
+     * or navigating to it with the arrow keys. When the token is disabled,
+     * users can still place focus on it using the `Tab` key.
+     * @default true
+     */
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return !!this._disabled;
+    }
+    /**
+     * Specifies an ARIA label for the token's close button. This sets the button's `aria-label`
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
+     * @default "Remove item"
+     */
+    set ariaLabel(value) {
+        this._ariaLabel = value;
+    }
+    get ariaLabel() {
+        return (this._ariaLabel || this.getString('skyux_tokens_dismiss_button_title'));
+    }
+    /**
+     * Indicates whether users can remove the token from the list by selecting the close button
+     * or pressing the `Backspace` key.
+     * @default true
+     */
+    set dismissible(value) {
+        this._dismissible = value;
+    }
+    get dismissible() {
+        return this._dismissible !== false;
+    }
+    /**
+     * Indicates whether users can press the `Tab` key to place focus on the token. This does not
+     * affect the ability to select the token, dismiss it, or navigate to it with the arrow keys.
+     * @default true
+     */
+    set focusable(value) {
+        this._focusable = value;
+    }
+    get focusable() {
+        return this._focusable !== false;
+    }
+    /**
+     * @internal
+     */
+    get tabIndex() {
+        return this.focusable ? 0 : -1;
+    }
+    dismissToken(event) {
+        event.stopPropagation();
+        this.dismiss.emit();
+    }
+    focusElement() {
+        this.elementRef.nativeElement.querySelector('.sky-token').focus();
+    }
+    setTokenActive(tokenActive) {
+        this.tokenActive = tokenActive;
+    }
+    setCloseActive(closeActive) {
+        this.closeActive = closeActive;
+    }
+    getString(key) {
+        // TODO: Need to implement the async `getString` method in a breaking change.
+        return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
+    }
+}
+SkyTokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokenComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, template: "<div\n  class=\"sky-token sky-btn sky-btn-default\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disabled\"\n  [attr.tabindex]=\"tabIndex\"\n  [ngClass]=\"{\n    'sky-btn-disabled': disabled,\n    'sky-token-dismissable': dismissible,\n    'sky-token-active': tokenActive && !closeActive\n  }\"\n  (document:mouseup)=\"setTokenActive(false)\"\n  (focus)=\"tokenFocus.emit()\"\n  (mousedown)=\"setTokenActive(true)\"\n>\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"dismissible\"\n    class=\"sky-btn sky-token-btn-close\"\n    type=\"button\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.tabindex]=\"tabIndex\"\n    [attr.title]=\"ariaLabel\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-token-btn-close-active': closeActive\n    }\"\n    (click)=\"dismissToken($event)\"\n    (document:mouseup)=\"setCloseActive(false)\"\n    (mousedown)=\"setCloseActive(true)\"\n  >\n    <sky-icon class=\"sky-token-btn-close-icon-default\" icon=\"times\"></sky-icon>\n    <sky-icon\n      class=\"sky-token-btn-close-icon-modern\"\n      icon=\"close\"\n      iconType=\"skyux\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;overflow:hidden;padding:2px 8px;display:inline-block;-webkit-user-select:none;user-select:none}.sky-token:hover,.sky-token:focus{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token:focus{box-shadow:0 0 8px #00b4f199;border:1px solid #00b4f1;outline:none}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn-close{background:transparent;padding:0;border:0;margin-left:2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus{opacity:1}.sky-token-btn-close-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}:host-context(.sky-theme-modern) .sky-token.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissable{padding-right:1px}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token:focus,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}.sky-theme-modern .sky-token.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}.sky-theme-modern .sky-token.sky-token-dismissable{padding-right:1px}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token:focus,.sky-theme-modern .sky-token:hover{background-color:#c1e8fb}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}.sky-theme-modern .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus{outline:none}.sky-theme-modern .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-token', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.SkyLibResourcesService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], focusable: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], tokenFocus: [{
+                type: Output
+            }] } });
+
+var SkyTokensMessageType;
+(function (SkyTokensMessageType) {
+    /**
+     * Places focus on the last token in the list.
+     */
+    SkyTokensMessageType[SkyTokensMessageType["FocusLastToken"] = 0] = "FocusLastToken";
+    /**
+     * Places focus on the token that is currently selected.
+     */
+    SkyTokensMessageType[SkyTokensMessageType["FocusActiveToken"] = 1] = "FocusActiveToken";
+    /**
+     * Places focus on the token before the currently selected token.
+     */
+    SkyTokensMessageType[SkyTokensMessageType["FocusPreviousToken"] = 2] = "FocusPreviousToken";
+    /**
+     * Places focus on the token after the currently selected token.
+     */
+    SkyTokensMessageType[SkyTokensMessageType["FocusNextToken"] = 3] = "FocusNextToken";
+    /**
+     * Removes the token that is currently selected from the list of tokens.
+     */
+    SkyTokensMessageType[SkyTokensMessageType["RemoveActiveToken"] = 4] = "RemoveActiveToken";
+})(SkyTokensMessageType || (SkyTokensMessageType = {}));
+
+class SkyTokensComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        /**
+         * Fires when users navigate through the tokens list with the `Tab` key
+         * and attempt to move past the final token in the list.
+         */
+        this.focusIndexOverRange = new EventEmitter();
+        /**
+         * Fires when usersnavigate through the tokens list with the `Tab` key
+         * and attempt to move before the first token in the list.
+         */
+        this.focusIndexUnderRange = new EventEmitter();
+        /**
+         * Fires when users select a token in the list. This event emits the selected token.
+         */
+        this.tokenSelected = new EventEmitter();
+        /**
+         * Fires when the tokens in the list change.
+         * This event emits an array of the tokens in the updated list.
+         */
+        this.tokensChange = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+        // Angular calls the trackBy function without applying the component instance's scope.
+        // Use a fat-arrow function so the current component instance's trackWith property can
+        // be referenced.
+        this.trackTokenFn = (_index, item) => {
+            if (this.trackWith) {
+                return item.value[this.trackWith];
+            }
+            return item;
+        };
+    }
+    /**
+     * Indicates whether to disable the tokens list to prevent users from selecting tokens,
+     * dismissing tokens, or navigating through the list with the arrow keys. When the tokens list
+     * is disabled, users can still place focus on items in the list using the `Tab` key.
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return !!this._disabled;
+    }
+    /**
+     * Indicates whether users can remove tokens from the list by selecting their close buttons
+     * or pressing the `Backspace` key.
+     * @default true
+     */
+    set dismissible(value) {
+        this._dismissible = value;
+    }
+    get dismissible() {
+        return this._dismissible !== false;
+    }
+    /**
+     * Specifies the token property to display for each item in the tokens list.
+     * @default "name"
+     */
+    set displayWith(value) {
+        this._displayWith = value;
+    }
+    get displayWith() {
+        return this._displayWith || 'name';
+    }
+    /**
+     * Indicates whether users can focus on items in the list using the `Tab` key.
+     * This does not affect the ability of users to select tokens, dismiss tokens,
+     * or navigate through the list with the arrow keys.
+     * @default true
+     */
+    set focusable(value) {
+        this._focusable = value;
+    }
+    get focusable() {
+        return this._focusable !== false;
+    }
+    /**
+     * Specifies an array of tokens to include in the list.
+     */
+    set tokens(value) {
+        this._tokens = value;
+        this.tokensChange.emit(this._tokens);
+    }
+    get tokens() {
+        return this._tokens || [];
+    }
+    /**
+     * Specifies an observable of `SkyTokensMessage` that can place focus on a
+     * particular token or remove the active token from the list.
+     */
+    set messageStream(value) {
+        this._messageStream = value;
+        this.initMessageStream();
+    }
+    get messageStream() {
+        return this._messageStream;
+    }
+    /**
+     * @internal
+     */
+    get activeIndex() {
+        return this._activeIndex || 0;
+    }
+    set activeIndex(value) {
+        if (value >= this.tokens.length) {
+            value = this.tokens.length - 1;
+            this.focusIndexOverRange.emit();
+        }
+        if (value < 0) {
+            value = 0;
+            this.focusIndexUnderRange.emit();
+        }
+        this._activeIndex = value;
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onTokenClick(token) {
+        if (this.disabled) {
+            return;
+        }
+        this.notifyTokenSelected(token);
+    }
+    onTokenKeyDown(event) {
+        if (!this.disabled) {
+            /* tslint:disable-next-line:switch-default */
+            switch (event.key) {
+                case 'Left':
+                case 'ArrowLeft':
+                    this.messageStream.next({
+                        type: SkyTokensMessageType.FocusPreviousToken,
+                    });
+                    event.preventDefault();
+                    break;
+                case 'Right':
+                case 'ArrowRight':
+                    this.messageStream.next({
+                        type: SkyTokensMessageType.FocusNextToken,
+                    });
+                    event.preventDefault();
+                    break;
+            }
+        }
+    }
+    selectToken(token) {
+        if (!this.disabled) {
+            this.notifyTokenSelected(token);
+        }
+    }
+    removeToken(token) {
+        this.tokens = this.tokens.filter((t) => t !== token);
+        this.changeDetector.detectChanges();
+    }
+    focusPreviousToken() {
+        this.activeIndex--;
+        this.focusActiveToken();
+    }
+    focusNextToken() {
+        this.activeIndex++;
+        this.focusActiveToken();
+    }
+    focusLastToken() {
+        this.activeIndex = this.tokenComponents.length - 1;
+        this.focusActiveToken();
+    }
+    focusActiveToken() {
+        const tokenComponent = this.tokenComponents.find((_comp, i) => {
+            return this.activeIndex === i;
+        });
+        if (tokenComponent) {
+            tokenComponent.focusElement();
+        }
+    }
+    removeActiveToken() {
+        const token = this.tokens[this.activeIndex];
+        if (token) {
+            this.removeToken(token);
+        }
+    }
+    initMessageStream() {
+        if (this.messageStreamSub) {
+            this.messageStreamSub.unsubscribe();
+        }
+        if (this.messageStream) {
+            this.messageStreamSub = this.messageStream
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((message) => {
+                /* tslint:disable-next-line:switch-default */
+                switch (message.type) {
+                    case SkyTokensMessageType.FocusLastToken:
+                        this.focusLastToken();
+                        break;
+                    case SkyTokensMessageType.FocusActiveToken:
+                        this.focusActiveToken();
+                        break;
+                    case SkyTokensMessageType.FocusPreviousToken:
+                        this.focusPreviousToken();
+                        break;
+                    case SkyTokensMessageType.FocusNextToken:
+                        this.focusNextToken();
+                        break;
+                    case SkyTokensMessageType.RemoveActiveToken:
+                        this.removeActiveToken();
+                        break;
+                }
+            });
+        }
+    }
+    notifyTokenSelected(token) {
+        this.tokenSelected.emit({
+            token,
+        });
+    }
+}
+SkyTokensComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokensComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyTokensComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTokensComponent, selector: "sky-tokens", inputs: { disabled: "disabled", dismissible: "dismissible", displayWith: "displayWith", trackWith: "trackWith", focusable: "focusable", tokens: "tokens", messageStream: "messageStream" }, outputs: { focusIndexOverRange: "focusIndexOverRange", focusIndexUnderRange: "focusIndexUnderRange", tokenSelected: "tokenSelected", tokensChange: "tokensChange" }, viewQueries: [{ propertyName: "tokenComponents", predicate: SkyTokenComponent, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"tokens\"\n  class=\"sky-tokens\"\n  [@blockAnimationOnLoad]\n  [attr.role]=\"tokens && tokens.length ? 'list' : null\"\n>\n  <sky-token\n    *ngFor=\"let token of tokens; let i = index; trackBy: trackTokenFn\"\n    role=\"listitem\"\n    [@.disabled]=\"!trackWith\"\n    [@dismiss]\n    [disabled]=\"disabled\"\n    [dismissible]=\"dismissible\"\n    [focusable]=\"focusable\"\n    (dismiss)=\"removeToken(token)\"\n    (click)=\"onTokenClick(token)\"\n    (keydown)=\"onTokenKeyDown($event)\"\n    (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n    (tokenFocus)=\"activeIndex = i\"\n  >\n    {{ token.value[displayWith] }}\n  </sky-token>\n  <div class=\"sky-tokens-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"], components: [{ type: SkyTokenComponent, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable"], outputs: ["dismiss", "tokenFocus"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+        trigger('blockAnimationOnLoad', [transition(':enter', [])]),
+        trigger('dismiss', [
+            transition(':enter', [
+                style({
+                    opacity: 0,
+                    width: 0,
+                }),
+                animate('150ms ease-in', style({
+                    opacity: 1,
+                    width: '*',
+                })),
+            ]),
+            transition(':leave', [
+                animate('150ms ease-in', style({
+                    opacity: 0,
+                    width: 0,
+                })),
+            ]),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokensComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tokens', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('blockAnimationOnLoad', [transition(':enter', [])]),
+                        trigger('dismiss', [
+                            transition(':enter', [
+                                style({
+                                    opacity: 0,
+                                    width: 0,
+                                }),
+                                animate('150ms ease-in', style({
+                                    opacity: 1,
+                                    width: '*',
+                                })),
+                            ]),
+                            transition(':leave', [
+                                animate('150ms ease-in', style({
+                                    opacity: 0,
+                                    width: 0,
+                                })),
+                            ]),
+                        ]),
+                    ], template: "<div\n  *ngIf=\"tokens\"\n  class=\"sky-tokens\"\n  [@blockAnimationOnLoad]\n  [attr.role]=\"tokens && tokens.length ? 'list' : null\"\n>\n  <sky-token\n    *ngFor=\"let token of tokens; let i = index; trackBy: trackTokenFn\"\n    role=\"listitem\"\n    [@.disabled]=\"!trackWith\"\n    [@dismiss]\n    [disabled]=\"disabled\"\n    [dismissible]=\"dismissible\"\n    [focusable]=\"focusable\"\n    (dismiss)=\"removeToken(token)\"\n    (click)=\"onTokenClick(token)\"\n    (keydown)=\"onTokenKeyDown($event)\"\n    (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n    (tokenFocus)=\"activeIndex = i\"\n  >\n    {{ token.value[displayWith] }}\n  </sky-token>\n  <div class=\"sky-tokens-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], displayWith: [{
+                type: Input
+            }], trackWith: [{
+                type: Input
+            }], focusable: [{
+                type: Input
+            }], tokens: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], focusIndexOverRange: [{
+                type: Output
+            }], focusIndexUnderRange: [{
+                type: Output
+            }], tokenSelected: [{
+                type: Output
+            }], tokensChange: [{
+                type: Output
+            }], tokenComponents: [{
+                type: ViewChildren,
+                args: [SkyTokenComponent]
+            }] } });
+
+class SkyTokensModule {
+}
+SkyTokensModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokensModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTokensModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokensModule, declarations: [SkyTokenComponent, SkyTokensComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyIndicatorsResourcesModule], exports: [SkyTokenComponent, SkyTokensComponent] });
+SkyTokensModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokensModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyIndicatorsResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTokensModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTokenComponent, SkyTokensComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyIndicatorsResourcesModule,
+                    ],
+                    exports: [SkyTokenComponent, SkyTokensComponent],
+                }]
+        }] });
+
+// Need to add the following to classes which contain static methods.
+// See: https://github.com/ng-packagr/ng-packagr/issues/641
+/**
+ * @internal
+ * @dynamic
+ */
+class SkyWaitAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    ngOnDestroy() {
+        this.clearListeners();
+    }
+    setWaitBounds(waitEl) {
+        this.renderer.setStyle(waitEl.nativeElement.parentElement, 'position', 'relative');
+    }
+    removeWaitBounds(waitEl) {
+        this.renderer.removeStyle(waitEl.nativeElement.parentElement, 'position');
+    }
+    setBusyState(waitEl, isFullPage, isWaiting, isNonBlocking = false, waitComponentId) {
+        const busyEl = isFullPage
+            ? document.body
+            : waitEl.nativeElement.parentElement;
+        if (!isNonBlocking) {
+            if (isWaiting) {
+                this.renderer.setAttribute(busyEl, 'aria-busy', 'true');
+                // Remove focus from page when full page blocking wait
+                if (isFullPage || busyEl.contains(document.activeElement)) {
+                    this.clearDocumentFocus();
+                }
+                if (isFullPage) {
+                    SkyWaitAdapterService.isPageWaitActive = true;
+                    const endListenerFunc = this.renderer.listen(document.body, 'keydown', (event) => {
+                        /*istanbul ignore else */
+                        if (event.key) {
+                            /* istanbul ignore else */
+                            if (event.key.toLowerCase() === 'tab') {
+                                event.target.blur();
+                                event.preventDefault();
+                                event.stopPropagation();
+                                event.stopImmediatePropagation();
+                                this.clearDocumentFocus();
+                            }
+                        }
+                    });
+                    SkyWaitAdapterService.busyElements[waitComponentId] = {
+                        listener: endListenerFunc,
+                        busyEl: undefined,
+                    };
+                }
+                else {
+                    const endListenerFunc = this.renderer.listen(busyEl, 'focusin', (event) => {
+                        /* istanbul ignore else */
+                        if (!isNonBlocking) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            event.stopImmediatePropagation();
+                            if (SkyWaitAdapterService.isPageWaitActive) {
+                                this.clearDocumentFocus();
+                            }
+                            else {
+                                // Propagate tab navigation if attempted into waited element
+                                const target = event.target;
+                                target.blur();
+                                this.focusNextElement(target, this.isShift(event), busyEl);
+                            }
+                        }
+                    });
+                    SkyWaitAdapterService.busyElements[waitComponentId] = {
+                        listener: endListenerFunc,
+                        busyEl: busyEl,
+                    };
+                }
+            }
+            else {
+                this.renderer.removeAttribute(busyEl, 'aria-busy');
+                if (isFullPage) {
+                    SkyWaitAdapterService.isPageWaitActive = false;
+                }
+                if (waitComponentId in SkyWaitAdapterService.busyElements) {
+                    SkyWaitAdapterService.busyElements[waitComponentId].listener();
+                    delete SkyWaitAdapterService.busyElements[waitComponentId];
+                }
+            }
+        }
+    }
+    focusNextElement(targetElement, shiftKey, busyEl) {
+        const focussable = this.getFocussableElements();
+        // If shift tab, go in the other direction
+        const modifier = shiftKey ? -1 : 1;
+        // Find the next navigable element that isn't waiting
+        const startingIndex = focussable.indexOf(targetElement);
+        let curIndex = startingIndex + modifier;
+        while (focussable[curIndex] &&
+            this.isElementBusyOrHidden(focussable[curIndex])) {
+            curIndex += modifier;
+        }
+        if (focussable[curIndex] &&
+            !this.isElementBusyOrHidden(focussable[curIndex])) {
+            focussable[curIndex].focus();
+        }
+        else {
+            // Try wrapping the navigation
+            /* istanbul ignore next */
+            /* sanity check */
+            curIndex = modifier > 0 ? 0 : focussable.length - 1;
+            while (curIndex !== startingIndex &&
+                focussable[curIndex] &&
+                this.isElementBusyOrHidden(focussable[curIndex])) {
+                /* istanbul ignore next */
+                /* sanity check */
+                curIndex += modifier;
+            }
+            /* istanbul ignore else */
+            /* sanity check */
+            if (focussable[curIndex] &&
+                !this.isElementBusyOrHidden(focussable[curIndex])) {
+                focussable[curIndex].focus();
+            }
+            else {
+                // No valid target, wipe focus
+                this.clearDocumentFocus();
+            }
+        }
+        // clear focussableElements list
+        this.focussableElements = undefined;
+    }
+    isShift(event) {
+        // Determine if shift+tab was used based on element order
+        const elements = this.getFocussableElements().filter((elem) => !this.isElementHidden(elem));
+        const previousInd = elements.indexOf(event.relatedTarget);
+        const currentInd = elements.indexOf(event.target);
+        return (previousInd === currentInd + 1 ||
+            (previousInd === 0 && currentInd === elements.length - 1) ||
+            previousInd > currentInd ||
+            !event.relatedTarget);
+    }
+    isElementHidden(element) {
+        const style = window.getComputedStyle(element);
+        return style.display === 'none' || style.visibility === 'hidden';
+    }
+    isElementBusyOrHidden(element) {
+        if (this.isElementHidden(element)) {
+            return true;
+        }
+        for (const key of Object.keys(SkyWaitAdapterService.busyElements)) {
+            const parentElement = SkyWaitAdapterService.busyElements[key].busyEl;
+            if (parentElement && parentElement.contains(element)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    clearDocumentFocus() {
+        /* istanbul ignore else */
+        if (document.activeElement && document.activeElement.blur) {
+            document.activeElement.blur();
+        }
+        document.body.focus();
+    }
+    getFocussableElements() {
+        // Keep this cached so we can reduce querys
+        if (this.focussableElements) {
+            return this.focussableElements;
+        }
+        // Select all possible focussable elements
+        const focussableElements = 'a[href], ' +
+            'area[href], ' +
+            "input:not([disabled]):not([tabindex='-1']), " +
+            "button:not([disabled]):not([tabindex='-1']), " +
+            "select:not([disabled]):not([tabindex='-1']), " +
+            "textarea:not([disabled]):not([tabindex='-1']), " +
+            'iframe, object, embed, ' +
+            "*[tabindex]:not([tabindex='-1']), " +
+            '*[contenteditable=true]';
+        this.focussableElements = Array.prototype.filter.call(document.body.querySelectorAll(focussableElements), (element) => {
+            return (element.offsetWidth > 0 ||
+                element.offsetHeight > 0 ||
+                element === document.activeElement);
+        });
+        return this.focussableElements;
+    }
+    clearListeners() {
+        SkyWaitAdapterService.isPageWaitActive = false;
+        for (const key of Object.keys(SkyWaitAdapterService.busyElements)) {
+            SkyWaitAdapterService.busyElements[key].listener();
+            delete SkyWaitAdapterService.busyElements[key];
+        }
+    }
+}
+SkyWaitAdapterService.isPageWaitActive = false;
+SkyWaitAdapterService.busyElements = {};
+SkyWaitAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyWaitAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+let nextId = 0;
+class SkyWaitComponent {
+    constructor(elRef, adapterService, resourceService) {
+        this.elRef = elRef;
+        this.adapterService = adapterService;
+        this.resourceService = resourceService;
+        this.ariaLabelStream = new BehaviorSubject('');
+        this.id = `sky-wait-${++nextId}`;
+    }
+    /**
+     * When set to `true`, wait indication appears on the parent element of the `sky-wait` component.
+     */
+    set isWaiting(value) {
+        if (value && !this._isFullPage) {
+            this.adapterService.setWaitBounds(this.elRef);
+        }
+        else if (!value && !this._isFullPage) {
+            this.adapterService.removeWaitBounds(this.elRef);
+        }
+        this.adapterService.setBusyState(this.elRef, this.isFullPage, value, this.isNonBlocking, this.id);
+        this._isWaiting = value;
+    }
+    get isWaiting() {
+        return this._isWaiting;
+    }
+    /**
+     * When set to `true`, wait indication appears on the page level instead of the
+     * parent element level. We recommend that you use the `beginBlockingPageWait` or
+     * `beginNonBlockingPageWait` functions of the `SkyWaitService` instead of setting this
+     * on the component level.
+     * @default false
+     */
+    set isFullPage(value) {
+        /* istanbul ignore else: untestable */
+        if (value) {
+            this.adapterService.removeWaitBounds(this.elRef);
+        }
+        else if (!value && this._isWaiting) {
+            this.adapterService.setWaitBounds(this.elRef);
+        }
+        this._isFullPage = value;
+    }
+    get isFullPage() {
+        return this._isFullPage;
+    }
+    ngOnInit() {
+        this.publishAriaLabel();
+    }
+    publishAriaLabel() {
+        if (this.ariaLabel) {
+            this.ariaLabelStream.next(this.ariaLabel);
+            return;
+        }
+        /* istanbul ignore else */
+        if (this.resourceService) {
+            const type = this.isFullPage ? '_page' : '';
+            const blocking = this.isNonBlocking ? '' : '_blocking';
+            const key = `skyux_wait${type}${blocking}_aria_alt_text`;
+            this.resourceService.getString(key).subscribe((value) => {
+                this.ariaLabelStream.next(value);
+            });
+        }
+    }
+}
+SkyWaitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitComponent, deps: [{ token: i0.ElementRef }, { token: SkyWaitAdapterService }, { token: i1$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyWaitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyWaitComponent, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div class=\"sky-wait-container\">\n  <div\n    *ngIf=\"isWaiting\"\n    class=\"sky-wait-mask\"\n    [attr.aria-label]=\"ariaLabelStream | async\"\n    [ngClass]=\"{\n      'sky-wait-mask-loading-fixed': isFullPage,\n      'sky-wait-mask-loading-non-blocking': isNonBlocking,\n      'sky-wait-mask-loading-blocking': !isNonBlocking\n    }\"\n  >\n    <div class=\"sky-wait\">\n      <div class=\"sky-wait-double-bounce1\"></div>\n      <div class=\"sky-wait-double-bounce2\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;top:0;right:0;left:0;bottom:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{top:auto;right:auto;bottom:0;left:0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitComponent, decorators: [{
+            type: Component,
+            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;top:0;right:0;left:0;bottom:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{top:auto;right:auto;bottom:0;left:0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: SkyWaitAdapterService }, { type: i1$1.SkyLibResourcesService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { ariaLabel: [{
+                type: Input
+            }], isWaiting: [{
+                type: Input
+            }], isFullPage: [{
+                type: Input
+            }], isNonBlocking: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyWaitPageComponent {
+}
+SkyWaitPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyWaitPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyWaitPageComponent, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n  <sky-wait\n    [isFullPage]=\"true\"\n    [isNonBlocking]=\"true\"\n    [isWaiting]=\"hasNonBlockingWait\"\n  >\n  </sky-wait>\n  <sky-wait [isFullPage]=\"true\" [isWaiting]=\"hasBlockingWait\"> </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], components: [{ type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-wait-page', template: "<div class=\"sky-wait-page\">\n  <sky-wait\n    [isFullPage]=\"true\"\n    [isNonBlocking]=\"true\"\n    [isWaiting]=\"hasNonBlockingWait\"\n  >\n  </sky-wait>\n  <sky-wait [isFullPage]=\"true\" [isWaiting]=\"hasBlockingWait\"> </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"] }]
+        }], propDecorators: { hasBlockingWait: [{
+                type: Input
+            }], hasNonBlockingWait: [{
+                type: Input
+            }] } });
+
+class SkyWaitModule {
+}
+SkyWaitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyWaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitModule, declarations: [SkyWaitComponent, SkyWaitPageComponent], imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule], exports: [SkyWaitComponent] });
+SkyWaitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitModule, imports: [[CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyWaitComponent, SkyWaitPageComponent],
+                    imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule],
+                    exports: [SkyWaitComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyWaitPageAdapterService {
+    addPageWaitEl() {
+        document.body.appendChild(document.createElement('sky-wait-page'));
+    }
+    removePageWaitEl() {
+        const waitEl = document.querySelector('sky-wait-page');
+        if (waitEl) {
+            document.body.removeChild(waitEl);
+        }
+    }
+}
+SkyWaitPageAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitPageAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyWaitPageAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitPageAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitPageAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// Need to add the following to classes which contain static methods.
+// See: https://github.com/ng-packagr/ng-packagr/issues/641
+// @dynamic
+class SkyWaitService {
+    constructor(resolver, appRef, waitAdapter, windowSvc) {
+        this.resolver = resolver;
+        this.appRef = appRef;
+        this.waitAdapter = waitAdapter;
+        this.windowSvc = windowSvc;
+    }
+    /**
+     * Starts a blocking page wait on the page.
+     */
+    beginBlockingPageWait() {
+        this.beginPageWait(true);
+    }
+    /**
+     * Starts a non-blocking page wait on the page.
+     */
+    beginNonBlockingPageWait() {
+        this.beginPageWait(false);
+    }
+    /**
+     * Ends a blocking page wait on the page. Blocking page wait indication
+     * is removed when all running blocking page waits are ended.
+     */
+    endBlockingPageWait() {
+        this.endPageWait(true);
+    }
+    /**
+     * Ends a non-blocking page wait on the page. Non-blocking page wait indication
+     * is removed when all running non-blocking page waits are ended.
+     */
+    endNonBlockingPageWait() {
+        this.endPageWait(false);
+    }
+    /**
+     * Clears all blocking and non-blocking page waits on the page.
+     */
+    clearAllPageWaits() {
+        this.clearPageWait(true);
+        this.clearPageWait(false);
+    }
+    /**
+     * @internal
+     */
+    dispose() {
+        if (SkyWaitService.waitComponent) {
+            SkyWaitService.waitComponent = undefined;
+            SkyWaitService.pageWaitBlockingCount = 0;
+            SkyWaitService.pageWaitNonBlockingCount = 0;
+            this.waitAdapter.removePageWaitEl();
+        }
+    }
+    /**
+     * Launches a page wait and automatically stops when the specific asynchronous event completes.
+     */
+    blockingWrap(observable) {
+        return defer(() => {
+            this.beginBlockingPageWait();
+            return observable.pipe(finalize(() => this.endBlockingPageWait()));
+        });
+    }
+    /**
+     * Launches a non-blocking page wait and automatically stops when the specific
+     * asynchronous event completes.
+     */
+    nonBlockingWrap(observable) {
+        return defer(() => {
+            this.beginNonBlockingPageWait();
+            return observable.pipe(finalize(() => this.endNonBlockingPageWait()));
+        });
+    }
+    setWaitComponentProperties(isBlocking) {
+        if (isBlocking) {
+            SkyWaitService.waitComponent.hasBlockingWait = true;
+            SkyWaitService.pageWaitBlockingCount++;
+        }
+        else {
+            SkyWaitService.waitComponent.hasNonBlockingWait = true;
+            SkyWaitService.pageWaitNonBlockingCount++;
+        }
+    }
+    beginPageWait(isBlocking) {
+        if (!SkyWaitService.waitComponent) {
+            /*
+                Dynamic component creation needs to be done in a timeout to prevent ApplicationRef from
+                crashing when wait service is called in Angular lifecycle functions.
+            */
+            this.windowSvc.nativeWindow.setTimeout(() => {
+                // Ensuring here that we recheck this after the setTimeout is over so that we don't clash
+                // with any other waits that are created.
+                if (!SkyWaitService.waitComponent) {
+                    const factory = this.resolver.resolveComponentFactory(SkyWaitPageComponent);
+                    this.waitAdapter.addPageWaitEl();
+                    const cmpRef = this.appRef.bootstrap(factory);
+                    SkyWaitService.waitComponent = cmpRef.instance;
+                }
+                this.setWaitComponentProperties(isBlocking);
+            });
+        }
+        else {
+            this.setWaitComponentProperties(isBlocking);
+        }
+    }
+    endPageWait(isBlocking) {
+        /*
+            Needs to yield so that wait creation can finish
+            before it is dismissed in the event of a race.
+        */
+        this.windowSvc.nativeWindow.setTimeout(() => {
+            if (SkyWaitService.waitComponent) {
+                if (isBlocking) {
+                    if (SkyWaitService.pageWaitBlockingCount > 0) {
+                        SkyWaitService.pageWaitBlockingCount--;
+                    }
+                    if (SkyWaitService.pageWaitBlockingCount < 1) {
+                        SkyWaitService.waitComponent.hasBlockingWait = false;
+                    }
+                }
+                else {
+                    if (SkyWaitService.pageWaitNonBlockingCount > 0) {
+                        SkyWaitService.pageWaitNonBlockingCount--;
+                    }
+                    if (SkyWaitService.pageWaitNonBlockingCount < 1) {
+                        SkyWaitService.waitComponent.hasNonBlockingWait = false;
+                    }
+                }
+            }
+        });
+    }
+    clearPageWait(isBlocking) {
+        if (SkyWaitService.waitComponent) {
+            if (isBlocking) {
+                SkyWaitService.pageWaitBlockingCount = 0;
+                SkyWaitService.waitComponent.hasBlockingWait = false;
+            }
+            else {
+                SkyWaitService.pageWaitNonBlockingCount = 0;
+                SkyWaitService.waitComponent.hasNonBlockingWait = false;
+            }
+        }
+    }
+}
+SkyWaitService.pageWaitBlockingCount = 0;
+SkyWaitService.pageWaitNonBlockingCount = 0;
+SkyWaitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: SkyWaitPageAdapterService }, { token: i1$2.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyWaitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyWaitService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: SkyWaitPageAdapterService }, { type: i1$2.SkyAppWindowRef }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyAlertModule, SkyChevronModule, SkyExpansionIndicatorModule, SkyHelpInlineModule, SkyIconModule, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as λ1, SkyStatusIndicatorComponent as λ10, SkyTextHighlightDirective as λ11, SkyTokenComponent as λ12, SkyTokensComponent as λ13, SkyWaitComponent as λ14, SkyExpansionIndicatorComponent as λ15, SkyChevronComponent as λ2, SkyHelpInlineComponent as λ3, SkyIconComponent as λ4, SkyIconStackComponent as λ5, SkyKeyInfoLabelComponent as λ6, SkyKeyInfoValueComponent as λ7, SkyKeyInfoComponent as λ8, SkyLabelComponent as λ9 };
+//# sourceMappingURL=skyux-indicators.mjs.map