@skyux/forms 5.6.2 → 6.0.0-beta.0

package/bundles/skyux-forms.umd.js

@@ -1,3422 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@skyux/i18n'), require('@skyux/indicators'), require('rxjs'), require('@skyux/theme'), require('rxjs/operators'), require('@skyux/core')) :
-    typeof define === 'function' && define.amd ? define('@skyux/forms', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@skyux/i18n', '@skyux/indicators', 'rxjs', '@skyux/theme', 'rxjs/operators', '@skyux/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.forms = {}), global.ng.common, global.ng.core, global.ng.forms, global.i2, global.i2$1, global.rxjs, global.i1$1, global.rxjs.operators, global.i2$2));
-})(this, (function (exports, i1, i0, i4, i2, i2$1, rxjs, i1$1, operators, i2$2) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
-
-    /**
-     * NOTICE: DO NOT MODIFY THIS FILE!
-     * The contents of this file were automatically generated by
-     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-forms' schematic.
-     * To update this file, simply rerun the command.
-     */
-    var RESOURCES = {
-        'EN-US': {
-            skyux_character_count_message: { message: 'characters out of' },
-            skyux_character_count_over_limit: {
-                message: 'You are over the character limit.',
-            },
-            skyux_file_attachment_button_label_choose_file: { message: 'Choose file' },
-            skyux_file_attachment_button_label_replace_file: {
-                message: 'Replace file',
-            },
-            skyux_file_attachment_file_item_delete: { message: 'Delete file' },
-            skyux_file_attachment_file_size_b_plural: { message: '{0} bytes' },
-            skyux_file_attachment_file_size_b_singular: { message: '{0} byte' },
-            skyux_file_attachment_file_size_gb: { message: '{0} GB' },
-            skyux_file_attachment_file_size_kb: { message: '{0} KB' },
-            skyux_file_attachment_file_size_mb: { message: '{0} MB' },
-            skyux_file_attachment_file_upload_drag_file_here: {
-                message: 'Drag a file here',
-            },
-            skyux_file_attachment_file_upload_drag_or_click: {
-                message: 'Drag a file here or click to browse',
-            },
-            skyux_file_attachment_file_upload_drop_files_here: {
-                message: 'Drop files here',
-            },
-            skyux_file_attachment_file_upload_image_preview_alt_text: {
-                message: 'Image preview',
-            },
-            skyux_file_attachment_file_upload_invalid_file: {
-                message: 'This file type is invalid',
-            },
-            skyux_file_attachment_file_upload_link_input: {
-                message: 'Add a link to a file',
-            },
-            skyux_file_attachment_file_upload_link_placeholder: {
-                message: 'http://www.something.com/file',
-            },
-            skyux_file_attachment_file_upload_or_click_to_browse: {
-                message: 'or click to browse',
-            },
-            skyux_file_attachment_file_upload_paste_link: {
-                message: 'Paste a link to a file',
-            },
-            skyux_file_attachment_file_upload_paste_link_done: { message: 'Done' },
-            skyux_file_attachment_label_no_file_chosen: { message: 'No file chosen' },
-        },
-    };
-    var SkyFormsResourcesProvider = /** @class */ (function () {
-        function SkyFormsResourcesProvider() {
-        }
-        SkyFormsResourcesProvider.prototype.getString = function (localeInfo, name) {
-            return i2.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-        };
-        return SkyFormsResourcesProvider;
-    }());
-    /**
-     * Import into any component library module that needs to use resource strings.
-     */
-    var SkyFormsResourcesModule = /** @class */ (function () {
-        function SkyFormsResourcesModule() {
-        }
-        return SkyFormsResourcesModule;
-    }());
-    SkyFormsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFormsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyFormsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFormsResourcesModule, exports: [i2.SkyI18nModule] });
-    SkyFormsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFormsResourcesModule, providers: [
-            {
-                provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyFormsResourcesProvider,
-                multi: true,
-            },
-        ], imports: [i2.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFormsResourcesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        exports: [i2.SkyI18nModule],
-                        providers: [
-                            {
-                                provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
-                                useClass: SkyFormsResourcesProvider,
-                                multi: true,
-                            },
-                        ],
-                    }]
-            }] });
-
-    var SkyCharacterCounterIndicatorComponent = /** @class */ (function () {
-        function SkyCharacterCounterIndicatorComponent(changeDetector) {
-            this.changeDetector = changeDetector;
-            this.currentCharacterCountLimit = 0;
-            this.currentCharacterCount = 0;
-        }
-        Object.defineProperty(SkyCharacterCounterIndicatorComponent.prototype, "characterCount", {
-            get: function () {
-                return this.currentCharacterCount;
-            },
-            set: function (count) {
-                this.currentCharacterCount = count;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCharacterCounterIndicatorComponent.prototype, "characterCountLimit", {
-            get: function () {
-                return this.currentCharacterCountLimit;
-            },
-            set: function (limit) {
-                this.currentCharacterCountLimit = limit;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return SkyCharacterCounterIndicatorComponent;
-    }());
-    SkyCharacterCounterIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyCharacterCounterIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", ngImport: i0__namespace, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n  {{ characterCountLimit }}.\n  {{\n    characterCount > characterCountLimit\n      ? ('skyux_character_count_over_limit' | skyLibResources)\n      : ''\n  }}\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterIndicatorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-character-counter-indicator',
-                        template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n  {{ characterCountLimit }}.\n  {{\n    characterCount > characterCountLimit\n      ? ('skyux_character_count_over_limit' | skyLibResources)\n      : ''\n  }}\n</span>\n",
-                        styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
-
-    /**
-     * Creates an input field that validates the number of characters. Place this directive on
-     * an `input` or `textarea` element. If users enter more characters than allowed, then the
-     * input field is invalid and the component displays an error indicator.
-     * @required
-     */
-    var SkyCharacterCounterInputDirective = /** @class */ (function () {
-        function SkyCharacterCounterInputDirective() {
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this._validatorChange = function () { };
-        }
-        Object.defineProperty(SkyCharacterCounterInputDirective.prototype, "skyCharacterCounterLimit", {
-            get: function () {
-                return this._skyCharacterCounterLimit || 0;
-            },
-            /**
-             * Specifies the maximum number of characters allowed in the input field. Place this directive
-             * on an `input` or `textarea` element. This property accepts `number` values.
-             * @required
-             */
-            set: function (value) {
-                this._skyCharacterCounterLimit = value;
-                this.updateIndicatorLimit(this.skyCharacterCounterLimit);
-                this._validatorChange();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyCharacterCounterInputDirective.prototype.validate = function (control) {
-            var value = control.value;
-            this.updateIndicatorCount((value && value.length) || 0);
-            if (!value) {
-                return;
-            }
-            if (value.length > this.skyCharacterCounterLimit) {
-                // This is needed to apply the appropriate error styles to the input.
-                control.markAsTouched();
-                return {
-                    skyCharacterCounter: {
-                        invalid: value,
-                    },
-                };
-            }
-        };
-        SkyCharacterCounterInputDirective.prototype.registerOnValidatorChange = function (fn) {
-            this._validatorChange = fn;
-        };
-        SkyCharacterCounterInputDirective.prototype.updateIndicatorCount = function (count) {
-            if (this.skyCharacterCounterIndicator) {
-                this.skyCharacterCounterIndicator.characterCount = count;
-            }
-        };
-        SkyCharacterCounterInputDirective.prototype.updateIndicatorLimit = function (limit) {
-            if (this.skyCharacterCounterIndicator) {
-                this.skyCharacterCounterIndicator.characterCountLimit = limit;
-            }
-        };
-        return SkyCharacterCounterInputDirective;
-    }());
-    SkyCharacterCounterInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterInputDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyCharacterCounterInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
-            {
-                provide: i4.NG_VALIDATORS,
-                useExisting: SkyCharacterCounterInputDirective,
-                multi: true,
-            },
-        ], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterInputDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[skyCharacterCounter]',
-                        providers: [
-                            {
-                                provide: i4.NG_VALIDATORS,
-                                useExisting: SkyCharacterCounterInputDirective,
-                                multi: true,
-                            },
-                        ],
-                    }]
-            }], propDecorators: { skyCharacterCounterIndicator: [{
-                    type: i0.Input
-                }], skyCharacterCounterLimit: [{
-                    type: i0.Input
-                }] } });
-
-    var SkyCharacterCounterModule = /** @class */ (function () {
-        function SkyCharacterCounterModule() {
-        }
-        return SkyCharacterCounterModule;
-    }());
-    SkyCharacterCounterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyCharacterCounterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
-            SkyCharacterCounterIndicatorComponent], imports: [i1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule,
-            SkyFormsResourcesModule,
-            i2.SkyI18nModule], exports: [SkyCharacterCounterInputDirective,
-            SkyCharacterCounterIndicatorComponent] });
-    SkyCharacterCounterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, imports: [[
-                i1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
-                SkyFormsResourcesModule,
-                i2.SkyI18nModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyCharacterCounterInputDirective,
-                            SkyCharacterCounterIndicatorComponent,
-                        ],
-                        imports: [
-                            i1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
-                            SkyFormsResourcesModule,
-                            i2.SkyI18nModule,
-                        ],
-                        exports: [
-                            SkyCharacterCounterInputDirective,
-                            SkyCharacterCounterIndicatorComponent,
-                        ],
-                    }]
-            }] });
-
-    /**
-     * Fires when users select or deselect the checkbox.
-     */
-    var SkyCheckboxChange = /** @class */ (function () {
-        function SkyCheckboxChange() {
-        }
-        return SkyCheckboxChange;
-    }());
-
-    /**
-     * Specifies a label for the checkbox.
-     */
-    var SkyCheckboxLabelComponent = /** @class */ (function () {
-        function SkyCheckboxLabelComponent() {
-        }
-        return SkyCheckboxLabelComponent;
-    }());
-    SkyCheckboxLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyCheckboxLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0__namespace, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxLabelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-checkbox-label',
-                        template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n",
-                    }]
-            }] });
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    // tslint:disable:no-forward-ref
-    var SKY_CHECKBOX_REQUIRED_VALIDATOR = {
-        provide: i4.NG_VALIDATORS,
-        useExisting: i0.forwardRef(function () { return SkyCheckboxRequiredValidatorDirective; }),
-        multi: true,
-    };
-    // tslint:enable
-    /**
-     * Validator support for the `required` input on `sky-checkbox`.
-     * Angular's `CheckboxRequiredValidator` only works with `input type=checkbox`. This directive
-     * extends the angular validator to work with `sky-checkbox` tags.
-     * This is based on Angular Material's similar implementation:
-     * https://github.com/angular/components/blob/a415b52ead2ec202ba37edb7d7866b29dd790394/src/material/checkbox/checkbox-required-validator.ts
-     * @internal
-     */
-    var SkyCheckboxRequiredValidatorDirective = /** @class */ (function (_super) {
-        __extends(SkyCheckboxRequiredValidatorDirective, _super);
-        function SkyCheckboxRequiredValidatorDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SkyCheckboxRequiredValidatorDirective;
-    }(i4.CheckboxRequiredValidator));
-    SkyCheckboxRequiredValidatorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyCheckboxRequiredValidatorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxRequiredValidatorDirective, selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]", providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        // eslint-disable-next-line @angular-eslint/directive-selector
-                        selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]",
-                        providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR],
-                    }]
-            }] });
-
-    // Need to add the following to classes which contain static methods.
-    // See: https://github.com/ng-packagr/ng-packagr/issues/641
-    // @dynamic
-    var SkyFormsUtility = /** @class */ (function () {
-        function SkyFormsUtility() {
-        }
-        /** Coerces a data-bound value (typically a string) to a boolean. */
-        SkyFormsUtility.coerceBooleanProperty = function (value) {
-            return value !== undefined && "" + value !== 'false';
-        };
-        /**
-         * Gets the required state of the checkbox.
-         * Currently, Angular doesn't offer a way to get this easily, so we have to create an empty
-         * control using the current validator to see if it throws a `required` validation error.
-         * https://github.com/angular/angular/issues/13461#issuecomment-340368046
-         */
-        SkyFormsUtility.hasRequiredValidation = function (ngControl) {
-            var abstractControl = ngControl.control;
-            if (abstractControl && abstractControl.validator) {
-                var validator = abstractControl.validator({});
-                if (validator && validator.required) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        return SkyFormsUtility;
-    }());
-
-    /**
-     * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
-     */
-    var nextId = 0;
-    /**
-     * Replaces the HTML input element with `type="checkbox"`. When users select a checkbox, its value
-     * is driven through an `ngModel` attribute that you specify on the `sky-checkbox` element.
-     */
-    var SkyCheckboxComponent = /** @class */ (function () {
-        function SkyCheckboxComponent(ngControl) {
-            this.ngControl = ngControl;
-            /**
-             * Specifies an ID for the checkbox.
-             * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`
-             */
-            this.id = "sky-checkbox-" + ++nextId;
-            /**
-             * Specifies an index for the checkbox. If not defined, the index is set to the position of the
-             * checkbox on load.
-             */
-            this.tabindex = 0;
-            /**
-             * Specifies a name for a group of checkboxes.
-             * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`
-             */
-            this.name = "sky-checkbox-" + ++nextId;
-            /**
-             * Fires when the selected value changes.
-             */
-            this.change = new i0.EventEmitter();
-            this.isFirstChange = true;
-            this._checked = false;
-            this._checkedChange = new rxjs.BehaviorSubject(this._checked);
-            this._disabled = false;
-            this._disabledChange = new rxjs.BehaviorSubject(this._disabled);
-            this._required = false;
-            /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onTouched = function () { };
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this._controlValueAccessorChangeFn = function (value) { };
-            if (this.ngControl) {
-                this.ngControl.valueAccessor = this;
-            }
-        }
-        Object.defineProperty(SkyCheckboxComponent.prototype, "disabled", {
-            /**
-             * Indicates whether the checkbox is disabled.
-             */
-            get: function () {
-                return this._disabled;
-            },
-            /**
-             * Indicates whether to disable the checkbox.
-             * @default false
-             */
-            set: function (value) {
-                var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
-                if (coercedValue !== this.disabled) {
-                    this._disabled = coercedValue;
-                    this._disabledChange.next(this._disabled);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "checkboxType", {
-            get: function () {
-                return this._checkboxType || 'info';
-            },
-            /**
-             * Specifies a type to set the background color after users select a checkbox where the
-             * `icon` property displays an icon in place of the checkbox. The valid options correspond to
-             * [the label component's](https://developer.blackbaud.com/skyux/components/label)
-             * label types. `"info"` creates a blue background, `"success"` creates a green
-             * background, `"warning"` creates an orange background, and `"danger"` creates a red background.
-             * @default "info"
-             */
-            set: function (value) {
-                if (value) {
-                    this._checkboxType = value.toLowerCase();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "inputId", {
-            get: function () {
-                return "input-" + this.id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "checked", {
-            /**
-             * Indicates whether the checkbox is selected.
-             */
-            get: function () {
-                return this._checked;
-            },
-            /**
-             * Indicates whether the checkbox is selected.
-             * @default false
-             */
-            set: function (checked) {
-                if (checked !== this.checked) {
-                    this._checked = checked;
-                    this._controlValueAccessorChangeFn(checked);
-                    this._checkedChange.next(this._checked);
-                    // Do not mark the field as "dirty"
-                    // if the field has been initialized with a value.
-                    if (this.isFirstChange && this.ngControl && this.ngControl.control) {
-                        this.ngControl.control.markAsPristine();
-                        this.isFirstChange = false;
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "required", {
-            get: function () {
-                return this._required;
-            },
-            /**
-             * Indicates whether the input is required for form validation.
-             * When you set this property to `true`, the component adds `aria-required` and `required`
-             * attributes to the input element so that forms display an invalid state until the input element
-             * is complete.
-             * @default false
-             */
-            set: function (value) {
-                this._required = SkyFormsUtility.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "checkedChange", {
-            /**
-             * Fires when users select or deselect the checkbox.
-             */
-            get: function () {
-                return this._checkedChange;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "disabledChange", {
-            /**
-             * Fires when the selected value changes.
-             */
-            get: function () {
-                return this._disabledChange;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyCheckboxComponent.prototype.ngOnInit = function () {
-            if (this.ngControl) {
-                // Backwards compatibility support for anyone still using Validators.Required.
-                this.required =
-                    this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
-            }
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.writeValue = function (value) {
-            this.checked = !!value;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.registerOnChange = function (fn) {
-            this._controlValueAccessorChangeFn = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        /**
-         * Event handler for checkbox input element.
-         * Toggles checked state if element is not disabled.
-         */
-        SkyCheckboxComponent.prototype.onInteractionEvent = function (event) {
-            // We always have to stop propagation on the change event.
-            // Otherwise the change event, from the input element, will bubble up and
-            // emit its event object to the `change` output.
-            event.stopPropagation();
-            if (!this.disabled) {
-                this._toggle();
-                this._emitChangeEvent();
-            }
-        };
-        SkyCheckboxComponent.prototype.onInputBlur = function () {
-            this.onTouched();
-        };
-        SkyCheckboxComponent.prototype._emitChangeEvent = function () {
-            var event = new SkyCheckboxChange();
-            event.source = this;
-            event.checked = this._checked;
-            this._controlValueAccessorChangeFn(this._checked);
-            this.change.emit(event);
-        };
-        /**
-         * Toggles the `checked` value between true and false
-         */
-        SkyCheckboxComponent.prototype._toggle = function () {
-            this.checked = !this.checked;
-        };
-        return SkyCheckboxComponent;
-    }());
-    SkyCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", required: "required" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, ngImport: i0__namespace, template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n", styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-checkbox',
-                        template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n",
-                        styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"],
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i4__namespace.NgControl, decorators: [{
-                            type: i0.Self
-                        }, {
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { label: [{
-                    type: i0.Input
-                }], labelledBy: [{
-                    type: i0.Input
-                }], id: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], tabindex: [{
-                    type: i0.Input
-                }], name: [{
-                    type: i0.Input
-                }], change: [{
-                    type: i0.Output
-                }], icon: [{
-                    type: i0.Input
-                }], checkboxType: [{
-                    type: i0.Input
-                }], checked: [{
-                    type: i0.Input
-                }], required: [{
-                    type: i0.Input
-                }], checkedChange: [{
-                    type: i0.Output
-                }], disabledChange: [{
-                    type: i0.Output
-                }] } });
-
-    var SkyCheckboxModule = /** @class */ (function () {
-        function SkyCheckboxModule() {
-        }
-        return SkyCheckboxModule;
-    }());
-    SkyCheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyCheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
-            SkyCheckboxLabelComponent,
-            SkyCheckboxRequiredValidatorDirective], imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule], exports: [SkyCheckboxComponent,
-            SkyCheckboxLabelComponent,
-            SkyCheckboxRequiredValidatorDirective] });
-    SkyCheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, imports: [[i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyCheckboxComponent,
-                            SkyCheckboxLabelComponent,
-                            SkyCheckboxRequiredValidatorDirective,
-                        ],
-                        imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule],
-                        exports: [
-                            SkyCheckboxComponent,
-                            SkyCheckboxLabelComponent,
-                            SkyCheckboxRequiredValidatorDirective,
-                        ],
-                    }]
-            }] });
-
-    /**
-     * Displays a label above the file attachment element.
-     */
-    var SkyFileAttachmentLabelComponent = /** @class */ (function () {
-        function SkyFileAttachmentLabelComponent() {
-        }
-        return SkyFileAttachmentLabelComponent;
-    }());
-    SkyFileAttachmentLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFileAttachmentLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileAttachmentLabelComponent, selector: "sky-file-attachment-label", ngImport: i0__namespace, template: "<span class=\"sky-control-label\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentLabelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-file-attachment-label',
-                        template: "<span class=\"sky-control-label\">\n  <ng-content></ng-content>\n</span>\n",
-                        styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyFileAttachmentService = /** @class */ (function () {
-        function SkyFileAttachmentService() {
-        }
-        SkyFileAttachmentService.prototype.checkFiles = function (files, minFileSize, maxFileSize, acceptedTypes, validateFn) {
-            var fileResults = [];
-            for (var index = 0; index < files.length; index++) {
-                var fileItem = {
-                    file: files.item(index),
-                };
-                if (fileItem.file.size < minFileSize) {
-                    fileItem.errorType = 'minFileSize';
-                    fileItem.errorParam = minFileSize.toString();
-                    fileResults.push(fileItem);
-                }
-                else if (fileItem.file.size > maxFileSize) {
-                    fileItem.errorType = 'maxFileSize';
-                    fileItem.errorParam = maxFileSize.toString();
-                    fileResults.push(fileItem);
-                }
-                else if (this.fileTypeRejected(fileItem.file.type, acceptedTypes)) {
-                    fileItem.errorType = 'fileType';
-                    fileItem.errorParam = acceptedTypes;
-                    fileResults.push(fileItem);
-                }
-                else if (validateFn) {
-                    var errorParam = validateFn(fileItem);
-                    if (errorParam) {
-                        fileItem.errorType = 'validate';
-                        fileItem.errorParam = errorParam;
-                    }
-                    fileResults.push(fileItem);
-                }
-                else {
-                    fileResults.push(fileItem);
-                }
-            }
-            return fileResults;
-        };
-        /**
-         * Returns `true` if a directory is found in the provided `files` parameter.
-         */
-        SkyFileAttachmentService.prototype.hasDirectory = function (files) {
-            for (var index = 0; index < files.length; index++) {
-                var file = files.item(index);
-                if (file.webkitGetAsEntry &&
-                    file.webkitGetAsEntry() &&
-                    file.webkitGetAsEntry().isDirectory) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        SkyFileAttachmentService.prototype.fileTypeRejected = function (fileType, acceptedTypes) {
-            if (!acceptedTypes) {
-                return false;
-            }
-            if (!fileType) {
-                return true;
-            }
-            var acceptedTypesUpper = acceptedTypes.toUpperCase();
-            var typeArray = acceptedTypesUpper.split(',');
-            return !this.fileTypeInArray(typeArray, fileType.toUpperCase());
-        };
-        SkyFileAttachmentService.prototype.fileTypeInArray = function (typeArray, fileType) {
-            if (typeArray.indexOf(fileType) !== -1) {
-                return true;
-            }
-            for (var index = 0; index < typeArray.length; index++) {
-                var type = typeArray[index];
-                var validSubtype = this.getMimeSubtype(type);
-                if (validSubtype === '*') {
-                    if (this.getMimeMainType(type) === this.getMimeMainType(fileType)) {
-                        return true;
-                    }
-                }
-            }
-            return false;
-        };
-        SkyFileAttachmentService.prototype.getMimeSubtype = function (type) {
-            return type.substr(type.indexOf('/') + 1, type.length);
-        };
-        SkyFileAttachmentService.prototype.getMimeMainType = function (type) {
-            return type.substr(0, type.indexOf('/'));
-        };
-        return SkyFileAttachmentService;
-    }());
-    SkyFileAttachmentService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFileAttachmentService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyFileItemService = /** @class */ (function () {
-        function SkyFileItemService() {
-        }
-        SkyFileItemService.prototype.isFile = function (fileItem) {
-            var file = fileItem.file;
-            /* tslint:disable */
-            return (file &&
-                file !== undefined &&
-                file !== null &&
-                file.size !== undefined &&
-                file.size !== null);
-            /* tslint:enable */
-        };
-        SkyFileItemService.prototype.isImage = function (fileItem) {
-            var fileTypeUpper = this.getFileTypeUpper(fileItem);
-            var slashIndex = fileTypeUpper.indexOf('/');
-            if (slashIndex >= 0) {
-                switch (fileTypeUpper.substr(fileTypeUpper.indexOf('/') + 1)) {
-                    case 'BMP':
-                    case 'GIF':
-                    case 'JPEG':
-                    case 'PNG':
-                        return true;
-                    default:
-                        break;
-                }
-            }
-            return false;
-        };
-        SkyFileItemService.prototype.getFileExtensionUpper = function (fileItem) {
-            var extension = '', name;
-            /* istanbul ignore else */
-            /* sanity check */
-            if (fileItem) {
-                var file = fileItem.file;
-                if (file) {
-                    /* istanbul ignore next */
-                    name = file.name || '';
-                    /* istanbul ignore next */
-                    extension = name.substr(name.lastIndexOf('.')) || '';
-                }
-                else {
-                    extension = '';
-                }
-            }
-            return extension.toUpperCase();
-        };
-        SkyFileItemService.prototype.getFileTypeUpper = function (fileItem) {
-            var fileType = '';
-            /* istanbul ignore else */
-            /* sanity check */
-            if (fileItem) {
-                var file = fileItem.file;
-                if (file) {
-                    fileType = file.type || '';
-                }
-                else {
-                    fileType = '';
-                }
-            }
-            return fileType.toUpperCase();
-        };
-        return SkyFileItemService;
-    }());
-    SkyFileItemService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileItemService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFileItemService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileItemService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileItemService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var uniqueId$1 = 0;
-    /**
-     * Provides an element to attach a single local file.
-     */
-    var SkyFileAttachmentComponent = /** @class */ (function () {
-        function SkyFileAttachmentComponent(themeSvc, changeDetector, fileAttachmentService, fileItemService, ngControl) {
-            this.themeSvc = themeSvc;
-            this.changeDetector = changeDetector;
-            this.fileAttachmentService = fileAttachmentService;
-            this.fileItemService = fileItemService;
-            this.ngControl = ngControl;
-            /**
-             * Specifies the maximum size in bytes for valid files.
-             */
-            this.maxFileSize = 500000;
-            /**
-             * Specifies the minimum size in bytes for valid files.
-             */
-            this.minFileSize = 0;
-            /**
-             * Fires when users add or remove files.
-             */
-            this.fileChange = new i0.EventEmitter();
-            /**
-             * Fires when users select the file name link. Make sure to bind the event.
-             * If you do not, the file name link will be a dead link.
-             */
-            this.fileClick = new i0.EventEmitter();
-            this.acceptedOver = false;
-            this.rejectedOver = false;
-            /**
-             * Indicates whether the input is required for form validation.
-             * When you set this property to `true`, the component adds `aria-required` and `required`
-             * attributes to the input element so that forms display an invalid state until the input element
-             * is complete.
-             */
-            this.required = false;
-            this.fileAttachmentId = uniqueId$1++;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this._disabled = false;
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this._onChange = function (_) { };
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this._onTouched = function () { };
-            this.labelElementId = "sky-file-attachment-label-" + this.fileAttachmentId;
-            this.fileDropDescriptionElementId = "sky-file-attachment-drop-description-" + this.fileAttachmentId;
-            if (this.ngControl) {
-                this.ngControl.valueAccessor = this;
-            }
-        }
-        Object.defineProperty(SkyFileAttachmentComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled;
-            },
-            /**
-             * Indicates whether to disable the input.
-             * @default false
-             */
-            set: function (value) {
-                var newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
-                if (this._disabled !== newDisabledState) {
-                    this._disabled = newDisabledState;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFileAttachmentComponent.prototype, "hasLabelComponent", {
-            get: function () {
-                return this.labelComponents.length > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFileAttachmentComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            set: function (value) {
-                // The null check is needed to address a bug in Angular 4.
-                // writeValue is being called twice, first time with a phantom null value
-                // See: https://github.com/angular/angular/issues/14988
-                // tslint:disable-next-line:no-null-keyword
-                var isNewValue = value !== this.value && value !== null;
-                if (isNewValue) {
-                    this._value = value;
-                    this._onChange(value);
-                    this.updateFileAttachmentButton();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyFileAttachmentComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.themeSvc.settingsChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (themeSettings) {
-                _this.currentThemeName = themeSettings.currentSettings.theme.name;
-                _this.updateFileAttachmentButton();
-            });
-        };
-        SkyFileAttachmentComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            // This is needed to address a bug in Angular 7.
-            // When a control value is set intially, its value is not represented on the view.
-            // See: https://github.com/angular/angular/issues/13792
-            // Of note is the parent check which allows us to determine if the form is reactive.
-            // Without this check there is a changed before checked error
-            /* istanbul ignore else */
-            if (this.ngControl) {
-                setTimeout(function () {
-                    _this.ngControl.control.setValue(_this.value, {
-                        emitEvent: false,
-                    });
-                    _this.changeDetector.markForCheck();
-                });
-                // Backwards compatibility support for anyone still using Validators.Required.
-                this.required =
-                    this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
-            }
-        };
-        SkyFileAttachmentComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            // Handles updating classes when label changes
-            this.labelComponents.changes
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                _this.changeDetector.detectChanges();
-            });
-        };
-        SkyFileAttachmentComponent.prototype.isImage = function () {
-            return this.fileItemService.isImage(this.value);
-        };
-        SkyFileAttachmentComponent.prototype.onDropClicked = function () {
-            this._onTouched();
-            this.inputEl.nativeElement.click();
-        };
-        SkyFileAttachmentComponent.prototype.fileChangeEvent = function (fileChangeEvent) {
-            this.handleFiles(fileChangeEvent.target.files);
-        };
-        SkyFileAttachmentComponent.prototype.fileDragEnter = function (dragEnterEvent) {
-            // Save this target to know when the drag event leaves
-            this.enterEventTarget = dragEnterEvent.target;
-            dragEnterEvent.stopPropagation();
-            dragEnterEvent.preventDefault();
-        };
-        SkyFileAttachmentComponent.prototype.fileDragOver = function (dragOverEvent) {
-            var transfer = dragOverEvent.dataTransfer;
-            dragOverEvent.stopPropagation();
-            dragOverEvent.preventDefault();
-            if (transfer) {
-                if (transfer.items) {
-                    var files = transfer.items;
-                    for (var index = 0; index < files.length; index++) {
-                        var file = files[index];
-                        if (file.type &&
-                            this.fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
-                            this.rejectedOver = true;
-                            this.acceptedOver = false;
-                            return;
-                        }
-                    }
-                    if (files.length > 0 && !this.acceptedOver) {
-                        this.rejectedOver = false;
-                        this.acceptedOver = true;
-                    }
-                }
-                else if (transfer.files) {
-                    // If the browser does not support DataTransfer.items,
-                    // defer file-type checking to drop handler.
-                    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
-                    this.rejectedOver = false;
-                    this.acceptedOver = true;
-                }
-            }
-        };
-        SkyFileAttachmentComponent.prototype.fileDrop = function (dropEvent) {
-            dropEvent.stopPropagation();
-            dropEvent.preventDefault();
-            this.enterEventTarget = undefined;
-            this.rejectedOver = false;
-            this.acceptedOver = false;
-            if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
-                if (dropEvent.dataTransfer.files.length > 1) {
-                    return;
-                }
-                if (this.fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files)) {
-                    return;
-                }
-                this.handleFiles(dropEvent.dataTransfer.files);
-            }
-        };
-        SkyFileAttachmentComponent.prototype.fileDragLeave = function (dragLeaveEvent) {
-            if (this.enterEventTarget === dragLeaveEvent.target) {
-                this.rejectedOver = false;
-                this.acceptedOver = false;
-            }
-        };
-        SkyFileAttachmentComponent.prototype.deleteFileAttachment = function () {
-            this.value = undefined;
-            this.changeDetector.markForCheck();
-            this.emitFileChangeEvent(this.value);
-        };
-        SkyFileAttachmentComponent.prototype.getFileName = function (truncate) {
-            if (truncate === void 0) { truncate = true; }
-            if (this.value) {
-                // tslint:disable-next-line: max-line-length
-                var dropName = this.fileItemService.isFile(this.value) && this.value.file.name
-                    ? this.value.file.name
-                    : this.value.url;
-                if (truncate && dropName.length > 26) {
-                    return dropName.slice(0, 26) + '...';
-                }
-                else {
-                    return dropName;
-                }
-            }
-            else {
-                return undefined;
-            }
-        };
-        SkyFileAttachmentComponent.prototype.ngOnDestroy = function () {
-            this.fileChange.complete();
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        SkyFileAttachmentComponent.prototype.registerOnChange = function (fn) {
-            this._onChange = fn;
-        };
-        SkyFileAttachmentComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouched = fn;
-        };
-        SkyFileAttachmentComponent.prototype.writeValue = function (value) {
-            this.value = value;
-            this.changeDetector.markForCheck();
-        };
-        /**
-         * @internal
-         * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
-         * @param isDisabled Whether the control should be disabled.
-         */
-        SkyFileAttachmentComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-            this.changeDetector.markForCheck();
-        };
-        SkyFileAttachmentComponent.prototype.emitClick = function () {
-            this.fileClick.emit({
-                file: this.value,
-            });
-        };
-        SkyFileAttachmentComponent.prototype.emitFileChangeEvent = function (currentFile) {
-            if (currentFile && !currentFile.errorType) {
-                this.writeValue(currentFile);
-            }
-            this.fileChange.emit({
-                file: currentFile,
-            });
-            this.inputEl.nativeElement.value = '';
-        };
-        SkyFileAttachmentComponent.prototype.loadFile = function (file) {
-            var _this = this;
-            var reader = new FileReader();
-            reader.addEventListener('load', function (event) {
-                file.url = event.target.result;
-                _this.emitFileChangeEvent(file);
-            });
-            reader.addEventListener('error', function (event) {
-                _this.emitFileChangeEvent(file);
-            });
-            reader.addEventListener('abort', function (event) {
-                _this.emitFileChangeEvent(file);
-            });
-            reader.readAsDataURL(file.file);
-        };
-        SkyFileAttachmentComponent.prototype.handleFiles = function (files) {
-            var e_1, _a;
-            // tslint:disable-next-line: max-line-length
-            var processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
-            try {
-                for (var processedFiles_1 = __values(processedFiles), processedFiles_1_1 = processedFiles_1.next(); !processedFiles_1_1.done; processedFiles_1_1 = processedFiles_1.next()) {
-                    var file = processedFiles_1_1.value;
-                    if (file.errorType) {
-                        this.emitFileChangeEvent(file);
-                    }
-                    else {
-                        this.loadFile(file);
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (processedFiles_1_1 && !processedFiles_1_1.done && (_a = processedFiles_1.return)) _a.call(processedFiles_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        };
-        SkyFileAttachmentComponent.prototype.updateFileAttachmentButton = function () {
-            this.showFileAttachmentButton = !(this.value && this.currentThemeName === 'modern');
-            this.changeDetector.markForCheck();
-        };
-        return SkyFileAttachmentComponent;
-    }());
-    SkyFileAttachmentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentComponent, deps: [{ token: i1__namespace$1.SkyThemeService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFileAttachmentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", maxFileSize: "maxFileSize", minFileSize: "minFileSize", validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, providers: [SkyFileAttachmentService], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\n  </div>\n  <div\n    class=\"\n      sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n    \"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-file-attachment-drop-description\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <button\n      *ngIf=\"showFileAttachmentButton\"\n      class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n      [disabled]=\"disabled\"\n      (click)=\"onDropClicked()\"\n    >\n      <sky-icon icon=\"folder-open-o\"></sky-icon>\n      {{\n        value\n          ? ('skyux_file_attachment_button_label_replace_file'\n            | skyLibResources)\n          : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n      }}\n    </button>\n    <sky-icon\n      *ngIf=\"value && !isImage() && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    >\n    </sky-icon>\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"getFileName(false)\"\n        (click)=\"emitClick()\"\n      >\n        {{ getFileName() }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_delete' | skyLibResources\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage()\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\"></ng-content>\n</ng-template>\n", styles: [".sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-file-attachment',
-                        template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\n  </div>\n  <div\n    class=\"\n      sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n    \"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-file-attachment-drop-description\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <button\n      *ngIf=\"showFileAttachmentButton\"\n      class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n      [disabled]=\"disabled\"\n      (click)=\"onDropClicked()\"\n    >\n      <sky-icon icon=\"folder-open-o\"></sky-icon>\n      {{\n        value\n          ? ('skyux_file_attachment_button_label_replace_file'\n            | skyLibResources)\n          : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n      }}\n    </button>\n    <sky-icon\n      *ngIf=\"value && !isImage() && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    >\n    </sky-icon>\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"getFileName(false)\"\n        (click)=\"emitClick()\"\n      >\n        {{ getFileName() }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_delete' | skyLibResources\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage()\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\"></ng-content>\n</ng-template>\n",
-                        styles: [".sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"],
-                        providers: [SkyFileAttachmentService],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i1__namespace$1.SkyThemeService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i4__namespace.NgControl, decorators: [{
-                            type: i0.Self
-                        }, {
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { acceptedTypes: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], maxFileSize: [{
-                    type: i0.Input
-                }], minFileSize: [{
-                    type: i0.Input
-                }], validateFn: [{
-                    type: i0.Input
-                }], fileChange: [{
-                    type: i0.Output
-                }], fileClick: [{
-                    type: i0.Output
-                }], required: [{
-                    type: i0.Input
-                }], inputEl: [{
-                    type: i0.ViewChild,
-                    args: ['fileInput']
-                }], labelComponents: [{
-                    type: i0.ContentChildren,
-                    args: [SkyFileAttachmentLabelComponent]
-                }] } });
-
-    /**
-     * Provides an element to attach multiple files where users can browse or drag and drop local files
-     * or provide hyperlinks to external files. You can leave the contents of the component
-     * blank to display the drop zone's default UI, or you can specify custom content to
-     * display instead. When the module initializes, it disables the ability to drag and
-     * drop files for the entire window to prevent the browser from opening files that are
-     * accidentally dropped outside the target zone. If you implement your own file drop functionality
-     * outside of the file drop component, you can place the `sky-file-drop-target` CSS class
-     * on the element that receives drop events to exempt it from the drop exclusion rule.
-     */
-    var SkyFileDropComponent = /** @class */ (function () {
-        function SkyFileDropComponent(fileAttachmentService) {
-            this.fileAttachmentService = fileAttachmentService;
-            /**
-             * Fires when users add or remove files.
-             */
-            this.filesChanged = new i0.EventEmitter();
-            /**
-             * Fires when the link input box triggers a blur event.
-             */
-            this.linkInputBlur = new i0.EventEmitter();
-            /**
-             * Fires when users add or remove links.
-             */
-            this.linkChanged = new i0.EventEmitter();
-            /**
-             * Specifies the minimum size in bytes for valid files.
-             */
-            this.minFileSize = 0;
-            /**
-             * Specifies the maximum size in bytes for valid files.
-             */
-            this.maxFileSize = 500000;
-            /**
-             * Indicates whether users can drag and drop multiple files at the same time.
-             */
-            this.multiple = true;
-            /**
-             * Indicates whether to disable the option to browse for files to attach.
-             */
-            this.noClick = false;
-            /**
-             * Indicates whether to display the option to attach files from URLs rather than from local devices.
-             */
-            this.allowLinks = false;
-            this.rejectedOver = false;
-            this.acceptedOver = false;
-        }
-        SkyFileDropComponent.prototype.ngOnDestroy = function () {
-            this.filesChanged.complete();
-            this.linkChanged.complete();
-            this.linkInputBlur.complete();
-        };
-        SkyFileDropComponent.prototype.dropClicked = function () {
-            if (!this.noClick) {
-                this.inputEl.nativeElement.click();
-            }
-        };
-        SkyFileDropComponent.prototype.fileChangeEvent = function (fileChangeEvent) {
-            this.handleFiles(fileChangeEvent.target.files);
-        };
-        SkyFileDropComponent.prototype.fileDragEnter = function (dragEnterEvent) {
-            // Save this target to know when the drag event leaves
-            this.enterEventTarget = dragEnterEvent.target;
-            dragEnterEvent.stopPropagation();
-            dragEnterEvent.preventDefault();
-        };
-        SkyFileDropComponent.prototype.fileDragOver = function (dragOverEvent) {
-            var transfer = dragOverEvent.dataTransfer;
-            dragOverEvent.stopPropagation();
-            dragOverEvent.preventDefault();
-            if (transfer) {
-                if (transfer.items) {
-                    var files = transfer.items;
-                    for (var index = 0; index < files.length; index++) {
-                        var file = files[index];
-                        if (file.type &&
-                            this.fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
-                            this.rejectedOver = true;
-                            this.acceptedOver = false;
-                            return;
-                        }
-                    }
-                    if (files.length > 0 && !this.acceptedOver) {
-                        this.rejectedOver = false;
-                        this.acceptedOver = true;
-                    }
-                } /* istanbul ignore next: untestable */
-                else if (transfer.files) {
-                    // If the browser does not support DataTransfer.items,
-                    // defer file-type checking to drop handler.
-                    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
-                    this.rejectedOver = false;
-                    this.acceptedOver = true;
-                }
-            }
-        };
-        SkyFileDropComponent.prototype.fileDrop = function (dropEvent) {
-            dropEvent.stopPropagation();
-            dropEvent.preventDefault();
-            this.enterEventTarget = undefined;
-            this.rejectedOver = false;
-            this.acceptedOver = false;
-            if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
-                var hasDirectory = this.fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files);
-                var invalidNumberOfFiles = !this.multiple && dropEvent.dataTransfer.files.length > 1;
-                if (hasDirectory || invalidNumberOfFiles) {
-                    return;
-                }
-                this.handleFiles(dropEvent.dataTransfer.files);
-            }
-        };
-        SkyFileDropComponent.prototype.fileDragLeave = function (dragLeaveEvent) {
-            if (this.enterEventTarget === dragLeaveEvent.target) {
-                this.rejectedOver = false;
-                this.acceptedOver = false;
-            }
-        };
-        SkyFileDropComponent.prototype.addLinkEnter = function (event) {
-            if (event.which === 13) {
-                this.addLink(event);
-            }
-        };
-        SkyFileDropComponent.prototype.addLink = function (event) {
-            event.preventDefault();
-            this.linkChanged.emit({ url: this.linkUrl });
-            this.linkUrl = undefined;
-        };
-        SkyFileDropComponent.prototype.onLinkBlur = function () {
-            this.linkInputBlur.emit();
-        };
-        SkyFileDropComponent.prototype.emitFileChangeEvent = function (totalFiles, rejectedFileArray, validFileArray) {
-            if (totalFiles === rejectedFileArray.length + validFileArray.length) {
-                this.filesChanged.emit({
-                    files: validFileArray,
-                    rejectedFiles: rejectedFileArray,
-                });
-                this.inputEl.nativeElement.value = '';
-            }
-        };
-        SkyFileDropComponent.prototype.filesRejected = function (file, validFileArray, rejectedFileArray, totalFiles) {
-            rejectedFileArray.push(file);
-            this.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
-        };
-        SkyFileDropComponent.prototype.loadFile = function (fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
-            var reader = new FileReader();
-            reader.addEventListener('load', function (event) {
-                file.url = event.target.result;
-                validFileArray.push(file);
-                fileDrop.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
-            });
-            reader.addEventListener('error', function (event) {
-                fileDrop.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
-            });
-            reader.addEventListener('abort', function (event) {
-                fileDrop.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
-            });
-            reader.readAsDataURL(file.file);
-        };
-        SkyFileDropComponent.prototype.handleFiles = function (files) {
-            var e_1, _a;
-            var validFileArray = [];
-            var rejectedFileArray = [];
-            var totalFiles = files.length;
-            // tslint:disable-next-line: max-line-length
-            var processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
-            try {
-                for (var processedFiles_1 = __values(processedFiles), processedFiles_1_1 = processedFiles_1.next(); !processedFiles_1_1.done; processedFiles_1_1 = processedFiles_1.next()) {
-                    var file = processedFiles_1_1.value;
-                    if (file.errorType) {
-                        this.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
-                    }
-                    else {
-                        this.loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (processedFiles_1_1 && !processedFiles_1_1.done && (_a = processedFiles_1.return)) _a.call(processedFiles_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        };
-        return SkyFileDropComponent;
-    }());
-    SkyFileDropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileDropComponent, deps: [{ token: SkyFileAttachmentService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFileDropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-file-drop-row\"\n  [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n>\n  <div\n    class=\"sky-file-drop-col\"\n    [ngClass]=\"{\n      'sky-file-drop-accept': acceptedOver,\n      'sky-file-drop-reject': rejectedOver\n    }\"\n  >\n    <button\n      class=\"sky-file-drop sky-file-drop-target\"\n      type=\"button\"\n      (click)=\"dropClicked()\"\n      (dragover)=\"fileDragOver($event)\"\n      (dragenter)=\"fileDragEnter($event)\"\n      (dragleave)=\"fileDragLeave($event)\"\n      (drop)=\"fileDrop($event)\"\n      [attr.aria-label]=\"\n        fileUploadAriaLabel ||\n        ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n      \"\n    ></button>\n\n    <input\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      type=\"file\"\n      class=\"sky-file-input-hidden\"\n      [attr.multiple]=\"multiple ? multiple : null\"\n      [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n\n    <div\n      class=\"sky-file-drop-contents sky-padding-even-default\"\n      *ngIf=\"customEl.children.length === 0\"\n    >\n      <div class=\"sky-file-drop-contents-not-over\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources\n          }}\n        </div>\n        <div class=\"sky-file-drop-text\">\n          {{\n            'skyux_file_attachment_file_upload_or_click_to_browse'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is valid -->\n      <div class=\"sky-file-drop-contents-accept\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drop_files_here'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is invalid -->\n      <div class=\"sky-file-drop-contents-reject\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n    </div>\n\n    <div class=\"sky-file-drop-contents-custom\" #customEl>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n    <div class=\"sky-file-drop-contents sky-padding-even-default\">\n      <div class=\"sky-file-drop-link\">\n        <div class=\"sky-file-drop-link-header\">\n          <div class=\"sky-file-drop-text-header sky-headline\">\n            {{\n              'skyux_file_attachment_file_upload_paste_link' | skyLibResources\n            }}\n          </div>\n        </div>\n        <div class=\"sky-form-group\">\n          <input\n            type=\"text\"\n            class=\"sky-form-control\"\n            [attr.aria-label]=\"\n              linkUploadAriaLabel ||\n              ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\n            \"\n            [attr.placeholder]=\"\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\n            \"\n            [(ngModel)]=\"linkUrl\"\n            (blur)=\"onLinkBlur()\"\n            (keyup)=\"addLinkEnter($event)\"\n          />\n        </div>\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-primary\"\n          [disabled]=\"!linkUrl\"\n          (click)=\"addLink($event)\"\n        >\n          {{\n            'skyux_file_attachment_file_upload_paste_link_done'\n              | skyLibResources\n          }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-noclick .sky-file-drop-contents{cursor:default}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileDropComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-file-drop',
-                        template: "<div\n  class=\"sky-file-drop-row\"\n  [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n>\n  <div\n    class=\"sky-file-drop-col\"\n    [ngClass]=\"{\n      'sky-file-drop-accept': acceptedOver,\n      'sky-file-drop-reject': rejectedOver\n    }\"\n  >\n    <button\n      class=\"sky-file-drop sky-file-drop-target\"\n      type=\"button\"\n      (click)=\"dropClicked()\"\n      (dragover)=\"fileDragOver($event)\"\n      (dragenter)=\"fileDragEnter($event)\"\n      (dragleave)=\"fileDragLeave($event)\"\n      (drop)=\"fileDrop($event)\"\n      [attr.aria-label]=\"\n        fileUploadAriaLabel ||\n        ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n      \"\n    ></button>\n\n    <input\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      type=\"file\"\n      class=\"sky-file-input-hidden\"\n      [attr.multiple]=\"multiple ? multiple : null\"\n      [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n\n    <div\n      class=\"sky-file-drop-contents sky-padding-even-default\"\n      *ngIf=\"customEl.children.length === 0\"\n    >\n      <div class=\"sky-file-drop-contents-not-over\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources\n          }}\n        </div>\n        <div class=\"sky-file-drop-text\">\n          {{\n            'skyux_file_attachment_file_upload_or_click_to_browse'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is valid -->\n      <div class=\"sky-file-drop-contents-accept\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drop_files_here'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is invalid -->\n      <div class=\"sky-file-drop-contents-reject\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n    </div>\n\n    <div class=\"sky-file-drop-contents-custom\" #customEl>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n    <div class=\"sky-file-drop-contents sky-padding-even-default\">\n      <div class=\"sky-file-drop-link\">\n        <div class=\"sky-file-drop-link-header\">\n          <div class=\"sky-file-drop-text-header sky-headline\">\n            {{\n              'skyux_file_attachment_file_upload_paste_link' | skyLibResources\n            }}\n          </div>\n        </div>\n        <div class=\"sky-form-group\">\n          <input\n            type=\"text\"\n            class=\"sky-form-control\"\n            [attr.aria-label]=\"\n              linkUploadAriaLabel ||\n              ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\n            \"\n            [attr.placeholder]=\"\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\n            \"\n            [(ngModel)]=\"linkUrl\"\n            (blur)=\"onLinkBlur()\"\n            (keyup)=\"addLinkEnter($event)\"\n          />\n        </div>\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-primary\"\n          [disabled]=\"!linkUrl\"\n          (click)=\"addLink($event)\"\n        >\n          {{\n            'skyux_file_attachment_file_upload_paste_link_done'\n              | skyLibResources\n          }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                        styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-noclick .sky-file-drop-contents{cursor:default}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}\n"],
-                        providers: [SkyFileAttachmentService],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyFileAttachmentService }]; }, propDecorators: { filesChanged: [{
-                    type: i0.Output
-                }], linkInputBlur: [{
-                    type: i0.Output
-                }], linkChanged: [{
-                    type: i0.Output
-                }], fileUploadAriaLabel: [{
-                    type: i0.Input
-                }], linkUploadAriaLabel: [{
-                    type: i0.Input
-                }], minFileSize: [{
-                    type: i0.Input
-                }], maxFileSize: [{
-                    type: i0.Input
-                }], multiple: [{
-                    type: i0.Input
-                }], validateFn: [{
-                    type: i0.Input
-                }], acceptedTypes: [{
-                    type: i0.Input
-                }], noClick: [{
-                    type: i0.Input
-                }], allowLinks: [{
-                    type: i0.Input
-                }], inputEl: [{
-                    type: i0.ViewChild,
-                    args: ['fileInput']
-                }] } });
-
-    /**
-     * @internal
-     */
-    var SkyFileSizePipe = /** @class */ (function () {
-        function SkyFileSizePipe(decimalPipe, resourcesService) {
-            this.decimalPipe = decimalPipe;
-            this.resourcesService = resourcesService;
-        }
-        SkyFileSizePipe.prototype.transform = function (input) {
-            var decimalPlaces = 0, dividend = 1, template;
-            /* tslint:disable */
-            if (input === null || input === undefined) {
-                return '';
-            }
-            /* tslint:enable */
-            if (Math.abs(input) === 1) {
-                template = 'skyux_file_attachment_file_size_b_singular';
-            }
-            else if (input < 1000) {
-                template = 'skyux_file_attachment_file_size_b_plural';
-            }
-            else if (input < 1e6) {
-                template = 'skyux_file_attachment_file_size_kb';
-                dividend = 1000;
-            }
-            else if (input < 1e9) {
-                template = 'skyux_file_attachment_file_size_mb';
-                dividend = 1e6;
-                decimalPlaces = 1;
-            }
-            else {
-                template = 'skyux_file_attachment_file_size_gb';
-                dividend = 1e9;
-                decimalPlaces = 1;
-            }
-            var roundedSize = Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
-                Math.pow(10, decimalPlaces);
-            var formattedSize = this.decimalPipe.transform(roundedSize, '.0-3');
-            return this.getString(template, formattedSize);
-        };
-        SkyFileSizePipe.prototype.getString = function (key) {
-            var _a;
-            var args = [];
-            for (var _i = 1; _i < arguments.length; _i++) {
-                args[_i - 1] = arguments[_i];
-            }
-            // TODO: Need to implement the async `getString` method in a breaking change.
-            return (_a = this.resourcesService).getStringForLocale.apply(_a, __spreadArray([{ locale: 'en-US' }, key], __read(args)));
-        };
-        return SkyFileSizePipe;
-    }());
-    SkyFileSizePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileSizePipe, deps: [{ token: i1__namespace.DecimalPipe }, { token: i2__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    SkyFileSizePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileSizePipe, name: "skyFileSize" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileSizePipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'skyFileSize',
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.DecimalPipe }, { type: i2__namespace.SkyLibResourcesService }]; } });
-
-    var SkyFileItemComponent = /** @class */ (function () {
-        function SkyFileItemComponent(differs, fileItemService) {
-            this.differs = differs;
-            this.fileItemService = fileItemService;
-            /**
-             * Fires when users select the delete button for an item. The deleted item is passed to the
-             * function.
-             */
-            this.deleteFile = new i0.EventEmitter();
-            this.differ = this.differs.find({}).create();
-        }
-        Object.defineProperty(SkyFileItemComponent.prototype, "fileName", {
-            get: function () {
-                return this.fileItem.file.name;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFileItemComponent.prototype, "fileSize", {
-            get: function () {
-                return this.fileItem.file.size;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFileItemComponent.prototype, "url", {
-            get: function () {
-                return this.fileItem.url;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyFileItemComponent.prototype.ngDoCheck = function () {
-            var changes = this.differ.diff(this.fileItem);
-            if (changes) {
-                var cls = void 0;
-                var extensionUpper = this.fileItemService.getFileExtensionUpper(this.fileItem);
-                var fileTypeUpper = void 0;
-                switch (extensionUpper) {
-                    case '.PDF':
-                        cls = 'pdf';
-                        break;
-                    case '.GZ':
-                    case '.RAR':
-                    case '.TGZ':
-                    case '.ZIP':
-                        cls = 'archive';
-                        break;
-                    case '.PPT':
-                    case '.PPTX':
-                        cls = 'powerpoint';
-                        break;
-                    case '.DOC':
-                    case '.DOCX':
-                        cls = 'word';
-                        break;
-                    case '.XLS':
-                    case '.XLSX':
-                        cls = 'excel';
-                        break;
-                    case '.TXT':
-                        cls = 'text';
-                        break;
-                    case '.HTM':
-                    case '.HTML':
-                        cls = 'code';
-                        break;
-                    default:
-                        break;
-                }
-                if (!cls) {
-                    fileTypeUpper = this.fileItemService.getFileTypeUpper(this.fileItem);
-                    switch (fileTypeUpper.substr(0, fileTypeUpper.indexOf('/'))) {
-                        case 'AUDIO':
-                            cls = 'audio';
-                            break;
-                        case 'IMAGE':
-                            // Normally images are displayed as thumbnails, but if an image type is not recognized
-                            // as being widely supported by modern browsers (e.g. TIFF files) then an icon should
-                            // be displayed instead.
-                            cls = 'image';
-                            break;
-                        case 'TEXT':
-                            cls = 'text';
-                            break;
-                        case 'VIDEO':
-                            cls = 'video';
-                            break;
-                        default:
-                            break;
-                    }
-                }
-                this.icon = 'file-' + (cls ? cls + '-' : '') + 'o';
-            }
-        };
-        SkyFileItemComponent.prototype.itemDelete = function () {
-            this.deleteFile.emit(this.fileItem);
-        };
-        SkyFileItemComponent.prototype.isFile = function () {
-            return this.fileItemService.isFile(this.fileItem);
-        };
-        SkyFileItemComponent.prototype.isImage = function () {
-            return this.fileItemService.isImage(this.fileItem);
-        };
-        return SkyFileItemComponent;
-    }());
-    SkyFileItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileItemComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: SkyFileItemService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFileItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileItemComponent, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0__namespace, template: "<div class=\"sky-file-item sky-padding-even-default\">\n  <div class=\"sky-file-item-title\">\n    <div class=\"sky-file-item-name-container\">\n      <div class=\"sky-file-item-name\">\n        <strong *ngIf=\"isFile()\">{{ fileName }}</strong>\n        <strong *ngIf=\"!isFile()\">{{ url }}</strong>\n      </div>\n      <div class=\"sky-file-item-size\" *ngIf=\"isFile()\">\n        ({{ fileSize | skyFileSize }})\n      </div>\n    </div>\n    <div class=\"sky-file-item-controls\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n        [attr.aria-label]=\"\n          'skyux_file_attachment_file_item_delete' | skyLibResources\n        \"\n        (click)=\"itemDelete()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"lg\"></sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-file-item-content\">\n    <div class=\"sky-file-item-preview\">\n      <div *ngIf=\"isImage()\" class=\"sky-file-item-preview-img-container\">\n        <img\n          class=\"sky-file-item-preview-img\"\n          [src]=\"url\"\n          [alt]=\"\n            'skyux_file_attachment_file_upload_image_preview_alt_text'\n              | skyLibResources\n          \"\n        />\n      </div>\n      <div *ngIf=\"!isImage()\" class=\"sky-file-item-preview-other\">\n        <sky-icon [icon]=\"icon\"></sky-icon>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content-custom\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyFileSize": SkyFileSizePipe, "skyLibResources": i2__namespace.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileItemComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-file-item',
-                        template: "<div class=\"sky-file-item sky-padding-even-default\">\n  <div class=\"sky-file-item-title\">\n    <div class=\"sky-file-item-name-container\">\n      <div class=\"sky-file-item-name\">\n        <strong *ngIf=\"isFile()\">{{ fileName }}</strong>\n        <strong *ngIf=\"!isFile()\">{{ url }}</strong>\n      </div>\n      <div class=\"sky-file-item-size\" *ngIf=\"isFile()\">\n        ({{ fileSize | skyFileSize }})\n      </div>\n    </div>\n    <div class=\"sky-file-item-controls\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n        [attr.aria-label]=\"\n          'skyux_file_attachment_file_item_delete' | skyLibResources\n        \"\n        (click)=\"itemDelete()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"lg\"></sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-file-item-content\">\n    <div class=\"sky-file-item-preview\">\n      <div *ngIf=\"isImage()\" class=\"sky-file-item-preview-img-container\">\n        <img\n          class=\"sky-file-item-preview-img\"\n          [src]=\"url\"\n          [alt]=\"\n            'skyux_file_attachment_file_upload_image_preview_alt_text'\n              | skyLibResources\n          \"\n        />\n      </div>\n      <div *ngIf=\"!isImage()\" class=\"sky-file-item-preview-other\">\n        <sky-icon [icon]=\"icon\"></sky-icon>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content-custom\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
-                        styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"],
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: SkyFileItemService }]; }, propDecorators: { fileItem: [{
-                    type: i0.Input
-                }], deleteFile: [{
-                    type: i0.Output
-                }] } });
-
-    var SkyFileAttachmentsModule = /** @class */ (function () {
-        function SkyFileAttachmentsModule() {
-        }
-        return SkyFileAttachmentsModule;
-    }());
-    SkyFileAttachmentsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyFileAttachmentsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentsModule, declarations: [SkyFileAttachmentComponent,
-            SkyFileAttachmentLabelComponent,
-            SkyFileDropComponent,
-            SkyFileItemComponent,
-            SkyFileSizePipe], imports: [i1.CommonModule,
-            i4.FormsModule,
-            SkyFormsResourcesModule,
-            i2.SkyI18nModule,
-            i2$1.SkyIconModule,
-            i1$1.SkyThemeModule], exports: [SkyFileAttachmentComponent,
-            SkyFileAttachmentLabelComponent,
-            SkyFileDropComponent,
-            SkyFileItemComponent,
-            SkyFileSizePipe] });
-    SkyFileAttachmentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentsModule, providers: [i1.DecimalPipe, SkyFileItemService], imports: [[
-                i1.CommonModule,
-                i4.FormsModule,
-                SkyFormsResourcesModule,
-                i2.SkyI18nModule,
-                i2$1.SkyIconModule,
-                i1$1.SkyThemeModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentsModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyFileAttachmentComponent,
-                            SkyFileAttachmentLabelComponent,
-                            SkyFileDropComponent,
-                            SkyFileItemComponent,
-                            SkyFileSizePipe,
-                        ],
-                        imports: [
-                            i1.CommonModule,
-                            i4.FormsModule,
-                            SkyFormsResourcesModule,
-                            i2.SkyI18nModule,
-                            i2$1.SkyIconModule,
-                            i1$1.SkyThemeModule,
-                        ],
-                        exports: [
-                            SkyFileAttachmentComponent,
-                            SkyFileAttachmentLabelComponent,
-                            SkyFileDropComponent,
-                            SkyFileItemComponent,
-                            SkyFileSizePipe,
-                        ],
-                        providers: [i1.DecimalPipe, SkyFileItemService],
-                    }]
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyInputBoxAdapterService = /** @class */ (function () {
-        function SkyInputBoxAdapterService() {
-        }
-        SkyInputBoxAdapterService.prototype.focusControl = function (elRef) {
-            var control = elRef.nativeElement.querySelector('.sky-form-control');
-            /* istanbul ignore else */
-            if (control) {
-                control.focus();
-            }
-        };
-        /**
-         * Returns the inline help element.
-         */
-        SkyInputBoxAdapterService.prototype.getInlineHelpElement = function (elRef) {
-            return elRef.nativeElement.querySelector('.sky-control-help');
-        };
-        /**
-         * Returns true if the provided element contains the focused element.
-         */
-        SkyInputBoxAdapterService.prototype.isFocusInElement = function (el) {
-            if (el) {
-                return (el === document.activeElement || el.contains(document.activeElement));
-            }
-            return false;
-        };
-        return SkyInputBoxAdapterService;
-    }());
-    SkyInputBoxAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyInputBoxAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxAdapterService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyInputBoxHostService = /** @class */ (function () {
-        function SkyInputBoxHostService() {
-        }
-        SkyInputBoxHostService.prototype.init = function (host) {
-            this.host = host;
-        };
-        SkyInputBoxHostService.prototype.populate = function (args) {
-            this.host.populate(args);
-        };
-        return SkyInputBoxHostService;
-    }());
-    SkyInputBoxHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxHostService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyInputBoxHostService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxHostService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxHostService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    /**
-     * Creates a wrapper to provide styling for `input` and `label` elements. To render the
-     * component correctly, include the `sky-form-control` CSS class on the `input` element
-     * and the `sky-control-label` CSS class on the `label` element. To display a help button
-     * beside the label, include a help button element in the `sky-input-box` element and a
-     * `sky-control-help` CSS class on that element.
-     */
-    var SkyInputBoxComponent = /** @class */ (function () {
-        function SkyInputBoxComponent(changeRef, inputBoxHostSvc, adapterService, elementRef) {
-            this.changeRef = changeRef;
-            this.inputBoxHostSvc = inputBoxHostSvc;
-            this.adapterService = adapterService;
-            this.elementRef = elementRef;
-        }
-        Object.defineProperty(SkyInputBoxComponent.prototype, "hasErrorsComputed", {
-            get: function () {
-                if (this.hasErrors === undefined) {
-                    return (this.controlHasErrors(this.formControl) ||
-                        this.controlHasErrors(this.formControlByName) ||
-                        this.controlHasErrors(this.ngModel));
-                }
-                return this.hasErrors;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyInputBoxComponent.prototype.ngOnInit = function () {
-            this.inputBoxHostSvc.init(this);
-        };
-        SkyInputBoxComponent.prototype.formControlFocusIn = function () {
-            var inlineHelpEl = this.adapterService.getInlineHelpElement(this.elementRef);
-            if (!this.adapterService.isFocusInElement(inlineHelpEl)) {
-                this.updateHasFocus(true);
-            }
-        };
-        SkyInputBoxComponent.prototype.formControlFocusOut = function () {
-            this.updateHasFocus(false);
-        };
-        SkyInputBoxComponent.prototype.onInsetIconClick = function () {
-            if (!this.disabled) {
-                this.adapterService.focusControl(this.elementRef);
-            }
-        };
-        SkyInputBoxComponent.prototype.populate = function (args) {
-            this.hostInputTemplate = args.inputTemplate;
-            this.hostButtonsTemplate = args.buttonsTemplate;
-            this.hostButtonsLeftTemplate = args.buttonsLeftTemplate;
-            this.hostButtonsInsetTemplate = args.buttonsInsetTemplate;
-            this.hostIconsInsetTemplate = args.iconsInsetTemplate;
-            this.hostIconsInsetLeftTemplate = args.iconsInsetLeftTemplate;
-        };
-        SkyInputBoxComponent.prototype.updateHasFocus = function (hasFocus) {
-            var _this = this;
-            // Some components manipulate the focus of elements inside an input box programmatically,
-            // which can cause an `ExpressionChangedAfterItHasBeenCheckedError` if focus was set after
-            // initial change detection. Using `setTimeout()` here fixes it.
-            setTimeout(function () {
-                _this.formControlHasFocus = hasFocus;
-                _this.changeRef.markForCheck();
-            });
-        };
-        SkyInputBoxComponent.prototype.controlHasErrors = function (control) {
-            return control && control.invalid && (control.dirty || control.touched);
-        };
-        return SkyInputBoxComponent;
-    }());
-    SkyInputBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyInputBoxHostService }, { token: SkyInputBoxAdapterService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyInputBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled" }, providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], queries: [{ propertyName: "formControl", first: true, predicate: i4.FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: i4.FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: i4.NgModel, descendants: true }], ngImport: i0__namespace, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\"></ng-container>\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"characterCountTemplate\"\n            ></ng-container>\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\"></ng-content>\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <ng-content select=\".sky-control-help\"></ng-content>\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <ng-content select=\"sky-character-counter-indicator\"></ng-content>\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content select=\".sky-form-control\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostInputTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsLeftTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content\n    select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsInsetTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset-left\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <ng-content select=\".sky-error-label\"></ng-content>\n</ng-template>\n", styles: ["sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap}sky-input-box .sky-form-group .sky-control-help{margin:0 0 0 4px}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{background-color:#fff;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0;padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:0;padding-top:5px}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{resize:vertical}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], directives: [{ type: i1__namespace$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-input-box',
-                        template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\"></ng-container>\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"characterCountTemplate\"\n            ></ng-container>\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\"></ng-content>\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <ng-content select=\".sky-control-help\"></ng-content>\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <ng-content select=\"sky-character-counter-indicator\"></ng-content>\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content select=\".sky-form-control\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostInputTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsLeftTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content\n    select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsInsetTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset-left\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <ng-content select=\".sky-error-label\"></ng-content>\n</ng-template>\n",
-                        styles: ["sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap}sky-input-box .sky-form-group .sky-control-help{margin:0 0 0 4px}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{background-color:#fff;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0;padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:0;padding-top:5px}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{resize:vertical}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"],
-                        providers: [SkyInputBoxAdapterService, SkyInputBoxHostService],
-                        // Note that change detection is not set to OnPush; default change detection allows the
-                        // invalid CSS class to be added when the content control's invalid/dirty state changes.
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyInputBoxHostService }, { type: SkyInputBoxAdapterService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { hasErrors: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], formControl: [{
-                    type: i0.ContentChild,
-                    args: [i4.FormControlDirective]
-                }], formControlByName: [{
-                    type: i0.ContentChild,
-                    args: [i4.FormControlName]
-                }], ngModel: [{
-                    type: i0.ContentChild,
-                    args: [i4.NgModel]
-                }] } });
-
-    var SkyInputBoxModule = /** @class */ (function () {
-        function SkyInputBoxModule() {
-        }
-        return SkyInputBoxModule;
-    }());
-    SkyInputBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyInputBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [i1.CommonModule, i1$1.SkyThemeModule], exports: [SkyInputBoxComponent] });
-    SkyInputBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, imports: [[i1.CommonModule, i1$1.SkyThemeModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [SkyInputBoxComponent],
-                        imports: [i1.CommonModule, i1$1.SkyThemeModule],
-                        exports: [SkyInputBoxComponent],
-                    }]
-            }] });
-
-    /**
-     * Auto-incrementing integer that generates unique IDs for radio components.
-     */
-    var nextUniqueId$1 = 0;
-    /**
-     * Provider Expression that allows sky-radio to register as a ControlValueAccessor.
-     * This allows it to support [(ngModel)].
-     */
-    // tslint:disable:no-forward-ref no-use-before-declare
-    var SKY_RADIO_CONTROL_VALUE_ACCESSOR = {
-        provide: i4.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return SkyRadioComponent; }),
-        multi: true,
-    };
-    // tslint:enable
-    /**
-     * Renders a SKY UX-themed replacement for an HTML `input` element
-     * with `type="radio"`. When users select a radio button, its value is driven through an
-     * `ngModel` attribute that you specify on the `sky-radio` element or the parent `sky-radio-group` element.
-     */
-    var SkyRadioComponent = /** @class */ (function () {
-        function SkyRadioComponent(changeDetector) {
-            this.changeDetector = changeDetector;
-            /**
-             * Fires when users focus off a radio button.
-             */
-            this.blur = new rxjs.Subject();
-            /**
-             * Specifies an ID for the radio button.
-             * @default a unique, auto-incrementing integer. For example: `sky-radio-1`
-             */
-            this.id = "sky-radio-" + ++nextUniqueId$1;
-            this._change = new i0.EventEmitter();
-            this._checked = false;
-            this._checkedChange = new rxjs.BehaviorSubject(this._checked);
-            this._disabled = false;
-            this._disabledChange = new rxjs.BehaviorSubject(this._disabled);
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.removeUniqueSelectionListener = function () { };
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onChangeCallback = function (value) { };
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onTouchedCallback = function () { };
-        }
-        Object.defineProperty(SkyRadioComponent.prototype, "checked", {
-            get: function () {
-                return this._checked;
-            },
-            /**
-             * Indicates whether the radio button is selected.
-             * @default false
-             */
-            set: function (value) {
-                var newCheckedState = !!value;
-                if (this._checked !== newCheckedState) {
-                    this._checked = newCheckedState;
-                    this._checkedChange.next(this._checked);
-                    if (newCheckedState) {
-                        this.selectedValue = this.value;
-                    }
-                }
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled;
-            },
-            /**
-             * Indicates whether to disable the input.
-             * @default false
-             */
-            set: function (value) {
-                var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
-                if (coercedValue !== this.disabled) {
-                    this._disabled = coercedValue;
-                    this._disabledChange.next(this._disabled);
-                    this.changeDetector.markForCheck();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "name", {
-            get: function () {
-                return this._name;
-            },
-            /**
-             * This property is deprecated in favor of the `name` property on the `sky-radio-group element`.
-             * We recommend using the `sky-radio-group` element with all radio buttons, but if you opt not to,
-             * then this property specifies a name for a group of radio buttons.
-             * @deprecated
-             */
-            set: function (value) {
-                this._name = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "tabindex", {
-            get: function () {
-                return this._tabindex || 0;
-            },
-            /**
-             * This property is deprecated in favor of
-             * the `tabIndex` property on the `sky-radio-group` element. It specifies an index for the radio
-             * button. If the index is not defined, it is set to the position of the radio button on load.
-             * @deprecated
-             */
-            set: function (value) {
-                console.warn('The sky-radio `tabindex` property is deprecated. Please use the `tabindex` property on the sky-radio-group component.');
-                this._tabindex = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "groupTabIndex", {
-            // For setting the tabindex from the radio group
-            set: function (value) {
-                this._tabindex = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            /**
-             * Specifies and binds a value to the radio button's `value` property. The value usually
-             * corresponds to the radio button's label, which you specify with the `sky-radio-label`
-             * component.
-             * @required
-             */
-            set: function (value) {
-                /* istanbul ignore else */
-                if (this._value !== value) {
-                    if (this.selectedValue && this.selectedValue === this._value) {
-                        this.selectedValue = value;
-                        this.onChangeCallback(this.selectedValue);
-                        this.onTouchedCallback();
-                    }
-                    this._value = value;
-                }
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "radioType", {
-            /**
-             * Specifies a type to set the background color after users select an icon radio button.
-             * The valid options correspond
-             * [the label component's](https://developer.blackbaud.com/skyux/components/label)
-             * label types. `danger` creates a red background, `info` creates a blue background,
-             * `success` creates a green background, and `warning` creates an orange background.
-             * @default "info"
-             */
-            get: function () {
-                return this._radioType || 'info';
-            },
-            set: function (value) {
-                if (value) {
-                    this._radioType = value.toLowerCase();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "change", {
-            /**
-             * Fires when users select a radio button.
-             */
-            get: function () {
-                return this._change;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "checkedChange", {
-            /**
-             * Fires when the selected value changes.
-             */
-            get: function () {
-                return this._checkedChange;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "disabledChange", {
-            /**
-             * Fires when the selected value changes.
-             */
-            get: function () {
-                return this._disabledChange;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "inputId", {
-            get: function () {
-                return "sky-radio-" + this.id + "-input";
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioComponent.prototype, "selectedValue", {
-            get: function () {
-                return this._selectedValue;
-            },
-            set: function (value) {
-                if (value !== this._selectedValue) {
-                    this._selectedValue = value;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyRadioComponent.prototype.ngOnDestroy = function () {
-            this.removeUniqueSelectionListener();
-        };
-        SkyRadioComponent.prototype.writeValue = function (value) {
-            if (value === undefined) {
-                return;
-            }
-            this.selectedValue = value;
-            this.checked = this.value === this.selectedValue;
-            this.changeDetector.markForCheck();
-        };
-        /**
-         * @internal
-         * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.
-         */
-        SkyRadioComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        SkyRadioComponent.prototype.registerOnChange = function (fn) {
-            this.onChangeCallback = fn;
-        };
-        SkyRadioComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouchedCallback = fn;
-        };
-        SkyRadioComponent.prototype.onInputChange = function (event) {
-            event.stopPropagation();
-            if (!this.disabled) {
-                this.checked = true;
-                this._change.emit({
-                    source: this,
-                    value: this._value,
-                });
-                this.onInputFocusChange(undefined);
-                this.onChangeCallback(this.value);
-            }
-        };
-        SkyRadioComponent.prototype.onInputFocusChange = function (event) {
-            this.onTouchedCallback();
-            this.blur.next();
-        };
-        return SkyRadioComponent;
-    }());
-    SkyRadioComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRadioComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", icon: "icon", radioType: "radioType" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0__namespace, template: "<label\n  class=\"sky-radio-wrapper sky-switch\"\n  [ngClass]=\"{ 'sky-switch-disabled': disabled }\"\n>\n  <input\n    class=\"sky-radio-input sky-switch-input\"\n    type=\"radio\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [tabIndex]=\"tabindex\"\n    [value]=\"value\"\n    (blur)=\"onInputFocusChange($event)\"\n    (change)=\"onInputChange($event)\"\n  />\n  <span\n    class=\"sky-switch-control\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-rounded-corners': icon,\n      'sky-rounded-circle': !icon,\n      'sky-switch-control-info': icon && radioType === 'info',\n      'sky-switch-control-success': icon && radioType === 'success',\n      'sky-switch-control-warning': icon && radioType === 'warning',\n      'sky-switch-control-danger': icon && radioType === 'danger'\n    }\"\n  >\n    <sky-icon *ngIf=\"icon\" fixedWidth=\"true\" [icon]=\"icon\"> </sky-icon>\n  </span>\n  <ng-content select=\"sky-radio-label\"></ng-content>\n</label>\n", styles: [".sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000000;border-radius:50%}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870B8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870B8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-radio',
-                        template: "<label\n  class=\"sky-radio-wrapper sky-switch\"\n  [ngClass]=\"{ 'sky-switch-disabled': disabled }\"\n>\n  <input\n    class=\"sky-radio-input sky-switch-input\"\n    type=\"radio\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [tabIndex]=\"tabindex\"\n    [value]=\"value\"\n    (blur)=\"onInputFocusChange($event)\"\n    (change)=\"onInputChange($event)\"\n  />\n  <span\n    class=\"sky-switch-control\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-rounded-corners': icon,\n      'sky-rounded-circle': !icon,\n      'sky-switch-control-info': icon && radioType === 'info',\n      'sky-switch-control-success': icon && radioType === 'success',\n      'sky-switch-control-warning': icon && radioType === 'warning',\n      'sky-switch-control-danger': icon && radioType === 'danger'\n    }\"\n  >\n    <sky-icon *ngIf=\"icon\" fixedWidth=\"true\" [icon]=\"icon\"> </sky-icon>\n  </span>\n  <ng-content select=\"sky-radio-label\"></ng-content>\n</label>\n",
-                        styles: [".sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000000;border-radius:50%}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870B8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870B8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"],
-                        providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { checked: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], id: [{
-                    type: i0.Input
-                }], label: [{
-                    type: i0.Input
-                }], labelledBy: [{
-                    type: i0.Input
-                }], name: [{
-                    type: i0.Input
-                }], tabindex: [{
-                    type: i0.Input
-                }], value: [{
-                    type: i0.Input
-                }], icon: [{
-                    type: i0.Input
-                }], radioType: [{
-                    type: i0.Input
-                }], change: [{
-                    type: i0.Output
-                }], checkedChange: [{
-                    type: i0.Output
-                }], disabledChange: [{
-                    type: i0.Output
-                }] } });
-
-    var nextUniqueId = 0;
-    /**
-     * Organizes radio buttons into a group. It is required for radio
-     * buttons on Angular reactive forms, and we recommend using it with all radio buttons.
-     * On Angular forms, the component manages the selected values and keeps the forms up-to-date.
-     * When users select a radio button, its value is driven through an `ngModel` attribute that you specify on the `sky-radio-group` element.
-     */
-    var SkyRadioGroupComponent = /** @class */ (function () {
-        function SkyRadioGroupComponent(changeDetector, ngControl) {
-            this.changeDetector = changeDetector;
-            this.ngControl = ngControl;
-            /**
-             * Indicates whether the input is required for form validation.
-             * When you set this property to `true`, the component adds `aria-required` and `required`
-             * attributes to the input element so that forms display an invalid state until the input element
-             * is complete.
-             * @default false
-             */
-            this.required = false;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this._disabled = false;
-            this._name = "sky-radio-group-" + nextUniqueId++;
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onChange = function () { };
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onTouched = function () { };
-            if (this.ngControl) {
-                this.ngControl.valueAccessor = this;
-            }
-        }
-        Object.defineProperty(SkyRadioGroupComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled;
-            },
-            /**
-             * Indicates whether to disable the input.
-             * @default false
-             */
-            set: function (value) {
-                var newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
-                if (this._disabled !== newDisabledState) {
-                    this._disabled = newDisabledState;
-                    this.updateRadioButtonDisabled();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioGroupComponent.prototype, "name", {
-            get: function () {
-                return this._name;
-            },
-            /**
-             * Specifies a name for the collection of radio buttons that the component groups together.
-             * This property overwrites the deprecated `name` property on individual `sky-radio` elements,
-             * and it is required unless the `name` property is set on individual `sky-radio` elements.
-             * @required
-             */
-            set: function (value) {
-                this._name = value;
-                this.updateRadioButtonNames();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioGroupComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            /**
-             * Specifies the value of the radio button to select by default when the group loads.
-             * The value corresponds to the `value` property of an individual `sky-radio` element within the
-             * group.
-             */
-            set: function (value) {
-                var isNewValue = value !== this._value;
-                /* istanbul ignore else */
-                if (isNewValue) {
-                    this._value = value;
-                    this.onChange(this._value);
-                    this.updateCheckedRadioFromValue();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyRadioGroupComponent.prototype, "tabIndex", {
-            get: function () {
-                return this._tabIndex;
-            },
-            /**
-             * Specifies an index for all the radio buttons in the group. If the index is not defined,
-             * the indices for individual radio buttons are set to their positions on load.
-             * This property supports accessibility by placing focus on the currently selected radio
-             * button. If no radio button is selected, it places focus on the first or last button
-             * depending on how users navigate to the radio button group.
-             */
-            set: function (value) {
-                if (this._tabIndex !== value) {
-                    this._tabIndex = value;
-                    this.updateRadioButtonTabIndexes();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyRadioGroupComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            // Let child radio components render before updating.
-            setTimeout(function () {
-                _this.resetRadioButtons();
-            });
-            // Watch for radio selections.
-            this.watchForSelections();
-            this.radios.changes.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                // Wait for child radio components to finish any rendering updates.
-                setTimeout(function () {
-                    _this.resetRadioButtons();
-                });
-                // Subscribe to the new radio buttons
-                _this.watchForSelections();
-            });
-        };
-        SkyRadioGroupComponent.prototype.ngAfterViewInit = function () {
-            if (this.ngControl) {
-                // Backwards compatibility support for anyone still using Validators.Required.
-                this.required =
-                    this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
-                // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
-                this.changeDetector.detectChanges();
-            }
-        };
-        SkyRadioGroupComponent.prototype.watchForSelections = function () {
-            var _this = this;
-            this.radios.forEach(function (radio) {
-                radio.change
-                    .pipe(operators.takeUntil(_this.ngUnsubscribe))
-                    .subscribe(function (change) {
-                    _this.onTouched();
-                    _this.writeValue(change.value);
-                });
-                radio.blur.pipe(operators.takeUntil(_this.ngUnsubscribe)).subscribe(function () {
-                    _this.onTouched();
-                    _this.changeDetector.markForCheck();
-                });
-            });
-        };
-        SkyRadioGroupComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        SkyRadioGroupComponent.prototype.writeValue = function (value) {
-            this.value = value;
-        };
-        /**
-         * @internal
-         * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.
-         */
-        SkyRadioGroupComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        SkyRadioGroupComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        SkyRadioGroupComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        SkyRadioGroupComponent.prototype.updateRadioButtonDisabled = function () {
-            var _this = this;
-            if (this.radios) {
-                this.radios.forEach(function (radio) {
-                    radio.disabled = _this.disabled;
-                });
-            }
-        };
-        SkyRadioGroupComponent.prototype.updateRadioButtonNames = function () {
-            var _this = this;
-            if (this.radios) {
-                this.radios.forEach(function (radio) {
-                    radio.name = _this.name;
-                });
-            }
-        };
-        SkyRadioGroupComponent.prototype.updateRadioButtonTabIndexes = function () {
-            var _this = this;
-            if (this.radios) {
-                this.radios.forEach(function (radio) {
-                    radio.groupTabIndex = _this.tabIndex;
-                });
-            }
-        };
-        SkyRadioGroupComponent.prototype.updateCheckedRadioFromValue = function () {
-            var _this = this;
-            if (!this.radios) {
-                return;
-            }
-            this.radios.forEach(function (radio) {
-                radio.checked = _this._value === radio.value;
-            });
-        };
-        SkyRadioGroupComponent.prototype.resetRadioButtons = function () {
-            this.updateCheckedRadioFromValue();
-            this.updateRadioButtonNames();
-            this.updateRadioButtonTabIndexes();
-        };
-        return SkyRadioGroupComponent;
-    }());
-    SkyRadioGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioGroupComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRadioGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", name: "name", required: "required", value: "value", tabIndex: "tabIndex" }, queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-required]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : null\"\n>\n  <ng-content></ng-content>\n</div>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioGroupComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-radio-group',
-                        template: "<div\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-required]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : null\"\n>\n  <ng-content></ng-content>\n</div>\n",
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i4__namespace.NgControl, decorators: [{
-                            type: i0.Self
-                        }, {
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { ariaLabelledBy: [{
-                    type: i0.Input
-                }], ariaLabel: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], name: [{
-                    type: i0.Input
-                }], required: [{
-                    type: i0.Input
-                }], value: [{
-                    type: i0.Input
-                }], tabIndex: [{
-                    type: i0.Input
-                }], radios: [{
-                    type: i0.ContentChildren,
-                    args: [SkyRadioComponent, { descendants: true }]
-                }] } });
-
-    /**
-     * Specifies a label for the radio button.
-     */
-    var SkyRadioLabelComponent = /** @class */ (function () {
-        function SkyRadioLabelComponent() {
-        }
-        // When clicking on a checkbox label, Angular registers two click events.
-        // This handler ignores all events except for those that deal
-        // with the checkbox input explicitly.
-        SkyRadioLabelComponent.prototype.onClick = function (event) {
-            event.stopPropagation();
-        };
-        return SkyRadioLabelComponent;
-    }());
-    SkyRadioLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRadioLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioLabelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-radio-label',
-                        template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n",
-                    }]
-            }], propDecorators: { onClick: [{
-                    type: i0.HostListener,
-                    args: ['click', ['$event']]
-                }] } });
-
-    var SkyRadioModule = /** @class */ (function () {
-        function SkyRadioModule() {
-        }
-        return SkyRadioModule;
-    }());
-    SkyRadioModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyRadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, declarations: [SkyRadioComponent,
-            SkyRadioGroupComponent,
-            SkyRadioLabelComponent], imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule], exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent] });
-    SkyRadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, imports: [[i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyRadioComponent,
-                            SkyRadioGroupComponent,
-                            SkyRadioLabelComponent,
-                        ],
-                        imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule],
-                        exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent],
-                    }]
-            }] });
-
-    var RESPONSIVE_CLASS_XS = 'sky-selection-box-container-xs';
-    var RESPONSIVE_CLASS_SM = 'sky-selection-box-container-sm';
-    var RESPONSIVE_CLASS_MD = 'sky-selection-box-container-md';
-    var RESPONSIVE_CLASS_LG = 'sky-selection-box-container-lg';
-    var BREAKPOINT_XS_MAX_PIXELS = 767;
-    var BREAKPOINT_SM_MIN_PIXELS = 768;
-    var BREAKPOINT_SM_MAX_PIXELS = 991;
-    var BREAKPOINT_MD_MIN_PIXELS = 992;
-    var BREAKPOINT_MD_MAX_PIXELS = 1439;
-    /**
-     * @internal
-     */
-    var SkySelectionBoxAdapterService = /** @class */ (function () {
-        function SkySelectionBoxAdapterService(coreAdapterService, rendererFactory) {
-            this.coreAdapterService = coreAdapterService;
-            this.renderer = rendererFactory.createRenderer(undefined, undefined);
-        }
-        /**
-         * Sets focus on the specified element.
-         */
-        SkySelectionBoxAdapterService.prototype.focus = function (el) {
-            el.nativeElement.focus();
-        };
-        /**
-         * Returns a child element with the `.sky-switch` class.
-         * Useful for getting SKY UX-themed radio buttons or checkboxes.
-         */
-        SkySelectionBoxAdapterService.prototype.getControl = function (el) {
-            return el.nativeElement.querySelector('.sky-switch');
-        };
-        /**
-         * Returns a breakpoint based on the width.
-         * @param width Width of the element in pixels.
-         */
-        SkySelectionBoxAdapterService.prototype.getBreakpointForWidth = function (width) {
-            if (width <= BREAKPOINT_XS_MAX_PIXELS) {
-                return i2$2.SkyMediaBreakpoints.xs;
-            }
-            else if (width >= BREAKPOINT_SM_MIN_PIXELS &&
-                width <= BREAKPOINT_SM_MAX_PIXELS) {
-                return i2$2.SkyMediaBreakpoints.sm;
-            }
-            else if (width >= BREAKPOINT_MD_MIN_PIXELS &&
-                width <= BREAKPOINT_MD_MAX_PIXELS) {
-                return i2$2.SkyMediaBreakpoints.md;
-            }
-            else {
-                return i2$2.SkyMediaBreakpoints.lg;
-            }
-        };
-        /**
-         * Returns the width of the `parentNode` of the provided `element`.
-         */
-        SkySelectionBoxAdapterService.prototype.getParentWidth = function (element) {
-            return element.nativeElement.parentNode.getBoundingClientRect().width;
-        };
-        /**
-         * Returns `true` if the `childEl` is a descendant of the `parentEl`.
-         */
-        SkySelectionBoxAdapterService.prototype.isDescendant = function (parentEl, childEl) {
-            return parentEl.nativeElement.contains(childEl);
-        };
-        /**
-         * Sets the `tabIndex` of all focusable children of the `element` to the provided `tabIndex`.
-         */
-        SkySelectionBoxAdapterService.prototype.setChildrenTabIndex = function (element, tabIndex) {
-            var el = element.nativeElement;
-            var focusableElems = this.coreAdapterService.getFocusableChildren(el, {
-                ignoreVisibility: true,
-            });
-            var index = focusableElems.length;
-            while (index--) {
-                focusableElems[index].tabIndex = tabIndex;
-            }
-        };
-        /**
-         * Adds a responsive CSS class on the provided element based on its current width.
-         */
-        SkySelectionBoxAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
-            var nativeEl = element.nativeElement;
-            this.renderer.removeClass(nativeEl, RESPONSIVE_CLASS_XS);
-            this.renderer.removeClass(nativeEl, RESPONSIVE_CLASS_SM);
-            this.renderer.removeClass(nativeEl, RESPONSIVE_CLASS_MD);
-            this.renderer.removeClass(nativeEl, RESPONSIVE_CLASS_LG);
-            var newClass;
-            // tslint:disable-next-line: switch-default
-            switch (breakpoint) {
-                case i2$2.SkyMediaBreakpoints.xs: {
-                    newClass = RESPONSIVE_CLASS_XS;
-                    break;
-                }
-                case i2$2.SkyMediaBreakpoints.sm: {
-                    newClass = RESPONSIVE_CLASS_SM;
-                    break;
-                }
-                case i2$2.SkyMediaBreakpoints.md: {
-                    newClass = RESPONSIVE_CLASS_MD;
-                    break;
-                }
-                case i2$2.SkyMediaBreakpoints.lg: {
-                    newClass = RESPONSIVE_CLASS_LG;
-                    break;
-                }
-            }
-            this.renderer.addClass(nativeEl, newClass);
-        };
-        /**
-         * Sets the `tabIndex` of the `element` to the provided `tabIndex`.
-         */
-        SkySelectionBoxAdapterService.prototype.setTabIndex = function (element, tabIndex) {
-            var el = element.nativeElement;
-            el.tabIndex = tabIndex;
-        };
-        return SkySelectionBoxAdapterService;
-    }());
-    SkySelectionBoxAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService, deps: [{ token: i2__namespace$2.SkyCoreAdapterService }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkySelectionBoxAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i2__namespace$2.SkyCoreAdapterService }, { type: i0__namespace.RendererFactory2 }]; } });
-
-    /**
-     * Specifies the description to display in a selection box.
-     */
-    var SkySelectionBoxDescriptionComponent = /** @class */ (function () {
-        function SkySelectionBoxDescriptionComponent() {
-        }
-        return SkySelectionBoxDescriptionComponent;
-    }());
-    SkySelectionBoxDescriptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySelectionBoxDescriptionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxDescriptionComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-selection-box-description',
-                        template: "<ng-content></ng-content>\n",
-                    }]
-            }] });
-
-    /**
-     * Creates a button to present users with a choice or question before proceeding with a one-time process.
-     */
-    var SkySelectionBoxComponent = /** @class */ (function () {
-        function SkySelectionBoxComponent(changeDetector, selectionBoxAdapterService) {
-            this.changeDetector = changeDetector;
-            this.selectionBoxAdapterService = selectionBoxAdapterService;
-            this.ngUnsubscribe = new rxjs.Subject();
-        }
-        Object.defineProperty(SkySelectionBoxComponent.prototype, "checked", {
-            get: function () {
-                return this._checked;
-            },
-            set: function (value) {
-                this._checked = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkySelectionBoxComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled || false;
-            },
-            set: function (value) {
-                this.selectionBoxAdapterService.setTabIndex(this.selectionBoxEl, value ? -1 : 0);
-                this._disabled = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkySelectionBoxComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            // Wait for consumer form controls to initialize before setting selected/disabled states.
-            setTimeout(function () {
-                _this.selectionBoxAdapterService.setChildrenTabIndex(_this.selectionBoxEl, -1);
-                _this.updateCheckedOnControlChange();
-                _this.updateDisabledState();
-            });
-        };
-        SkySelectionBoxComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        /**
-         * Since we are programatically firing a click on the control,
-         * make sure user is not clicking on the control before firing click logic.
-         */
-        SkySelectionBoxComponent.prototype.onClick = function (event) {
-            var isControlClick = this.selectionBoxAdapterService.isDescendant(this.controlEl, event.target);
-            if (!isControlClick) {
-                this.selectControl();
-            }
-        };
-        SkySelectionBoxComponent.prototype.onKeydown = function (event) {
-            /* istanbul ignore else */
-            if (event.key === ' ') {
-                this.selectControl();
-                event.preventDefault();
-            }
-        };
-        SkySelectionBoxComponent.prototype.selectControl = function () {
-            this.selectionBoxAdapterService.getControl(this.controlEl).click();
-            this.selectionBoxAdapterService.focus(this.selectionBoxEl);
-        };
-        SkySelectionBoxComponent.prototype.updateCheckedOnControlChange = function () {
-            var _this = this;
-            this.control.checkedChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (value) {
-                _this.checked = value;
-            });
-        };
-        SkySelectionBoxComponent.prototype.updateDisabledState = function () {
-            var _this = this;
-            this.control.disabledChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (value) {
-                _this.disabled = value;
-            });
-        };
-        return SkySelectionBoxComponent;
-    }());
-    SkySelectionBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySelectionBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: i0.ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\"> </ng-content>\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\"></ng-content>\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\"> </ng-content>\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\"> </ng-content>\n    <ng-content select=\"sky-checkbox\"> </ng-content>\n  </div>\n</div>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#ffffff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-selection-box',
-                        styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#ffffff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"],
-                        template: "<div\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\"> </ng-content>\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\"></ng-content>\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\"> </ng-content>\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\"> </ng-content>\n    <ng-content select=\"sky-checkbox\"> </ng-content>\n  </div>\n</div>\n",
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }]; }, propDecorators: { control: [{
-                    type: i0.Input
-                }], controlEl: [{
-                    type: i0.ViewChild,
-                    args: ['control', {
-                            read: i0.ElementRef,
-                            static: false,
-                        }]
-                }], selectionBoxEl: [{
-                    type: i0.ViewChild,
-                    args: ['selectionBox', {
-                            read: i0.ElementRef,
-                            static: false,
-                        }]
-                }] } });
-
-    var SKY_SELECTION_BOX_CLASS_NAME = '.sky-selection-box';
-    /**
-     * Creates a grid layout for an array of selection boxes.
-     */
-    var SkySelectionBoxGridComponent = /** @class */ (function () {
-        function SkySelectionBoxGridComponent(themeSvc, coreAdapterService, selectionBoxAdapter, hostElRef, mutationObserverSvc, ngZone) {
-            this.themeSvc = themeSvc;
-            this.coreAdapterService = coreAdapterService;
-            this.selectionBoxAdapter = selectionBoxAdapter;
-            this.hostElRef = hostElRef;
-            this.mutationObserverSvc = mutationObserverSvc;
-            this.ngZone = ngZone;
-            this.ngUnsubscribe = new rxjs.Subject();
-        }
-        Object.defineProperty(SkySelectionBoxGridComponent.prototype, "alignItems", {
-            get: function () {
-                return this._alignItems || 'center';
-            },
-            /**
-             * @internal
-             * Specifies how to display the selection boxes in the grid.
-             * @default 'center'
-             */
-            set: function (value) {
-                this._alignItems = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkySelectionBoxGridComponent.prototype, "currentBreakpoint", {
-            set: function (value) {
-                if (value !== this._currentBreakpoint) {
-                    this._currentBreakpoint = value;
-                    this.selectionBoxAdapter.setResponsiveClass(this.elementRef, value);
-                    this.updateChildrenHeights();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkySelectionBoxGridComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            /* istanbul ignore else */
-            if (this.themeSvc) {
-                this.themeSvc.settingsChange
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function () {
-                    _this.updateBreakpointClass();
-                    _this.updateChildrenHeights();
-                });
-            }
-        };
-        SkySelectionBoxGridComponent.prototype.ngAfterViewInit = function () {
-            this.updateBreakpointClass();
-            this.updateChildrenHeights();
-            this.initMutationObserver();
-        };
-        SkySelectionBoxGridComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-            this.destroyMutationObserver();
-        };
-        SkySelectionBoxGridComponent.prototype.onWindowResize = function () {
-            this.updateBreakpointClass();
-        };
-        SkySelectionBoxGridComponent.prototype.initMutationObserver = function () {
-            var _this = this;
-            /* istanbul ignore else */
-            if (!this.mutationObserver) {
-                var el_1 = this.elementRef.nativeElement;
-                // MutationObserver is patched by Zone.js and therefore becomes part of the
-                // Angular change detection cycle, but this can lead to infinite loops in some
-                // scenarios. This will keep MutationObserver from triggering change detection.
-                this.ngZone.runOutsideAngular(function () {
-                    _this.mutationObserver = _this.mutationObserverSvc.create(function () {
-                        _this.updateChildrenHeights();
-                    });
-                    _this.mutationObserver.observe(el_1, {
-                        characterData: true,
-                        subtree: true,
-                    });
-                });
-            }
-        };
-        SkySelectionBoxGridComponent.prototype.destroyMutationObserver = function () {
-            /* istanbul ignore else */
-            if (this.mutationObserver) {
-                this.mutationObserver.disconnect();
-                this.mutationObserver = undefined;
-            }
-        };
-        SkySelectionBoxGridComponent.prototype.updateBreakpointClass = function () {
-            var parentWidth = this.selectionBoxAdapter.getParentWidth(this.hostElRef);
-            this.currentBreakpoint =
-                this.selectionBoxAdapter.getBreakpointForWidth(parentWidth);
-        };
-        SkySelectionBoxGridComponent.prototype.updateChildrenHeights = function () {
-            this.coreAdapterService.resetHeight(this.elementRef, SKY_SELECTION_BOX_CLASS_NAME);
-            this.coreAdapterService.syncMaxHeight(this.elementRef, SKY_SELECTION_BOX_CLASS_NAME);
-        };
-        return SkySelectionBoxGridComponent;
-    }());
-    SkySelectionBoxGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxGridComponent, deps: [{ token: i1__namespace$1.SkyThemeService }, { token: i2__namespace$2.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0__namespace.ElementRef }, { token: i2__namespace$2.MutationObserverService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySelectionBoxGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxGridComponent, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\"></ng-content>\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxGridComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-selection-box-grid',
-                        template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\"></ng-content>\n</div>\n",
-                        styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.SkyThemeService }, { type: i2__namespace$2.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0__namespace.ElementRef }, { type: i2__namespace$2.MutationObserverService }, { type: i0__namespace.NgZone }]; }, propDecorators: { alignItems: [{
-                    type: i0.Input
-                }], selectionBoxes: [{
-                    type: i0.ContentChildren,
-                    args: [SkySelectionBoxComponent, {
-                            read: SkySelectionBoxComponent,
-                        }]
-                }], elementRef: [{
-                    type: i0.ViewChild,
-                    args: ['container', {
-                            read: i0.ElementRef,
-                            static: true,
-                        }]
-                }], onWindowResize: [{
-                    type: i0.HostListener,
-                    args: ['window:resize']
-                }] } });
-
-    /**
-     * Specifies the header to display in a selection box.
-     */
-    var SkySelectionBoxHeaderComponent = /** @class */ (function () {
-        function SkySelectionBoxHeaderComponent() {
-        }
-        return SkySelectionBoxHeaderComponent;
-    }());
-    SkySelectionBoxHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySelectionBoxHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxHeaderComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-selection-box-header',
-                        template: "<ng-content></ng-content>\n",
-                    }]
-            }] });
-
-    var SkySelectionBoxModule = /** @class */ (function () {
-        function SkySelectionBoxModule() {
-        }
-        return SkySelectionBoxModule;
-    }());
-    SkySelectionBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkySelectionBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
-            SkySelectionBoxComponent,
-            SkySelectionBoxDescriptionComponent,
-            SkySelectionBoxHeaderComponent], imports: [i1.CommonModule, i1$1.SkyThemeModule], exports: [SkySelectionBoxGridComponent,
-            SkySelectionBoxComponent,
-            SkySelectionBoxDescriptionComponent,
-            SkySelectionBoxHeaderComponent] });
-    SkySelectionBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [[i1.CommonModule, i1$1.SkyThemeModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkySelectionBoxGridComponent,
-                            SkySelectionBoxComponent,
-                            SkySelectionBoxDescriptionComponent,
-                            SkySelectionBoxHeaderComponent,
-                        ],
-                        imports: [i1.CommonModule, i1$1.SkyThemeModule],
-                        exports: [
-                            SkySelectionBoxGridComponent,
-                            SkySelectionBoxComponent,
-                            SkySelectionBoxDescriptionComponent,
-                            SkySelectionBoxHeaderComponent,
-                        ],
-                        providers: [SkySelectionBoxAdapterService],
-                    }]
-            }] });
-
-    /**
-     * Specifies the label to display beside the toggle switch.
-     */
-    var SkyToggleSwitchLabelComponent = /** @class */ (function () {
-        function SkyToggleSwitchLabelComponent() {
-        }
-        return SkyToggleSwitchLabelComponent;
-    }());
-    SkyToggleSwitchLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyToggleSwitchLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchLabelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-toggle-switch-label',
-                        template: "<ng-content></ng-content>\n",
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }] });
-
-    // tslint:disable:no-forward-ref no-use-before-declare
-    var SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR = {
-        provide: i4.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return SkyToggleSwitchComponent; }),
-        multi: true,
-    };
-    var SKY_TOGGLE_SWITCH_VALIDATOR = {
-        provide: i4.NG_VALIDATORS,
-        useExisting: i0.forwardRef(function () { return SkyToggleSwitchComponent; }),
-        multi: true,
-    };
-    // tslint:enable
-    var uniqueId = 0;
-    var SkyToggleSwitchComponent = /** @class */ (function () {
-        function SkyToggleSwitchComponent(changeDetector) {
-            this.changeDetector = changeDetector;
-            /**
-             * Indicates whether to disable the toggle switch.
-             */
-            this.disabled = false;
-            /**
-             * Specifies a tab index for the toggle switch. If not defined, the index is set to the position
-             * of the toggle switch on load.
-             */
-            this.tabIndex = 0;
-            /**
-             * Fires when the checked state of a toggle switch changes.
-             */
-            this.toggleChange = new i0.EventEmitter();
-            this.enableIndicatorAnimation = false;
-            this.isFirstChange = true;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this.toggleSwitchId = uniqueId++;
-            this._checked = false;
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onTouched = function () { };
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            this.onChange = function () { };
-        }
-        Object.defineProperty(SkyToggleSwitchComponent.prototype, "checked", {
-            get: function () {
-                return this._checked || false;
-            },
-            /**
-             * Indicates whether the toggle switch is selected.
-             * @default false
-             */
-            set: function (checked) {
-                if (checked !== this.checked) {
-                    this._checked = checked;
-                    this.onChange(checked);
-                    // Do not mark the field as "dirty"
-                    // if the field has been initialized with a value.
-                    if (this.isFirstChange && this.control) {
-                        this.control.markAsPristine();
-                        this.isFirstChange = false;
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyToggleSwitchComponent.prototype, "hasLabelComponent", {
-            get: function () {
-                return this.labelComponents.length > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyToggleSwitchComponent.prototype, "labelElementId", {
-            get: function () {
-                return "sky-toggle-switch-label-" + this.toggleSwitchId;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyToggleSwitchComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            this.labelComponents.changes
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                // Allow the template to reload any ARIA attributes that are relying on the
-                // label component existing in the DOM.
-                _this.changeDetector.markForCheck();
-            });
-            // Wait for the view to render before applying animation effects.
-            // (Some browsers, such as Firefox, apply the animation too early.)
-            setTimeout(function () {
-                _this.enableIndicatorAnimation = true;
-            });
-        };
-        SkyToggleSwitchComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        SkyToggleSwitchComponent.prototype.writeValue = function (value) {
-            this.checked = !!value;
-            this.changeDetector.markForCheck();
-        };
-        SkyToggleSwitchComponent.prototype.validate = function (control) {
-            if (!this.control) {
-                this.control = control;
-            }
-            return;
-        };
-        SkyToggleSwitchComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        SkyToggleSwitchComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        SkyToggleSwitchComponent.prototype.setDisabledState = function (disabled) {
-            this.disabled = disabled;
-            this.changeDetector.markForCheck();
-        };
-        SkyToggleSwitchComponent.prototype.onButtonClick = function (event) {
-            event.stopPropagation();
-            this.toggleChecked();
-            this.emitChangeEvent();
-        };
-        SkyToggleSwitchComponent.prototype.onButtonBlur = function () {
-            this.onTouched();
-        };
-        SkyToggleSwitchComponent.prototype.emitChangeEvent = function () {
-            this.onChange(this._checked);
-            this.toggleChange.emit({
-                checked: this._checked,
-            });
-        };
-        SkyToggleSwitchComponent.prototype.toggleChecked = function () {
-            this.checked = !this.checked;
-        };
-        return SkyToggleSwitchComponent;
-    }());
-    SkyToggleSwitchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyToggleSwitchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToggleSwitchComponent, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { toggleChange: "toggleChange" }, providers: [
-            SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
-            SKY_TOGGLE_SWITCH_VALIDATOR,
-        ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0__namespace, template: "<span class=\"sky-toggle-switch\">\n  <button\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"hasLabelComponent ? labelElementId : null\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <i\n      aria-hidden=\"true\"\n      class=\"sky-toggle-switch-indicator\"\n      [ngClass]=\"{\n        'sky-toggle-switch-transition': enableIndicatorAnimation\n      }\"\n      role=\"presentation\"\n      >&nbsp;</i\n    >\n    <!-- Non-breaking space needed to align switch to baseline! -->\n  </button>\n\n  <label\n    *ngIf=\"hasLabelComponent\"\n    class=\"sky-toggle-switch-label\"\n    [attr.id]=\"labelElementId\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"> </ng-container>\n  </label>\n</span>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-toggle-switch-label\"></ng-content>\n</ng-template>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch-button{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:1 0 46px;line-height:1.428571429}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){border-color:#00b4f1;border-width:2px;padding:0;cursor:pointer}.sky-toggle-switch-button.sky-toggle-switch-checked{background-color:#c1e8fb;border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-button+.sky-toggle-switch-label{margin-left:10px;flex:1 0 auto}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button{background-color:#fff;border-width:1px;flex-basis:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled{border-color:#d2d2d2;cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked{background-color:#c1e8fb;border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus){padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button{background-color:#fff;border-width:1px;flex-basis:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled{border-color:#d2d2d2;cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked{background-color:#c1e8fb;border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus){padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-toggle-switch',
-                        template: "<span class=\"sky-toggle-switch\">\n  <button\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"hasLabelComponent ? labelElementId : null\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <i\n      aria-hidden=\"true\"\n      class=\"sky-toggle-switch-indicator\"\n      [ngClass]=\"{\n        'sky-toggle-switch-transition': enableIndicatorAnimation\n      }\"\n      role=\"presentation\"\n      >&nbsp;</i\n    >\n    <!-- Non-breaking space needed to align switch to baseline! -->\n  </button>\n\n  <label\n    *ngIf=\"hasLabelComponent\"\n    class=\"sky-toggle-switch-label\"\n    [attr.id]=\"labelElementId\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"> </ng-container>\n  </label>\n</span>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-toggle-switch-label\"></ng-content>\n</ng-template>\n",
-                        styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch-button{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:1 0 46px;line-height:1.428571429}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){border-color:#00b4f1;border-width:2px;padding:0;cursor:pointer}.sky-toggle-switch-button.sky-toggle-switch-checked{background-color:#c1e8fb;border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-button+.sky-toggle-switch-label{margin-left:10px;flex:1 0 auto}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button{background-color:#fff;border-width:1px;flex-basis:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled{border-color:#d2d2d2;cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked{background-color:#c1e8fb;border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus){padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button{background-color:#fff;border-width:1px;flex-basis:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled{border-color:#d2d2d2;cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked{background-color:#c1e8fb;border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus){padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"],
-                        providers: [
-                            SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
-                            SKY_TOGGLE_SWITCH_VALIDATOR,
-                        ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
-                    type: i0.Input
-                }], checked: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], tabIndex: [{
-                    type: i0.Input
-                }], toggleChange: [{
-                    type: i0.Output
-                }], labelComponents: [{
-                    type: i0.ContentChildren,
-                    args: [SkyToggleSwitchLabelComponent]
-                }] } });
-
-    var SkyToggleSwitchModule = /** @class */ (function () {
-        function SkyToggleSwitchModule() {
-        }
-        return SkyToggleSwitchModule;
-    }());
-    SkyToggleSwitchModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyToggleSwitchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [i1.CommonModule, i4.FormsModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] });
-    SkyToggleSwitchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, imports: [[i1.CommonModule, i4.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
-                        imports: [i1.CommonModule, i4.FormsModule],
-                        exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
-                    }]
-            }] });
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.SkyCharacterCounterModule = SkyCharacterCounterModule;
-    exports.SkyCheckboxChange = SkyCheckboxChange;
-    exports.SkyCheckboxModule = SkyCheckboxModule;
-    exports.SkyFileAttachmentsModule = SkyFileAttachmentsModule;
-    exports.SkyFileSizePipe = SkyFileSizePipe;
-    exports.SkyInputBoxHostService = SkyInputBoxHostService;
-    exports.SkyInputBoxModule = SkyInputBoxModule;
-    exports.SkyRadioModule = SkyRadioModule;
-    exports.SkySelectionBoxModule = SkySelectionBoxModule;
-    exports.SkyToggleSwitchModule = SkyToggleSwitchModule;
-    exports["λ1"] = SkyCharacterCounterIndicatorComponent;
-    exports["λ10"] = SkyInputBoxComponent;
-    exports["λ11"] = SkyRadioGroupComponent;
-    exports["λ12"] = SkyRadioLabelComponent;
-    exports["λ13"] = SkyRadioComponent;
-    exports["λ14"] = SkySelectionBoxDescriptionComponent;
-    exports["λ15"] = SkySelectionBoxGridComponent;
-    exports["λ16"] = SkySelectionBoxHeaderComponent;
-    exports["λ17"] = SkySelectionBoxComponent;
-    exports["λ18"] = SkyToggleSwitchLabelComponent;
-    exports["λ19"] = SkyToggleSwitchComponent;
-    exports["λ2"] = SkyCharacterCounterInputDirective;
-    exports["λ3"] = SkyCheckboxComponent;
-    exports["λ4"] = SkyCheckboxLabelComponent;
-    exports["λ5"] = SkyCheckboxRequiredValidatorDirective;
-    exports["λ6"] = SkyFileAttachmentLabelComponent;
-    exports["λ7"] = SkyFileAttachmentComponent;
-    exports["λ8"] = SkyFileDropComponent;
-    exports["λ9"] = SkyFileItemComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=skyux-forms.umd.js.map