@skyux/forms 5.6.2 → 6.0.0-beta.0

package/fesm2015/skyux-forms.mjs

@@ -0,0 +1,2691 @@
+import * as i1 from '@angular/common';
+import { CommonModule, DecimalPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, Directive, Input, forwardRef, EventEmitter, Self, Optional, Output, Injectable, ViewChild, ContentChildren, Pipe, ViewEncapsulation, ContentChild, HostListener, ElementRef } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, CheckboxRequiredValidator, FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i2$1 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import { BehaviorSubject, Subject } from 'rxjs';
+import * as i1$1 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import { takeUntil } from 'rxjs/operators';
+import * as i2$2 from '@skyux/core';
+import { SkyMediaBreakpoints } from '@skyux/core';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-forms' schematic.
+ * To update this file, simply rerun the command.
+ */
+const 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' },
+    },
+};
+class SkyFormsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyFormsResourcesModule {
+}
+SkyFormsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFormsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] });
+SkyFormsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyFormsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyFormsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+class SkyCharacterCounterIndicatorComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.currentCharacterCountLimit = 0;
+        this.currentCharacterCount = 0;
+    }
+    get characterCount() {
+        return this.currentCharacterCount;
+    }
+    set characterCount(count) {
+        this.currentCharacterCount = count;
+        this.changeDetector.markForCheck();
+    }
+    get characterCountLimit() {
+        return this.currentCharacterCountLimit;
+    }
+    set characterCountLimit(limit) {
+        this.currentCharacterCountLimit = limit;
+        this.changeDetector.markForCheck();
+    }
+}
+SkyCharacterCounterIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyCharacterCounterIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-character-counter-indicator', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.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
+ */
+class SkyCharacterCounterInputDirective {
+    constructor() {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._validatorChange = () => { };
+    }
+    /**
+     * 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 skyCharacterCounterLimit(value) {
+        this._skyCharacterCounterLimit = value;
+        this.updateIndicatorLimit(this.skyCharacterCounterLimit);
+        this._validatorChange();
+    }
+    get skyCharacterCounterLimit() {
+        return this._skyCharacterCounterLimit || 0;
+    }
+    validate(control) {
+        const 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,
+                },
+            };
+        }
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorChange = fn;
+    }
+    updateIndicatorCount(count) {
+        if (this.skyCharacterCounterIndicator) {
+            this.skyCharacterCounterIndicator.characterCount = count;
+        }
+    }
+    updateIndicatorLimit(limit) {
+        if (this.skyCharacterCounterIndicator) {
+            this.skyCharacterCounterIndicator.characterCountLimit = limit;
+        }
+    }
+}
+SkyCharacterCounterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SkyCharacterCounterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
+        {
+            provide: NG_VALIDATORS,
+            useExisting: SkyCharacterCounterInputDirective,
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyCharacterCounter]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SkyCharacterCounterInputDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { skyCharacterCounterIndicator: [{
+                type: Input
+            }], skyCharacterCounterLimit: [{
+                type: Input
+            }] } });
+
+class SkyCharacterCounterModule {
+}
+SkyCharacterCounterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCharacterCounterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
+        SkyCharacterCounterIndicatorComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        SkyFormsResourcesModule,
+        SkyI18nModule], exports: [SkyCharacterCounterInputDirective,
+        SkyCharacterCounterIndicatorComponent] });
+SkyCharacterCounterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SkyFormsResourcesModule,
+            SkyI18nModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyCharacterCounterInputDirective,
+                        SkyCharacterCounterIndicatorComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyFormsResourcesModule,
+                        SkyI18nModule,
+                    ],
+                    exports: [
+                        SkyCharacterCounterInputDirective,
+                        SkyCharacterCounterIndicatorComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Fires when users select or deselect the checkbox.
+ */
+class SkyCheckboxChange {
+}
+
+/**
+ * Specifies a label for the checkbox.
+ */
+class SkyCheckboxLabelComponent {
+}
+SkyCheckboxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-checkbox-label', template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" }]
+        }] });
+
+// tslint:disable:no-forward-ref
+const SKY_CHECKBOX_REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => 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
+ */
+class SkyCheckboxRequiredValidatorDirective extends CheckboxRequiredValidator {
+}
+SkyCheckboxRequiredValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SkyCheckboxRequiredValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: `sky-checkbox[required][formControlName],
+             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
+class SkyFormsUtility {
+    /** Coerces a data-bound value (typically a string) to a boolean. */
+    static coerceBooleanProperty(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
+     */
+    static hasRequiredValidation(ngControl) {
+        const abstractControl = ngControl.control;
+        if (abstractControl && abstractControl.validator) {
+            const validator = abstractControl.validator({});
+            if (validator && validator.required) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+/**
+ * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
+ */
+let 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.
+ */
+class SkyCheckboxComponent {
+    constructor(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 EventEmitter();
+        this.isFirstChange = true;
+        this._checked = false;
+        this._checkedChange = new BehaviorSubject(this._checked);
+        this._disabled = false;
+        this._disabledChange = new 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 = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._controlValueAccessorChangeFn = (value) => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * Indicates whether to disable the checkbox.
+     * @default false
+     */
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this._disabled = coercedValue;
+            this._disabledChange.next(this._disabled);
+        }
+    }
+    /**
+     * Indicates whether the checkbox is disabled.
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * 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 checkboxType(value) {
+        if (value) {
+            this._checkboxType = value.toLowerCase();
+        }
+    }
+    get checkboxType() {
+        return this._checkboxType || 'info';
+    }
+    get inputId() {
+        return `input-${this.id}`;
+    }
+    /**
+     * Indicates whether the checkbox is selected.
+     * @default false
+     */
+    set checked(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;
+            }
+        }
+    }
+    /**
+     * Indicates whether the checkbox is selected.
+     */
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * 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 required(value) {
+        this._required = SkyFormsUtility.coerceBooleanProperty(value);
+    }
+    get required() {
+        return this._required;
+    }
+    /**
+     * Fires when users select or deselect the checkbox.
+     */
+    get checkedChange() {
+        return this._checkedChange;
+    }
+    /**
+     * Fires when the selected value changes.
+     */
+    get disabledChange() {
+        return this._disabledChange;
+    }
+    ngOnInit() {
+        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.
+     */
+    writeValue(value) {
+        this.checked = !!value;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnChange(fn) {
+        this._controlValueAccessorChangeFn = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     * Event handler for checkbox input element.
+     * Toggles checked state if element is not disabled.
+     */
+    onInteractionEvent(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();
+        }
+    }
+    onInputBlur() {
+        this.onTouched();
+    }
+    _emitChangeEvent() {
+        const 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
+     */
+    _toggle() {
+        this.checked = !this.checked;
+    }
+}
+SkyCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxComponent, deps: [{ token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
+            type: 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.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], labelledBy: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], checkboxType: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], disabledChange: [{
+                type: Output
+            }] } });
+
+class SkyCheckboxModule {
+}
+SkyCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
+        SkyCheckboxLabelComponent,
+        SkyCheckboxRequiredValidatorDirective], imports: [CommonModule, FormsModule, SkyIconModule], exports: [SkyCheckboxComponent,
+        SkyCheckboxLabelComponent,
+        SkyCheckboxRequiredValidatorDirective] });
+SkyCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxModule, imports: [[CommonModule, FormsModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyCheckboxComponent,
+                        SkyCheckboxLabelComponent,
+                        SkyCheckboxRequiredValidatorDirective,
+                    ],
+                    imports: [CommonModule, FormsModule, SkyIconModule],
+                    exports: [
+                        SkyCheckboxComponent,
+                        SkyCheckboxLabelComponent,
+                        SkyCheckboxRequiredValidatorDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Displays a label above the file attachment element.
+ */
+class SkyFileAttachmentLabelComponent {
+}
+SkyFileAttachmentLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFileAttachmentLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyFileAttachmentLabelComponent, selector: "sky-file-attachment-label", ngImport: i0, 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-file-attachment-label', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyFileAttachmentService {
+    checkFiles(files, minFileSize, maxFileSize, acceptedTypes, validateFn) {
+        const fileResults = [];
+        for (let index = 0; index < files.length; index++) {
+            const 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) {
+                const 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.
+     */
+    hasDirectory(files) {
+        for (let index = 0; index < files.length; index++) {
+            const file = files.item(index);
+            if (file.webkitGetAsEntry &&
+                file.webkitGetAsEntry() &&
+                file.webkitGetAsEntry().isDirectory) {
+                return true;
+            }
+        }
+        return false;
+    }
+    fileTypeRejected(fileType, acceptedTypes) {
+        if (!acceptedTypes) {
+            return false;
+        }
+        if (!fileType) {
+            return true;
+        }
+        const acceptedTypesUpper = acceptedTypes.toUpperCase();
+        const typeArray = acceptedTypesUpper.split(',');
+        return !this.fileTypeInArray(typeArray, fileType.toUpperCase());
+    }
+    fileTypeInArray(typeArray, fileType) {
+        if (typeArray.indexOf(fileType) !== -1) {
+            return true;
+        }
+        for (let index = 0; index < typeArray.length; index++) {
+            const type = typeArray[index];
+            const validSubtype = this.getMimeSubtype(type);
+            if (validSubtype === '*') {
+                if (this.getMimeMainType(type) === this.getMimeMainType(fileType)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    getMimeSubtype(type) {
+        return type.substr(type.indexOf('/') + 1, type.length);
+    }
+    getMimeMainType(type) {
+        return type.substr(0, type.indexOf('/'));
+    }
+}
+SkyFileAttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFileAttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyFileItemService {
+    isFile(fileItem) {
+        const file = fileItem.file;
+        /* tslint:disable */
+        return (file &&
+            file !== undefined &&
+            file !== null &&
+            file.size !== undefined &&
+            file.size !== null);
+        /* tslint:enable */
+    }
+    isImage(fileItem) {
+        const fileTypeUpper = this.getFileTypeUpper(fileItem);
+        const 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;
+    }
+    getFileExtensionUpper(fileItem) {
+        let extension = '', name;
+        /* istanbul ignore else */
+        /* sanity check */
+        if (fileItem) {
+            const file = fileItem.file;
+            if (file) {
+                /* istanbul ignore next */
+                name = file.name || '';
+                /* istanbul ignore next */
+                extension = name.substr(name.lastIndexOf('.')) || '';
+            }
+            else {
+                extension = '';
+            }
+        }
+        return extension.toUpperCase();
+    }
+    getFileTypeUpper(fileItem) {
+        let fileType = '';
+        /* istanbul ignore else */
+        /* sanity check */
+        if (fileItem) {
+            const file = fileItem.file;
+            if (file) {
+                fileType = file.type || '';
+            }
+            else {
+                fileType = '';
+            }
+        }
+        return fileType.toUpperCase();
+    }
+}
+SkyFileItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFileItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileItemService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileItemService, decorators: [{
+            type: Injectable
+        }] });
+
+let uniqueId$1 = 0;
+/**
+ * Provides an element to attach a single local file.
+ */
+class SkyFileAttachmentComponent {
+    constructor(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 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 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 Subject();
+        this._disabled = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onChange = (_) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+        this.labelElementId = `sky-file-attachment-label-${this.fileAttachmentId}`;
+        this.fileDropDescriptionElementId = `sky-file-attachment-drop-description-${this.fileAttachmentId}`;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * Indicates whether to disable the input.
+     * @default false
+     */
+    set disabled(value) {
+        const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
+        if (this._disabled !== newDisabledState) {
+            this._disabled = newDisabledState;
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get hasLabelComponent() {
+        return this.labelComponents.length > 0;
+    }
+    set value(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
+        const isNewValue = value !== this.value && value !== null;
+        if (isNewValue) {
+            this._value = value;
+            this._onChange(value);
+            this.updateFileAttachmentButton();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    ngOnInit() {
+        this.themeSvc.settingsChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((themeSettings) => {
+            this.currentThemeName = themeSettings.currentSettings.theme.name;
+            this.updateFileAttachmentButton();
+        });
+    }
+    ngAfterViewInit() {
+        // 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(() => {
+                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);
+        }
+    }
+    ngAfterContentInit() {
+        // Handles updating classes when label changes
+        this.labelComponents.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.changeDetector.detectChanges();
+        });
+    }
+    isImage() {
+        return this.fileItemService.isImage(this.value);
+    }
+    onDropClicked() {
+        this._onTouched();
+        this.inputEl.nativeElement.click();
+    }
+    fileChangeEvent(fileChangeEvent) {
+        this.handleFiles(fileChangeEvent.target.files);
+    }
+    fileDragEnter(dragEnterEvent) {
+        // Save this target to know when the drag event leaves
+        this.enterEventTarget = dragEnterEvent.target;
+        dragEnterEvent.stopPropagation();
+        dragEnterEvent.preventDefault();
+    }
+    fileDragOver(dragOverEvent) {
+        const transfer = dragOverEvent.dataTransfer;
+        dragOverEvent.stopPropagation();
+        dragOverEvent.preventDefault();
+        if (transfer) {
+            if (transfer.items) {
+                const files = transfer.items;
+                for (let index = 0; index < files.length; index++) {
+                    const 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;
+            }
+        }
+    }
+    fileDrop(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);
+        }
+    }
+    fileDragLeave(dragLeaveEvent) {
+        if (this.enterEventTarget === dragLeaveEvent.target) {
+            this.rejectedOver = false;
+            this.acceptedOver = false;
+        }
+    }
+    deleteFileAttachment() {
+        this.value = undefined;
+        this.changeDetector.markForCheck();
+        this.emitFileChangeEvent(this.value);
+    }
+    getFileName(truncate = true) {
+        if (this.value) {
+            // tslint:disable-next-line: max-line-length
+            const 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;
+        }
+    }
+    ngOnDestroy() {
+        this.fileChange.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    writeValue(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.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
+    }
+    emitClick() {
+        this.fileClick.emit({
+            file: this.value,
+        });
+    }
+    emitFileChangeEvent(currentFile) {
+        if (currentFile && !currentFile.errorType) {
+            this.writeValue(currentFile);
+        }
+        this.fileChange.emit({
+            file: currentFile,
+        });
+        this.inputEl.nativeElement.value = '';
+    }
+    loadFile(file) {
+        const reader = new FileReader();
+        reader.addEventListener('load', (event) => {
+            file.url = event.target.result;
+            this.emitFileChangeEvent(file);
+        });
+        reader.addEventListener('error', (event) => {
+            this.emitFileChangeEvent(file);
+        });
+        reader.addEventListener('abort', (event) => {
+            this.emitFileChangeEvent(file);
+        });
+        reader.readAsDataURL(file.file);
+    }
+    handleFiles(files) {
+        // tslint:disable-next-line: max-line-length
+        const processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
+        for (const file of processedFiles) {
+            if (file.errorType) {
+                this.emitFileChangeEvent(file);
+            }
+            else {
+                this.loadFile(file);
+            }
+        }
+    }
+    updateFileAttachmentButton() {
+        this.showFileAttachmentButton = !(this.value && this.currentThemeName === 'modern');
+        this.changeDetector.markForCheck();
+    }
+}
+SkyFileAttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i1$1.SkyThemeService }, { token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyFileAttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-file-attachment', providers: [SkyFileAttachmentService], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.SkyThemeService }, { type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i4.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { acceptedTypes: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], minFileSize: [{
+                type: Input
+            }], validateFn: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], fileClick: [{
+                type: Output
+            }], required: [{
+                type: Input
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], labelComponents: [{
+                type: 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.
+ */
+class SkyFileDropComponent {
+    constructor(fileAttachmentService) {
+        this.fileAttachmentService = fileAttachmentService;
+        /**
+         * Fires when users add or remove files.
+         */
+        this.filesChanged = new EventEmitter();
+        /**
+         * Fires when the link input box triggers a blur event.
+         */
+        this.linkInputBlur = new EventEmitter();
+        /**
+         * Fires when users add or remove links.
+         */
+        this.linkChanged = new 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;
+    }
+    ngOnDestroy() {
+        this.filesChanged.complete();
+        this.linkChanged.complete();
+        this.linkInputBlur.complete();
+    }
+    dropClicked() {
+        if (!this.noClick) {
+            this.inputEl.nativeElement.click();
+        }
+    }
+    fileChangeEvent(fileChangeEvent) {
+        this.handleFiles(fileChangeEvent.target.files);
+    }
+    fileDragEnter(dragEnterEvent) {
+        // Save this target to know when the drag event leaves
+        this.enterEventTarget = dragEnterEvent.target;
+        dragEnterEvent.stopPropagation();
+        dragEnterEvent.preventDefault();
+    }
+    fileDragOver(dragOverEvent) {
+        const transfer = dragOverEvent.dataTransfer;
+        dragOverEvent.stopPropagation();
+        dragOverEvent.preventDefault();
+        if (transfer) {
+            if (transfer.items) {
+                const files = transfer.items;
+                for (let index = 0; index < files.length; index++) {
+                    const 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;
+            }
+        }
+    }
+    fileDrop(dropEvent) {
+        dropEvent.stopPropagation();
+        dropEvent.preventDefault();
+        this.enterEventTarget = undefined;
+        this.rejectedOver = false;
+        this.acceptedOver = false;
+        if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
+            const hasDirectory = this.fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files);
+            const invalidNumberOfFiles = !this.multiple && dropEvent.dataTransfer.files.length > 1;
+            if (hasDirectory || invalidNumberOfFiles) {
+                return;
+            }
+            this.handleFiles(dropEvent.dataTransfer.files);
+        }
+    }
+    fileDragLeave(dragLeaveEvent) {
+        if (this.enterEventTarget === dragLeaveEvent.target) {
+            this.rejectedOver = false;
+            this.acceptedOver = false;
+        }
+    }
+    addLinkEnter(event) {
+        if (event.which === 13) {
+            this.addLink(event);
+        }
+    }
+    addLink(event) {
+        event.preventDefault();
+        this.linkChanged.emit({ url: this.linkUrl });
+        this.linkUrl = undefined;
+    }
+    onLinkBlur() {
+        this.linkInputBlur.emit();
+    }
+    emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray) {
+        if (totalFiles === rejectedFileArray.length + validFileArray.length) {
+            this.filesChanged.emit({
+                files: validFileArray,
+                rejectedFiles: rejectedFileArray,
+            });
+            this.inputEl.nativeElement.value = '';
+        }
+    }
+    filesRejected(file, validFileArray, rejectedFileArray, totalFiles) {
+        rejectedFileArray.push(file);
+        this.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
+    }
+    loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
+        const reader = new FileReader();
+        reader.addEventListener('load', (event) => {
+            file.url = event.target.result;
+            validFileArray.push(file);
+            fileDrop.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
+        });
+        reader.addEventListener('error', (event) => {
+            fileDrop.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
+        });
+        reader.addEventListener('abort', (event) => {
+            fileDrop.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
+        });
+        reader.readAsDataURL(file.file);
+    }
+    handleFiles(files) {
+        const validFileArray = [];
+        const rejectedFileArray = [];
+        const totalFiles = files.length;
+        // tslint:disable-next-line: max-line-length
+        const processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
+        for (const file of processedFiles) {
+            if (file.errorType) {
+                this.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
+            }
+            else {
+                this.loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
+            }
+        }
+    }
+}
+SkyFileDropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileDropComponent, deps: [{ token: SkyFileAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+SkyFileDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileDropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-file-drop', providers: [SkyFileAttachmentService], 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"] }]
+        }], ctorParameters: function () { return [{ type: SkyFileAttachmentService }]; }, propDecorators: { filesChanged: [{
+                type: Output
+            }], linkInputBlur: [{
+                type: Output
+            }], linkChanged: [{
+                type: Output
+            }], fileUploadAriaLabel: [{
+                type: Input
+            }], linkUploadAriaLabel: [{
+                type: Input
+            }], minFileSize: [{
+                type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], validateFn: [{
+                type: Input
+            }], acceptedTypes: [{
+                type: Input
+            }], noClick: [{
+                type: Input
+            }], allowLinks: [{
+                type: Input
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyFileSizePipe {
+    constructor(decimalPipe, resourcesService) {
+        this.decimalPipe = decimalPipe;
+        this.resourcesService = resourcesService;
+    }
+    transform(input) {
+        let 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;
+        }
+        const roundedSize = Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
+            Math.pow(10, decimalPlaces);
+        const formattedSize = this.decimalPipe.transform(roundedSize, '.0-3');
+        return this.getString(template, formattedSize);
+    }
+    getString(key, ...args) {
+        // TODO: Need to implement the async `getString` method in a breaking change.
+        return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key, ...args);
+    }
+}
+SkyFileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i1.DecimalPipe }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyFileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileSizePipe, name: "skyFileSize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyFileSize',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DecimalPipe }, { type: i2.SkyLibResourcesService }]; } });
+
+class SkyFileItemComponent {
+    constructor(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 EventEmitter();
+        this.differ = this.differs.find({}).create();
+    }
+    get fileName() {
+        return this.fileItem.file.name;
+    }
+    get fileSize() {
+        return this.fileItem.file.size;
+    }
+    get url() {
+        return this.fileItem.url;
+    }
+    ngDoCheck() {
+        const changes = this.differ.diff(this.fileItem);
+        if (changes) {
+            let cls;
+            const extensionUpper = this.fileItemService.getFileExtensionUpper(this.fileItem);
+            let fileTypeUpper;
+            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';
+        }
+    }
+    itemDelete() {
+        this.deleteFile.emit(this.fileItem);
+    }
+    isFile() {
+        return this.fileItemService.isFile(this.fileItem);
+    }
+    isImage() {
+        return this.fileItemService.isImage(this.fileItem);
+    }
+}
+SkyFileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component });
+SkyFileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyFileItemComponent, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, 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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyFileSize": SkyFileSizePipe, "skyLibResources": i2.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileItemComponent, decorators: [{
+            type: 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.KeyValueDiffers }, { type: SkyFileItemService }]; }, propDecorators: { fileItem: [{
+                type: Input
+            }], deleteFile: [{
+                type: Output
+            }] } });
+
+class SkyFileAttachmentsModule {
+}
+SkyFileAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFileAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentsModule, declarations: [SkyFileAttachmentComponent,
+        SkyFileAttachmentLabelComponent,
+        SkyFileDropComponent,
+        SkyFileItemComponent,
+        SkyFileSizePipe], imports: [CommonModule,
+        FormsModule,
+        SkyFormsResourcesModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyThemeModule], exports: [SkyFileAttachmentComponent,
+        SkyFileAttachmentLabelComponent,
+        SkyFileDropComponent,
+        SkyFileItemComponent,
+        SkyFileSizePipe] });
+SkyFileAttachmentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentsModule, providers: [DecimalPipe, SkyFileItemService], imports: [[
+            CommonModule,
+            FormsModule,
+            SkyFormsResourcesModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyFileAttachmentComponent,
+                        SkyFileAttachmentLabelComponent,
+                        SkyFileDropComponent,
+                        SkyFileItemComponent,
+                        SkyFileSizePipe,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyFormsResourcesModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyFileAttachmentComponent,
+                        SkyFileAttachmentLabelComponent,
+                        SkyFileDropComponent,
+                        SkyFileItemComponent,
+                        SkyFileSizePipe,
+                    ],
+                    providers: [DecimalPipe, SkyFileItemService],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyInputBoxAdapterService {
+    focusControl(elRef) {
+        const control = elRef.nativeElement.querySelector('.sky-form-control');
+        /* istanbul ignore else */
+        if (control) {
+            control.focus();
+        }
+    }
+    /**
+     * Returns the inline help element.
+     */
+    getInlineHelpElement(elRef) {
+        return elRef.nativeElement.querySelector('.sky-control-help');
+    }
+    /**
+     * Returns true if the provided element contains the focused element.
+     */
+    isFocusInElement(el) {
+        if (el) {
+            return (el === document.activeElement || el.contains(document.activeElement));
+        }
+        return false;
+    }
+}
+SkyInputBoxAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyInputBoxAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyInputBoxHostService {
+    init(host) {
+        this.host = host;
+    }
+    populate(args) {
+        this.host.populate(args);
+    }
+}
+SkyInputBoxHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyInputBoxHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxHostService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
+            type: 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.
+ */
+class SkyInputBoxComponent {
+    constructor(changeRef, inputBoxHostSvc, adapterService, elementRef) {
+        this.changeRef = changeRef;
+        this.inputBoxHostSvc = inputBoxHostSvc;
+        this.adapterService = adapterService;
+        this.elementRef = elementRef;
+    }
+    get hasErrorsComputed() {
+        if (this.hasErrors === undefined) {
+            return (this.controlHasErrors(this.formControl) ||
+                this.controlHasErrors(this.formControlByName) ||
+                this.controlHasErrors(this.ngModel));
+        }
+        return this.hasErrors;
+    }
+    ngOnInit() {
+        this.inputBoxHostSvc.init(this);
+    }
+    formControlFocusIn() {
+        const inlineHelpEl = this.adapterService.getInlineHelpElement(this.elementRef);
+        if (!this.adapterService.isFocusInElement(inlineHelpEl)) {
+            this.updateHasFocus(true);
+        }
+    }
+    formControlFocusOut() {
+        this.updateHasFocus(false);
+    }
+    onInsetIconClick() {
+        if (!this.disabled) {
+            this.adapterService.focusControl(this.elementRef);
+        }
+    }
+    populate(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;
+    }
+    updateHasFocus(hasFocus) {
+        // 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(() => {
+            this.formControlHasFocus = hasFocus;
+            this.changeRef.markForCheck();
+        });
+    }
+    controlHasErrors(control) {
+        return control && control.invalid && (control.dirty || control.touched);
+    }
+}
+SkyInputBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyInputBoxHostService }, { token: SkyInputBoxAdapterService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyInputBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled" }, providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], ngImport: i0, 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}@-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$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-input-box', providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], encapsulation: ViewEncapsulation.None, 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}@-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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyInputBoxHostService }, { type: SkyInputBoxAdapterService }, { type: i0.ElementRef }]; }, propDecorators: { hasErrors: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], formControl: [{
+                type: ContentChild,
+                args: [FormControlDirective]
+            }], formControlByName: [{
+                type: ContentChild,
+                args: [FormControlName]
+            }], ngModel: [{
+                type: ContentChild,
+                args: [NgModel]
+            }] } });
+
+class SkyInputBoxModule {
+}
+SkyInputBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyInputBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyInputBoxComponent] });
+SkyInputBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxModule, imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInputBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyInputBoxComponent],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [SkyInputBoxComponent],
+                }]
+        }] });
+
+/**
+ * Auto-incrementing integer that generates unique IDs for radio components.
+ */
+let 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
+const SKY_RADIO_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => 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.
+ */
+class SkyRadioComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        /**
+         * Fires when users focus off a radio button.
+         */
+        this.blur = new 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 EventEmitter();
+        this._checked = false;
+        this._checkedChange = new BehaviorSubject(this._checked);
+        this._disabled = false;
+        this._disabledChange = new BehaviorSubject(this._disabled);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.removeUniqueSelectionListener = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChangeCallback = (value) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouchedCallback = () => { };
+    }
+    /**
+     * Indicates whether the radio button is selected.
+     * @default false
+     */
+    set checked(value) {
+        const newCheckedState = !!value;
+        if (this._checked !== newCheckedState) {
+            this._checked = newCheckedState;
+            this._checkedChange.next(this._checked);
+            if (newCheckedState) {
+                this.selectedValue = this.value;
+            }
+        }
+        this.changeDetector.markForCheck();
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * Indicates whether to disable the input.
+     * @default false
+     */
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this._disabled = coercedValue;
+            this._disabledChange.next(this._disabled);
+            this.changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * 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 name(value) {
+        this._name = value;
+        this.changeDetector.markForCheck();
+    }
+    get name() {
+        return this._name;
+    }
+    /**
+     * 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 tabindex(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();
+    }
+    get tabindex() {
+        return this._tabindex || 0;
+    }
+    // For setting the tabindex from the radio group
+    set groupTabIndex(value) {
+        this._tabindex = value;
+        this.changeDetector.markForCheck();
+    }
+    /**
+     * 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 value(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();
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * 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 radioType() {
+        return this._radioType || 'info';
+    }
+    set radioType(value) {
+        if (value) {
+            this._radioType = value.toLowerCase();
+        }
+    }
+    /**
+     * Fires when users select a radio button.
+     */
+    get change() {
+        return this._change;
+    }
+    /**
+     * Fires when the selected value changes.
+     */
+    get checkedChange() {
+        return this._checkedChange;
+    }
+    /**
+     * Fires when the selected value changes.
+     */
+    get disabledChange() {
+        return this._disabledChange;
+    }
+    get inputId() {
+        return `sky-radio-${this.id}-input`;
+    }
+    set selectedValue(value) {
+        if (value !== this._selectedValue) {
+            this._selectedValue = value;
+        }
+    }
+    get selectedValue() {
+        return this._selectedValue;
+    }
+    ngOnDestroy() {
+        this.removeUniqueSelectionListener();
+    }
+    writeValue(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.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    onInputChange(event) {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.checked = true;
+            this._change.emit({
+                source: this,
+                value: this._value,
+            });
+            this.onInputFocusChange(undefined);
+            this.onChangeCallback(this.value);
+        }
+    }
+    onInputFocusChange(event) {
+        this.onTouchedCallback();
+        this.blur.next();
+    }
+}
+SkyRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelledBy: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], radioType: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], checkedChange: [{
+                type: Output
+            }], disabledChange: [{
+                type: Output
+            }] } });
+
+let 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.
+ */
+class SkyRadioGroupComponent {
+    constructor(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 Subject();
+        this._disabled = false;
+        this._name = `sky-radio-group-${nextUniqueId++}`;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * Indicates whether to disable the input.
+     * @default false
+     */
+    set disabled(value) {
+        const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
+        if (this._disabled !== newDisabledState) {
+            this._disabled = newDisabledState;
+            this.updateRadioButtonDisabled();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * 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 name(value) {
+        this._name = value;
+        this.updateRadioButtonNames();
+    }
+    get name() {
+        return this._name;
+    }
+    /**
+     * 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 value(value) {
+        const isNewValue = value !== this._value;
+        /* istanbul ignore else */
+        if (isNewValue) {
+            this._value = value;
+            this.onChange(this._value);
+            this.updateCheckedRadioFromValue();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * 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 tabIndex(value) {
+        if (this._tabIndex !== value) {
+            this._tabIndex = value;
+            this.updateRadioButtonTabIndexes();
+        }
+    }
+    get tabIndex() {
+        return this._tabIndex;
+    }
+    ngAfterContentInit() {
+        // Let child radio components render before updating.
+        setTimeout(() => {
+            this.resetRadioButtons();
+        });
+        // Watch for radio selections.
+        this.watchForSelections();
+        this.radios.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            // Wait for child radio components to finish any rendering updates.
+            setTimeout(() => {
+                this.resetRadioButtons();
+            });
+            // Subscribe to the new radio buttons
+            this.watchForSelections();
+        });
+    }
+    ngAfterViewInit() {
+        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();
+        }
+    }
+    watchForSelections() {
+        this.radios.forEach((radio) => {
+            radio.change
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((change) => {
+                this.onTouched();
+                this.writeValue(change.value);
+            });
+            radio.blur.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+                this.onTouched();
+                this.changeDetector.markForCheck();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * @internal
+     * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    updateRadioButtonDisabled() {
+        if (this.radios) {
+            this.radios.forEach((radio) => {
+                radio.disabled = this.disabled;
+            });
+        }
+    }
+    updateRadioButtonNames() {
+        if (this.radios) {
+            this.radios.forEach((radio) => {
+                radio.name = this.name;
+            });
+        }
+    }
+    updateRadioButtonTabIndexes() {
+        if (this.radios) {
+            this.radios.forEach((radio) => {
+                radio.groupTabIndex = this.tabIndex;
+            });
+        }
+    }
+    updateCheckedRadioFromValue() {
+        if (!this.radios) {
+            return;
+        }
+        this.radios.forEach((radio) => {
+            radio.checked = this._value === radio.value;
+        });
+    }
+    resetRadioButtons() {
+        this.updateCheckedRadioFromValue();
+        this.updateRadioButtonNames();
+        this.updateRadioButtonTabIndexes();
+    }
+}
+SkyRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
+            type: 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.ChangeDetectorRef }, { type: i4.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { ariaLabelledBy: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], radios: [{
+                type: ContentChildren,
+                args: [SkyRadioComponent, { descendants: true }]
+            }] } });
+
+/**
+ * Specifies a label for the radio button.
+ */
+class 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.
+    onClick(event) {
+        event.stopPropagation();
+    }
+}
+SkyRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-radio-label', template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class SkyRadioModule {
+}
+SkyRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
+        SkyRadioGroupComponent,
+        SkyRadioLabelComponent], imports: [CommonModule, FormsModule, SkyIconModule], exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent] });
+SkyRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioModule, imports: [[CommonModule, FormsModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRadioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyRadioComponent,
+                        SkyRadioGroupComponent,
+                        SkyRadioLabelComponent,
+                    ],
+                    imports: [CommonModule, FormsModule, SkyIconModule],
+                    exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent],
+                }]
+        }] });
+
+const RESPONSIVE_CLASS_XS = 'sky-selection-box-container-xs';
+const RESPONSIVE_CLASS_SM = 'sky-selection-box-container-sm';
+const RESPONSIVE_CLASS_MD = 'sky-selection-box-container-md';
+const RESPONSIVE_CLASS_LG = 'sky-selection-box-container-lg';
+const BREAKPOINT_XS_MAX_PIXELS = 767;
+const BREAKPOINT_SM_MIN_PIXELS = 768;
+const BREAKPOINT_SM_MAX_PIXELS = 991;
+const BREAKPOINT_MD_MIN_PIXELS = 992;
+const BREAKPOINT_MD_MAX_PIXELS = 1439;
+/**
+ * @internal
+ */
+class SkySelectionBoxAdapterService {
+    constructor(coreAdapterService, rendererFactory) {
+        this.coreAdapterService = coreAdapterService;
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    /**
+     * Sets focus on the specified element.
+     */
+    focus(el) {
+        el.nativeElement.focus();
+    }
+    /**
+     * Returns a child element with the `.sky-switch` class.
+     * Useful for getting SKY UX-themed radio buttons or checkboxes.
+     */
+    getControl(el) {
+        return el.nativeElement.querySelector('.sky-switch');
+    }
+    /**
+     * Returns a breakpoint based on the width.
+     * @param width Width of the element in pixels.
+     */
+    getBreakpointForWidth(width) {
+        if (width <= BREAKPOINT_XS_MAX_PIXELS) {
+            return SkyMediaBreakpoints.xs;
+        }
+        else if (width >= BREAKPOINT_SM_MIN_PIXELS &&
+            width <= BREAKPOINT_SM_MAX_PIXELS) {
+            return SkyMediaBreakpoints.sm;
+        }
+        else if (width >= BREAKPOINT_MD_MIN_PIXELS &&
+            width <= BREAKPOINT_MD_MAX_PIXELS) {
+            return SkyMediaBreakpoints.md;
+        }
+        else {
+            return SkyMediaBreakpoints.lg;
+        }
+    }
+    /**
+     * Returns the width of the `parentNode` of the provided `element`.
+     */
+    getParentWidth(element) {
+        return element.nativeElement.parentNode.getBoundingClientRect().width;
+    }
+    /**
+     * Returns `true` if the `childEl` is a descendant of the `parentEl`.
+     */
+    isDescendant(parentEl, childEl) {
+        return parentEl.nativeElement.contains(childEl);
+    }
+    /**
+     * Sets the `tabIndex` of all focusable children of the `element` to the provided `tabIndex`.
+     */
+    setChildrenTabIndex(element, tabIndex) {
+        const el = element.nativeElement;
+        const focusableElems = this.coreAdapterService.getFocusableChildren(el, {
+            ignoreVisibility: true,
+        });
+        let index = focusableElems.length;
+        while (index--) {
+            focusableElems[index].tabIndex = tabIndex;
+        }
+    }
+    /**
+     * Adds a responsive CSS class on the provided element based on its current width.
+     */
+    setResponsiveClass(element, breakpoint) {
+        const 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);
+        let newClass;
+        // tslint:disable-next-line: switch-default
+        switch (breakpoint) {
+            case SkyMediaBreakpoints.xs: {
+                newClass = RESPONSIVE_CLASS_XS;
+                break;
+            }
+            case SkyMediaBreakpoints.sm: {
+                newClass = RESPONSIVE_CLASS_SM;
+                break;
+            }
+            case SkyMediaBreakpoints.md: {
+                newClass = RESPONSIVE_CLASS_MD;
+                break;
+            }
+            case SkyMediaBreakpoints.lg: {
+                newClass = RESPONSIVE_CLASS_LG;
+                break;
+            }
+        }
+        this.renderer.addClass(nativeEl, newClass);
+    }
+    /**
+     * Sets the `tabIndex` of the `element` to the provided `tabIndex`.
+     */
+    setTabIndex(element, tabIndex) {
+        const el = element.nativeElement;
+        el.tabIndex = tabIndex;
+    }
+}
+SkySelectionBoxAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i2$2.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkySelectionBoxAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2$2.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
+
+/**
+ * Specifies the description to display in a selection box.
+ */
+class SkySelectionBoxDescriptionComponent {
+}
+SkySelectionBoxDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
+            type: 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.
+ */
+class SkySelectionBoxComponent {
+    constructor(changeDetector, selectionBoxAdapterService) {
+        this.changeDetector = changeDetector;
+        this.selectionBoxAdapterService = selectionBoxAdapterService;
+        this.ngUnsubscribe = new Subject();
+    }
+    set checked(value) {
+        this._checked = value;
+        this.changeDetector.markForCheck();
+    }
+    get checked() {
+        return this._checked;
+    }
+    set disabled(value) {
+        this.selectionBoxAdapterService.setTabIndex(this.selectionBoxEl, value ? -1 : 0);
+        this._disabled = value;
+        this.changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this._disabled || false;
+    }
+    ngAfterViewInit() {
+        // Wait for consumer form controls to initialize before setting selected/disabled states.
+        setTimeout(() => {
+            this.selectionBoxAdapterService.setChildrenTabIndex(this.selectionBoxEl, -1);
+            this.updateCheckedOnControlChange();
+            this.updateDisabledState();
+        });
+    }
+    ngOnDestroy() {
+        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.
+     */
+    onClick(event) {
+        const isControlClick = this.selectionBoxAdapterService.isDescendant(this.controlEl, event.target);
+        if (!isControlClick) {
+            this.selectControl();
+        }
+    }
+    onKeydown(event) {
+        /* istanbul ignore else */
+        if (event.key === ' ') {
+            this.selectControl();
+            event.preventDefault();
+        }
+    }
+    selectControl() {
+        this.selectionBoxAdapterService.getControl(this.controlEl).click();
+        this.selectionBoxAdapterService.focus(this.selectionBoxEl);
+    }
+    updateCheckedOnControlChange() {
+        this.control.checkedChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            this.checked = value;
+        });
+    }
+    updateDisabledState() {
+        this.control.disabledChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            this.disabled = value;
+        });
+    }
+}
+SkySelectionBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }]; }, propDecorators: { control: [{
+                type: Input
+            }], controlEl: [{
+                type: ViewChild,
+                args: ['control', {
+                        read: ElementRef,
+                        static: false,
+                    }]
+            }], selectionBoxEl: [{
+                type: ViewChild,
+                args: ['selectionBox', {
+                        read: ElementRef,
+                        static: false,
+                    }]
+            }] } });
+
+const SKY_SELECTION_BOX_CLASS_NAME = '.sky-selection-box';
+/**
+ * Creates a grid layout for an array of selection boxes.
+ */
+class SkySelectionBoxGridComponent {
+    constructor(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 Subject();
+    }
+    /**
+     * @internal
+     * Specifies how to display the selection boxes in the grid.
+     * @default 'center'
+     */
+    set alignItems(value) {
+        this._alignItems = value;
+    }
+    get alignItems() {
+        return this._alignItems || 'center';
+    }
+    set currentBreakpoint(value) {
+        if (value !== this._currentBreakpoint) {
+            this._currentBreakpoint = value;
+            this.selectionBoxAdapter.setResponsiveClass(this.elementRef, value);
+            this.updateChildrenHeights();
+        }
+    }
+    ngOnInit() {
+        /* istanbul ignore else */
+        if (this.themeSvc) {
+            this.themeSvc.settingsChange
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(() => {
+                this.updateBreakpointClass();
+                this.updateChildrenHeights();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        this.updateBreakpointClass();
+        this.updateChildrenHeights();
+        this.initMutationObserver();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.destroyMutationObserver();
+    }
+    onWindowResize() {
+        this.updateBreakpointClass();
+    }
+    initMutationObserver() {
+        /* istanbul ignore else */
+        if (!this.mutationObserver) {
+            const el = 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(() => {
+                this.mutationObserver = this.mutationObserverSvc.create(() => {
+                    this.updateChildrenHeights();
+                });
+                this.mutationObserver.observe(el, {
+                    characterData: true,
+                    subtree: true,
+                });
+            });
+        }
+    }
+    destroyMutationObserver() {
+        /* istanbul ignore else */
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
+        }
+    }
+    updateBreakpointClass() {
+        const parentWidth = this.selectionBoxAdapter.getParentWidth(this.hostElRef);
+        this.currentBreakpoint =
+            this.selectionBoxAdapter.getBreakpointForWidth(parentWidth);
+    }
+    updateChildrenHeights() {
+        this.coreAdapterService.resetHeight(this.elementRef, SKY_SELECTION_BOX_CLASS_NAME);
+        this.coreAdapterService.syncMaxHeight(this.elementRef, SKY_SELECTION_BOX_CLASS_NAME);
+    }
+}
+SkySelectionBoxGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$1.SkyThemeService }, { token: i2$2.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i2$2.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: ElementRef, static: true }], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyThemeService }, { type: i2$2.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i2$2.MutationObserverService }, { type: i0.NgZone }]; }, propDecorators: { alignItems: [{
+                type: Input
+            }], selectionBoxes: [{
+                type: ContentChildren,
+                args: [SkySelectionBoxComponent, {
+                        read: SkySelectionBoxComponent,
+                    }]
+            }], elementRef: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Specifies the header to display in a selection box.
+ */
+class SkySelectionBoxHeaderComponent {
+}
+SkySelectionBoxHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-selection-box-header', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class SkySelectionBoxModule {
+}
+SkySelectionBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySelectionBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
+        SkySelectionBoxComponent,
+        SkySelectionBoxDescriptionComponent,
+        SkySelectionBoxHeaderComponent], imports: [CommonModule, SkyThemeModule], exports: [SkySelectionBoxGridComponent,
+        SkySelectionBoxComponent,
+        SkySelectionBoxDescriptionComponent,
+        SkySelectionBoxHeaderComponent] });
+SkySelectionBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkySelectionBoxGridComponent,
+                        SkySelectionBoxComponent,
+                        SkySelectionBoxDescriptionComponent,
+                        SkySelectionBoxHeaderComponent,
+                    ],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [
+                        SkySelectionBoxGridComponent,
+                        SkySelectionBoxComponent,
+                        SkySelectionBoxDescriptionComponent,
+                        SkySelectionBoxHeaderComponent,
+                    ],
+                    providers: [SkySelectionBoxAdapterService],
+                }]
+        }] });
+
+/**
+ * Specifies the label to display beside the toggle switch.
+ */
+class SkyToggleSwitchLabelComponent {
+}
+SkyToggleSwitchLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToggleSwitchLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-toggle-switch-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+// tslint:disable:no-forward-ref no-use-before-declare
+const SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyToggleSwitchComponent),
+    multi: true,
+};
+const SKY_TOGGLE_SWITCH_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyToggleSwitchComponent),
+    multi: true,
+};
+// tslint:enable
+let uniqueId = 0;
+class SkyToggleSwitchComponent {
+    constructor(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 EventEmitter();
+        this.enableIndicatorAnimation = false;
+        this.isFirstChange = true;
+        this.ngUnsubscribe = new Subject();
+        this.toggleSwitchId = uniqueId++;
+        this._checked = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+    }
+    /**
+     * Indicates whether the toggle switch is selected.
+     * @default false
+     */
+    set checked(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;
+            }
+        }
+    }
+    get checked() {
+        return this._checked || false;
+    }
+    get hasLabelComponent() {
+        return this.labelComponents.length > 0;
+    }
+    get labelElementId() {
+        return `sky-toggle-switch-label-${this.toggleSwitchId}`;
+    }
+    ngAfterContentInit() {
+        this.labelComponents.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            // 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(() => {
+            this.enableIndicatorAnimation = true;
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    writeValue(value) {
+        this.checked = !!value;
+        this.changeDetector.markForCheck();
+    }
+    validate(control) {
+        if (!this.control) {
+            this.control = control;
+        }
+        return;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.changeDetector.markForCheck();
+    }
+    onButtonClick(event) {
+        event.stopPropagation();
+        this.toggleChecked();
+        this.emitChangeEvent();
+    }
+    onButtonBlur() {
+        this.onTouched();
+    }
+    emitChangeEvent() {
+        this.onChange(this._checked);
+        this.toggleChange.emit({
+            checked: this._checked,
+        });
+    }
+    toggleChecked() {
+        this.checked = !this.checked;
+    }
+}
+SkyToggleSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-toggle-switch', providers: [
+                        SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
+                        SKY_TOGGLE_SWITCH_VALIDATOR,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], toggleChange: [{
+                type: Output
+            }], labelComponents: [{
+                type: ContentChildren,
+                args: [SkyToggleSwitchLabelComponent]
+            }] } });
+
+class SkyToggleSwitchModule {
+}
+SkyToggleSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyToggleSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [CommonModule, FormsModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] });
+SkyToggleSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
+                    imports: [CommonModule, FormsModule],
+                    exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyCharacterCounterModule, SkyCheckboxChange, SkyCheckboxModule, SkyFileAttachmentsModule, SkyFileSizePipe, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchLabelComponent as λ18, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyCheckboxRequiredValidatorDirective as λ5, SkyFileAttachmentLabelComponent as λ6, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
+//# sourceMappingURL=skyux-forms.mjs.map