@skyux/forms 5.0.0 → 5.5.0-alpha.0

package/fesm2015/skyux-forms.js

@@ -3,7 +3,7 @@ import { CommonModule, DecimalPipe } from '@angular/common';
 import * as i4 from '@angular/forms';
 import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, CheckboxRequiredValidator, FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { NgModule, Directive, Input, Component, ChangeDetectionStrategy, EventEmitter, Self, Optional, Output, forwardRef, Injectable, ViewChild, ContentChildren, Pipe, ViewEncapsulation, ContentChild, HostListener, ElementRef } from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, Directive, Input, EventEmitter, Self, Optional, Output, forwardRef, Injectable, ViewChild, ContentChildren, Pipe, ViewEncapsulation, ContentChild, HostListener, ElementRef } from '@angular/core';
 import * as i2 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i2$1 from '@skyux/indicators';
@@ -22,7 +22,51 @@ import { SkyMediaBreakpoints } from '@skyux/core';
  * 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" } },
+    '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) {
@@ -34,25 +78,62 @@ class SkyFormsResourcesProvider {
  */
 class SkyFormsResourcesModule {
 }
-SkyFormsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFormsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] });
-SkyFormsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFormsResourcesModule, providers: [{
+SkyFormsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFormsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] });
+SkyFormsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFormsResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyFormsResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyFormsResourcesProvider,
-                            multi: true
-                        }]
+                            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: "12.2.16", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyCharacterCounterIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-character-counter-indicator',
+                    templateUrl: './character-counter-indicator.component.html',
+                    styleUrls: ['./character-counter-indicator.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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
@@ -78,7 +159,7 @@ class SkyCharacterCounterInputDirective {
     }
     validate(control) {
         const value = control.value;
-        this.updateIndicatorCount(value && value.length || 0);
+        this.updateIndicatorCount((value && value.length) || 0);
         if (!value) {
             return;
         }
@@ -86,13 +167,15 @@ class SkyCharacterCounterInputDirective {
             // This is needed to apply the appropriate error styles to the input.
             control.markAsTouched();
             return {
-                'skyCharacterCounter': {
-                    invalid: value
-                }
+                skyCharacterCounter: {
+                    invalid: value,
+                },
             };
         }
     }
-    registerOnValidatorChange(fn) { this._validatorChange = fn; }
+    registerOnValidatorChange(fn) {
+        this._validatorChange = fn;
+    }
     updateIndicatorCount(count) {
         if (this.skyCharacterCounterIndicator) {
             this.skyCharacterCounterIndicator.characterCount = count;
@@ -104,15 +187,15 @@ class SkyCharacterCounterInputDirective {
         }
     }
 }
-SkyCharacterCounterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SkyCharacterCounterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
+SkyCharacterCounterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SkyCharacterCounterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
         {
             provide: NG_VALIDATORS,
             useExisting: SkyCharacterCounterInputDirective,
-            multi: true
-        }
+            multi: true,
+        },
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyCharacterCounter]',
@@ -120,9 +203,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         {
                             provide: NG_VALIDATORS,
                             useExisting: SkyCharacterCounterInputDirective,
-                            multi: true
-                        }
-                    ]
+                            multi: true,
+                        },
+                    ],
                 }]
         }], propDecorators: { skyCharacterCounterIndicator: [{
                 type: Input
@@ -130,74 +213,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: Input
             }] } });
 
-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: "12.2.7", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyCharacterCounterIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.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\n  aria-live=\"polite\"\n  class=\"sky-screen-reader-only\"\n>\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }} {{ characterCountLimit }}.\n  {{ characterCount > characterCountLimit ? ('skyux_character_count_over_limit' | skyLibResources ) : '' }}\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: "12.2.7", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-character-counter-indicator',
-                    templateUrl: './character-counter-indicator.component.html',
-                    styleUrls: ['./character-counter-indicator.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
-
 class SkyCharacterCounterModule {
 }
-SkyCharacterCounterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCharacterCounterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
+SkyCharacterCounterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCharacterCounterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.7", ngImport: i0, type: SkyCharacterCounterModule, imports: [[
+SkyCharacterCounterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCharacterCounterModule, imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
             SkyFormsResourcesModule,
-            SkyI18nModule
+            SkyI18nModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         SkyCharacterCounterInputDirective,
-                        SkyCharacterCounterIndicatorComponent
+                        SkyCharacterCounterIndicatorComponent,
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         SkyFormsResourcesModule,
-                        SkyI18nModule
+                        SkyI18nModule,
                     ],
                     exports: [
                         SkyCharacterCounterInputDirective,
-                        SkyCharacterCounterIndicatorComponent
-                    ]
+                        SkyCharacterCounterIndicatorComponent,
+                    ],
                 }]
         }] });
 
@@ -298,9 +348,9 @@ class SkyCheckboxComponent {
      * 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'
+     * 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) {
@@ -364,7 +414,8 @@ class SkyCheckboxComponent {
     ngOnInit() {
         if (this.ngControl) {
             // Backwards compatibility support for anyone still using Validators.Required.
-            this.required = this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
+            this.required =
+                this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
         }
     }
     /**
@@ -422,14 +473,14 @@ class SkyCheckboxComponent {
         this.checked = !this.checked;
     }
 }
-SkyCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.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  <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 *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div\n      class=\"sky-checkbox-icon-modern\"\n    >\n      <sky-icon *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template\n        #checkedTemplate\n      >\n        <sky-icon *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\">\n  </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: "12.2.7", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
+SkyCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", required: "required" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, ngImport: i0, 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: "12.2.16", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-checkbox',
                     templateUrl: './checkbox.component.html',
-                    styleUrls: ['./checkbox.component.scss']
+                    styleUrls: ['./checkbox.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
                     type: Self
@@ -468,13 +519,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkyCheckboxLabelComponent {
 }
-SkyCheckboxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.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: "12.2.7", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
+SkyCheckboxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-checkbox-label',
-                    templateUrl: './checkbox-label.component.html'
+                    templateUrl: './checkbox-label.component.html',
                 }]
         }] });
 
@@ -482,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 const SKY_CHECKBOX_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyCheckboxRequiredValidatorDirective),
-    multi: true
+    multi: true,
 };
 // tslint:enable
 /**
@@ -495,50 +546,41 @@ const SKY_CHECKBOX_REQUIRED_VALIDATOR = {
  */
 class SkyCheckboxRequiredValidatorDirective extends CheckboxRequiredValidator {
 }
-SkyCheckboxRequiredValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SkyCheckboxRequiredValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.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: "12.2.7", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
+SkyCheckboxRequiredValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SkyCheckboxRequiredValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxRequiredValidatorDirective, selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]", providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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]
+                    providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR],
                 }]
         }] });
 
 class SkyCheckboxModule {
 }
-SkyCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
+SkyCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
         SkyCheckboxLabelComponent,
-        SkyCheckboxRequiredValidatorDirective], imports: [CommonModule,
-        FormsModule,
-        SkyIconModule], exports: [SkyCheckboxComponent,
+        SkyCheckboxRequiredValidatorDirective], imports: [CommonModule, FormsModule, SkyIconModule], exports: [SkyCheckboxComponent,
         SkyCheckboxLabelComponent,
         SkyCheckboxRequiredValidatorDirective] });
-SkyCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCheckboxModule, imports: [[
-            CommonModule,
-            FormsModule,
-            SkyIconModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCheckboxModule, decorators: [{
+SkyCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxModule, imports: [[CommonModule, FormsModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         SkyCheckboxComponent,
                         SkyCheckboxLabelComponent,
-                        SkyCheckboxRequiredValidatorDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SkyIconModule
+                        SkyCheckboxRequiredValidatorDirective,
                     ],
+                    imports: [CommonModule, FormsModule, SkyIconModule],
                     exports: [
                         SkyCheckboxComponent,
                         SkyCheckboxLabelComponent,
-                        SkyCheckboxRequiredValidatorDirective
-                    ]
+                        SkyCheckboxRequiredValidatorDirective,
+                    ],
                 }]
         }] });
 
@@ -547,17 +589,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkyFileAttachmentLabelComponent {
 }
-SkyFileAttachmentLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFileAttachmentLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyFileAttachmentLabelComponent, selector: "sky-file-attachment-label", ngImport: i0, template: "<span\n  class=\"sky-control-label\"\n>\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: "12.2.7", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
+SkyFileAttachmentLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFileAttachmentLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-file-attachment-label',
                     templateUrl: './file-attachment-label.component.html',
-                    styleUrls: [
-                        'file-attachment-label.component.scss'
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    styleUrls: ['file-attachment-label.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -569,7 +609,7 @@ class SkyFileAttachmentService {
         let fileResults = [];
         for (let index = 0; index < files.length; index++) {
             let fileItem = {
-                file: files.item(index)
+                file: files.item(index),
             };
             if (fileItem.file.size < minFileSize) {
                 fileItem.errorType = 'minFileSize';
@@ -606,7 +646,9 @@ class SkyFileAttachmentService {
     hasDirectory(files) {
         for (let index = 0; index < files.length; index++) {
             const file = files.item(index);
-            if (file.webkitGetAsEntry && file.webkitGetAsEntry() && file.webkitGetAsEntry().isDirectory) {
+            if (file.webkitGetAsEntry &&
+                file.webkitGetAsEntry() &&
+                file.webkitGetAsEntry().isDirectory) {
                 return true;
             }
         }
@@ -645,9 +687,9 @@ class SkyFileAttachmentService {
         return type.substr(0, type.indexOf('/'));
     }
 }
-SkyFileAttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFileAttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
+SkyFileAttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFileAttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
             type: Injectable
         }] });
 
@@ -658,8 +700,11 @@ class SkyFileItemService {
     isFile(fileItem) {
         let file = fileItem.file;
         /* tslint:disable */
-        return file && file !== undefined && file !== null && file.size !== undefined
-            && file.size !== null;
+        return (file &&
+            file !== undefined &&
+            file !== null &&
+            file.size !== undefined &&
+            file.size !== null);
         /* tslint:enable */
     }
     isImage(fileItem) {
@@ -712,9 +757,9 @@ class SkyFileItemService {
         return fileType.toUpperCase();
     }
 }
-SkyFileItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFileItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileItemService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileItemService, decorators: [{
+SkyFileItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFileItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemService, decorators: [{
             type: Injectable
         }] });
 
@@ -817,12 +862,13 @@ class SkyFileAttachmentComponent {
         if (this.ngControl) {
             setTimeout(() => {
                 this.ngControl.control.setValue(this.value, {
-                    emitEvent: false
+                    emitEvent: false,
                 });
                 this.changeDetector.markForCheck();
             });
             // Backwards compatibility support for anyone still using Validators.Required.
-            this.required = this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
+            this.required =
+                this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
         }
     }
     ngAfterContentInit() {
@@ -858,7 +904,8 @@ class SkyFileAttachmentComponent {
                 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)) {
+                    if (file.type &&
+                        this.fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
                         this.rejectedOver = true;
                         this.acceptedOver = false;
                         return;
@@ -908,7 +955,9 @@ class SkyFileAttachmentComponent {
     getFileName(truncate = true) {
         if (this.value) {
             // tslint:disable-next-line: max-line-length
-            let dropName = this.fileItemService.isFile(this.value) && this.value.file.name ? this.value.file.name : this.value.url;
+            let 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) + '...';
             }
@@ -925,8 +974,12 @@ class SkyFileAttachmentComponent {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
     writeValue(value) {
         this.value = value;
         this.changeDetector.markForCheck();
@@ -942,7 +995,7 @@ class SkyFileAttachmentComponent {
     }
     emitClick() {
         this.fileClick.emit({
-            file: this.value
+            file: this.value,
         });
     }
     emitFileChangeEvent(currentFile) {
@@ -950,7 +1003,7 @@ class SkyFileAttachmentComponent {
             this.writeValue(currentFile);
         }
         this.fileChange.emit({
-            file: currentFile
+            file: currentFile,
         });
         this.inputEl.nativeElement.value = '';
     }
@@ -985,20 +1038,16 @@ class SkyFileAttachmentComponent {
         this.changeDetector.markForCheck();
     }
 }
-SkyFileAttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.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\n  class=\"sky-file-attachment-wrapper\"\n>\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\"\n    ></ng-container>\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{ 'sky-file-attachment-accept': acceptedOver, 'sky-file-attachment-reject': rejectedOver }\"\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 *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\n        icon=\"folder-open-o\"\n      ></sky-icon>\n      {{ value ?\n        ('skyux_file_attachment_button_label_replace_file' | skyLibResources) :\n        ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n      }}\n    </button>\n    <sky-icon *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 *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a *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\n        class=\"sky-file-attachment-none sky-deemphasized\"\n      >\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_file_attachment_file_item_delete' | skyLibResources\"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n    >\n      <sky-icon\n        icon=\"trash-o\"\n        size=\"md\"\n      >\n      </sky-icon>\n    </button>\n  </div>\n\n  <img *ngIf=\"value && isImage()\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"'skyux_file_attachment_file_upload_image_preview_alt_text' | skyLibResources\"\n    [src]=\"value.url\"\n  />\n</div>\n\n<ng-template\n  #labelContent\n>\n    <ng-content\n      select=\"sky-file-attachment-label\"\n    ></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: "12.2.7", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
+SkyFileAttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", maxFileSize: "maxFileSize", minFileSize: "minFileSize", validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, providers: [SkyFileAttachmentService], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\n  </div>\n  <div\n    class=\"\n      sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n    \"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-file-attachment-drop-description\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <button\n      *ngIf=\"showFileAttachmentButton\"\n      class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n      [disabled]=\"disabled\"\n      (click)=\"onDropClicked()\"\n    >\n      <sky-icon icon=\"folder-open-o\"></sky-icon>\n      {{\n        value\n          ? ('skyux_file_attachment_button_label_replace_file'\n            | skyLibResources)\n          : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n      }}\n    </button>\n    <sky-icon\n      *ngIf=\"value && !isImage() && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    >\n    </sky-icon>\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"getFileName(false)\"\n        (click)=\"emitClick()\"\n      >\n        {{ getFileName() }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_delete' | skyLibResources\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage()\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\"></ng-content>\n</ng-template>\n", styles: [".sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], components: [{ type: i2$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: "12.2.16", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-file-attachment',
                     templateUrl: './file-attachment.component.html',
                     styleUrls: ['./file-attachment.component.scss'],
-                    providers: [
-                        SkyFileAttachmentService
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    providers: [SkyFileAttachmentService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.SkyThemeService }, { type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i4.NgControl, decorators: [{
                     type: Self
@@ -1104,7 +1153,8 @@ class SkyFileDropComponent {
                 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)) {
+                    if (file.type &&
+                        this.fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
                         this.rejectedOver = true;
                         this.acceptedOver = false;
                         return;
@@ -1114,8 +1164,8 @@ class SkyFileDropComponent {
                     this.rejectedOver = false;
                     this.acceptedOver = true;
                 }
-            }
-            else /* istanbul ignore else: untestable */ if (transfer.files) {
+            } /* 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
@@ -1162,7 +1212,7 @@ class SkyFileDropComponent {
         if (totalFiles === rejectedFileArray.length + validFileArray.length) {
             this.filesChanged.emit({
                 files: validFileArray,
-                rejectedFiles: rejectedFileArray
+                rejectedFiles: rejectedFileArray,
             });
             this.inputEl.nativeElement.value = '';
         }
@@ -1203,19 +1253,15 @@ class SkyFileDropComponent {
         }
     }
 }
-SkyFileDropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileDropComponent, deps: [{ token: SkyFileAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-SkyFileDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.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\" [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\">\n  <div\n    class=\"sky-file-drop-col\"\n    [ngClass]=\"{ 'sky-file-drop-accept': acceptedOver, 'sky-file-drop-reject': rejectedOver }\">\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]=\"fileUploadAriaLabel || ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\">\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    <div class=\"sky-file-drop-contents sky-padding-even-default\" *ngIf=\"customEl.children.length === 0\">\n      <div class=\"sky-file-drop-contents-not-over\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{ 'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources }}\n        </div>\n        <div class=\"sky-file-drop-text\">\n          {{ 'skyux_file_attachment_file_upload_or_click_to_browse' | skyLibResources }}\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          {{ 'skyux_file_attachment_file_upload_drop_files_here' | skyLibResources }}\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          {{ 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources }}\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            {{ 'skyux_file_attachment_file_upload_paste_link' | skyLibResources }}\n          </div>\n        </div>\n        <div class=\"sky-form-group\">\n          <input\n            type=\"text\"\n            class=\"sky-form-control\"\n            [attr.aria-label]=\"linkUploadAriaLabel || ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\"\n            [attr.placeholder]=\"'skyux_file_attachment_file_upload_link_placeholder' | skyLibResources\"\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          {{ 'skyux_file_attachment_file_upload_paste_link_done' | skyLibResources }}\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: "12.2.7", ngImport: i0, type: SkyFileDropComponent, decorators: [{
+SkyFileDropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileDropComponent, deps: [{ token: SkyFileAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+SkyFileDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, 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: "12.2.16", ngImport: i0, type: SkyFileDropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-file-drop',
                     templateUrl: './file-drop.component.html',
                     styleUrls: ['./file-drop.component.scss'],
-                    providers: [
-                        SkyFileAttachmentService
-                    ]
+                    providers: [SkyFileAttachmentService],
                 }]
         }], ctorParameters: function () { return [{ type: SkyFileAttachmentService }]; }, propDecorators: { filesChanged: [{
                 type: Output
@@ -1282,7 +1328,8 @@ class SkyFileSizePipe {
             decimalPlaces = 1;
         }
         roundedSize =
-            Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) / Math.pow(10, decimalPlaces);
+            Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
+                Math.pow(10, decimalPlaces);
         formattedSize = this.decimalPipe.transform(roundedSize, '.0-3');
         return this.getString(template, formattedSize);
     }
@@ -1291,12 +1338,12 @@ class SkyFileSizePipe {
         return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key, ...args);
     }
 }
-SkyFileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.2.7", ngImport: i0, type: SkyFileSizePipe, name: "skyFileSize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileSizePipe, decorators: [{
+SkyFileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i1.DecimalPipe }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyFileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileSizePipe, name: "skyFileSize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileSizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'skyFileSize'
+                    name: 'skyFileSize',
                 }]
         }], ctorParameters: function () { return [{ type: i1.DecimalPipe }, { type: i2.SkyLibResourcesService }]; } });
 
@@ -1391,14 +1438,14 @@ class SkyFileItemComponent {
         return this.fileItemService.isImage(this.fileItem);
     }
 }
-SkyFileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.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 type=\"button\" class=\"sky-btn sky-btn-default sky-file-item-btn-delete\" [attr.aria-label]=\"'skyux_file_attachment_file_item_delete' | skyLibResources\" (click)=\"itemDelete()\">\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]=\"'skyux_file_attachment_file_upload_image_preview_alt_text' | skyLibResources\" />\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: "12.2.7", ngImport: i0, type: SkyFileItemComponent, decorators: [{
+SkyFileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component });
+SkyFileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyFileItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-file-item',
                     templateUrl: './file-item.component.html',
-                    styleUrls: ['./file-item.component.scss']
+                    styleUrls: ['./file-item.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }]; }, propDecorators: { fileItem: [{
                 type: Input
@@ -1408,8 +1455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyFileAttachmentsModule {
 }
-SkyFileAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFileAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentsModule, declarations: [SkyFileAttachmentComponent,
+SkyFileAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFileAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, declarations: [SkyFileAttachmentComponent,
         SkyFileAttachmentLabelComponent,
         SkyFileDropComponent,
         SkyFileItemComponent,
@@ -1423,18 +1470,15 @@ SkyFileAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         SkyFileDropComponent,
         SkyFileItemComponent,
         SkyFileSizePipe] });
-SkyFileAttachmentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentsModule, providers: [
-        DecimalPipe,
-        SkyFileItemService
-    ], imports: [[
+SkyFileAttachmentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, providers: [DecimalPipe, SkyFileItemService], imports: [[
             CommonModule,
             FormsModule,
             SkyFormsResourcesModule,
             SkyI18nModule,
             SkyIconModule,
-            SkyThemeModule
+            SkyThemeModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1442,7 +1486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         SkyFileAttachmentLabelComponent,
                         SkyFileDropComponent,
                         SkyFileItemComponent,
-                        SkyFileSizePipe
+                        SkyFileSizePipe,
                     ],
                     imports: [
                         CommonModule,
@@ -1450,19 +1494,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         SkyFormsResourcesModule,
                         SkyI18nModule,
                         SkyIconModule,
-                        SkyThemeModule
+                        SkyThemeModule,
                     ],
                     exports: [
                         SkyFileAttachmentComponent,
                         SkyFileAttachmentLabelComponent,
                         SkyFileDropComponent,
                         SkyFileItemComponent,
-                        SkyFileSizePipe
+                        SkyFileSizePipe,
                     ],
-                    providers: [
-                        DecimalPipe,
-                        SkyFileItemService
-                    ]
+                    providers: [DecimalPipe, SkyFileItemService],
                 }]
         }] });
 
@@ -1488,14 +1529,14 @@ class SkyInputBoxAdapterService {
      */
     isFocusInElement(el) {
         if (el) {
-            return el === document.activeElement || el.contains(document.activeElement);
+            return (el === document.activeElement || el.contains(document.activeElement));
         }
         return false;
     }
 }
-SkyInputBoxAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyInputBoxAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
+SkyInputBoxAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyInputBoxAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
             type: Injectable
         }] });
 
@@ -1510,9 +1551,9 @@ class SkyInputBoxHostService {
         this.host.populate(args);
     }
 }
-SkyInputBoxHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyInputBoxHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxHostService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
+SkyInputBoxHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyInputBoxHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxHostService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
             type: Injectable
         }] });
 
@@ -1532,9 +1573,9 @@ class SkyInputBoxComponent {
     }
     get hasErrorsComputed() {
         if (this.hasErrors === undefined) {
-            return this.controlHasErrors(this.formControl) ||
+            return (this.controlHasErrors(this.formControl) ||
                 this.controlHasErrors(this.formControlByName) ||
-                this.controlHasErrors(this.ngModel);
+                this.controlHasErrors(this.ngModel));
         }
         return this.hasErrors;
     }
@@ -1576,24 +1617,18 @@ class SkyInputBoxComponent {
         return control && control.invalid && (control.dirty || control.touched);
     }
 }
-SkyInputBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.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 *skyThemeIf=\"'default'\"\n    class=\"sky-input-box\"\n    [ngClass]=\"{\n      'sky-input-box-disabled': disabled\n    }\"\n  >\n    <div\n      class=\"sky-form-group\"\n    >\n      <div\n        class=\"sky-input-box-label-wrapper\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"labelTemplate\"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"inlineHelpTemplate\"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"characterCountTemplate\"\n        ></ng-container>\n      </div>\n      <div\n        class=\"sky-input-group\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"buttonsLeftTemplate\"\n        ></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\n            *ngTemplateOutlet=\"iconsInsetLeftTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"inputTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"buttonsInsetTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"iconsInsetTemplate\"\n          ></ng-container>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate\"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"errorLabelTemplate\"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div *skyThemeIf=\"'modern'\"\n    class=\"sky-input-box\"\n    [ngClass]=\"{\n      'sky-input-box-disabled': disabled\n    }\"\n  >\n    <div\n      class=\"sky-input-box-group\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"buttonsLeftTemplate\"\n      ></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\n          class=\"sky-form-group\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"iconsInsetLeftTemplate\"\n          ></ng-container>\n          <div\n            class=\"sky-input-box-form-group-inner\"\n          >\n            <div\n              class=\"sky-input-box-label-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"labelTemplate\"\n              ></ng-container>\n              <ng-container\n                *ngTemplateOutlet=\"inlineHelpTemplate\"\n              ></ng-container>\n              <ng-container\n                *ngTemplateOutlet=\"characterCountTemplate\"\n              ></ng-container>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"inputTemplate\"\n            ></ng-container>\n          </div>\n          <ng-container\n            *ngTemplateOutlet=\"buttonsInsetTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"iconsInsetTemplate\"\n          ></ng-container>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"buttonsTemplate\"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"errorLabelTemplate\"\n    ></ng-container>\n  </div>\n\n<ng-template\n  #labelTemplate\n>\n  <ng-content\n    select=\".sky-control-label\"\n  ></ng-content>\n</ng-template>\n\n<ng-template\n  #inlineHelpTemplate\n>\n  <ng-content\n    select=\".sky-control-help\"\n  ></ng-content>\n</ng-template>\n\n<ng-template\n  #characterCountTemplate\n>\n  <ng-content\n    select=\"sky-character-counter-indicator\"\n  ></ng-content>\n</ng-template>\n\n<ng-template\n  #inputTemplate\n>\n  <ng-content\n    select=\".sky-form-control\"\n  ></ng-content>\n  <ng-container\n    *ngTemplateOutlet=\"hostInputTemplate\"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #buttonsLeftTemplate\n>\n  <ng-content\n    select=\".sky-input-group-btn.sky-input-box-btn-left\"\n  ></ng-content>\n  <ng-container\n    *ngTemplateOutlet=\"hostButtonsLeftTemplate\"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #buttonsTemplate\n>\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\n    *ngTemplateOutlet=\"hostButtonsTemplate\"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #buttonsInsetTemplate\n>\n  <ng-content\n    select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n  ></ng-content>\n  <ng-container\n    *ngTemplateOutlet=\"hostButtonsInsetTemplate\"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #iconsInsetTemplate\n>\n  <div\n    class=\"sky-input-box-icon-inset-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n    ></ng-content>\n    <ng-container\n      *ngTemplateOutlet=\"hostIconsInsetTemplate\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template\n  #iconsInsetLeftTemplate\n>\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\n      *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template\n  #errorLabelTemplate\n>\n  <ng-content\n    select=\".sky-error-label\"\n  ></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:auto;width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{background-color:#fff;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0;padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:0;padding-top:5px}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{resize:vertical}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:auto;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: "12.2.7", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
+SkyInputBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:0;padding-top:5px}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{resize:vertical}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], directives: [{ type: i1$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: "12.2.16", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-input-box',
                     templateUrl: './input-box.component.html',
                     styleUrls: ['./input-box.component.scss'],
-                    providers: [
-                        SkyInputBoxAdapterService,
-                        SkyInputBoxHostService
-                    ],
+                    providers: [SkyInputBoxAdapterService, SkyInputBoxHostService],
                     // Note that change detection is not set to OnPush; default change detection allows the
                     // invalid CSS class to be added when the content control's invalid/dirty state changes.
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyInputBoxHostService }, { type: SkyInputBoxAdapterService }, { type: i0.ElementRef }]; }, propDecorators: { hasErrors: [{
                 type: Input
@@ -1612,26 +1647,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyInputBoxModule {
 }
-SkyInputBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyInputBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
-        SkyThemeModule], exports: [SkyInputBoxComponent] });
-SkyInputBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxModule, imports: [[
-            CommonModule,
-            SkyThemeModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyInputBoxModule, decorators: [{
+SkyInputBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyInputBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyInputBoxComponent] });
+SkyInputBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxModule, imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyInputBoxComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyThemeModule
-                    ],
-                    exports: [
-                        SkyInputBoxComponent
-                    ]
+                    declarations: [SkyInputBoxComponent],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [SkyInputBoxComponent],
                 }]
         }] });
 
@@ -1647,7 +1671,7 @@ let nextUniqueId$1 = 0;
 const SKY_RADIO_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyRadioComponent),
-    multi: true
+    multi: true,
 };
 // tslint:enable
 /**
@@ -1840,7 +1864,7 @@ class SkyRadioComponent {
             this.checked = true;
             this._change.emit({
                 source: this,
-                value: this._value
+                value: this._value,
             });
             this.onInputFocusChange(undefined);
             this.onChangeCallback(this.value);
@@ -1851,20 +1875,16 @@ class SkyRadioComponent {
         this.blur.next();
     }
 }
-SkyRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyRadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.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 || checked\"\n      class=\"sky-radio-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'circle'\"\n    >\n    </sky-icon>\n    <div\n      class=\"sky-radio-icon-modern\"\n    >\n      <sky-icon *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <div *ngIf=\"checked\"\n          class=\"sky-radio-icon-modern-checked sky-rounded-circle\"\n        >\n        </div>\n      </ng-template>\n    </div>\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-radio-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-radio-icon-default{display:none}:host-context(.sky-theme-modern) .sky-radio-icon-modern{display:block}:host-context(.sky-theme-modern) .sky-radio-icon-modern-checked{background-color:#1870b8;height:10px;width:10px}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-radio-icon-default{display:none}.sky-theme-modern .sky-radio-icon-modern{display:block}.sky-theme-modern .sky-radio-icon-modern-checked{background-color:#1870b8;height:10px;width:10px}.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: "12.2.7", ngImport: i0, type: SkyRadioComponent, decorators: [{
+SkyRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", icon: "icon", radioType: "radioType" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, 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: "12.2.16", ngImport: i0, type: SkyRadioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-radio',
                     templateUrl: './radio.component.html',
                     styleUrls: ['./radio.component.scss'],
-                    providers: [
-                        SKY_RADIO_CONTROL_VALUE_ACCESSOR
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checked: [{
                 type: Input
@@ -1905,13 +1925,13 @@ class SkyRadioLabelComponent {
         event.stopPropagation();
     }
 }
-SkyRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.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: "12.2.7", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
+SkyRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-radio-label',
-                    templateUrl: './radio-label.component.html'
+                    templateUrl: './radio-label.component.html',
                 }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
@@ -1934,7 +1954,7 @@ class SkyRadioGroupComponent {
          * 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"
+         * @default false
          */
         this.required = false;
         this.ngUnsubscribe = new Subject();
@@ -1950,7 +1970,7 @@ class SkyRadioGroupComponent {
     }
     /**
      * Indicates whether to disable the input.
-     * @default "false"
+     * @default false
      */
     set disabled(value) {
         const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);
@@ -2015,9 +2035,7 @@ class SkyRadioGroupComponent {
         });
         // Watch for radio selections.
         this.watchForSelections();
-        this.radios.changes
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
+        this.radios.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
             // Wait for child radio components to finish any rendering updates.
             setTimeout(() => {
                 this.resetRadioButtons();
@@ -2029,7 +2047,8 @@ class SkyRadioGroupComponent {
     ngAfterViewInit() {
         if (this.ngControl) {
             // Backwards compatibility support for anyone still using Validators.Required.
-            this.required = this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
+            this.required =
+                this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
             // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
             this.changeDetector.detectChanges();
         }
@@ -2042,9 +2061,7 @@ class SkyRadioGroupComponent {
                 this.onTouched();
                 this.writeValue(change.value);
             });
-            radio.blur
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(() => {
+            radio.blur.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
                 this.onTouched();
                 this.changeDetector.markForCheck();
             });
@@ -2072,21 +2089,21 @@ class SkyRadioGroupComponent {
     }
     updateRadioButtonDisabled() {
         if (this.radios) {
-            this.radios.forEach(radio => {
+            this.radios.forEach((radio) => {
                 radio.disabled = this.disabled;
             });
         }
     }
     updateRadioButtonNames() {
         if (this.radios) {
-            this.radios.forEach(radio => {
+            this.radios.forEach((radio) => {
                 radio.name = this.name;
             });
         }
     }
     updateRadioButtonTabIndexes() {
         if (this.radios) {
-            this.radios.forEach(radio => {
+            this.radios.forEach((radio) => {
                 radio.groupTabIndex = this.tabIndex;
             });
         }
@@ -2096,7 +2113,7 @@ class SkyRadioGroupComponent {
             return;
         }
         this.radios.forEach((radio) => {
-            radio.checked = (this._value === radio.value);
+            radio.checked = this._value === radio.value;
         });
     }
     resetRadioButtons() {
@@ -2105,13 +2122,13 @@ class SkyRadioGroupComponent {
         this.updateRadioButtonTabIndexes();
     }
 }
-SkyRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.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: "12.2.7", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
+SkyRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", name: "name", required: "required", value: "value", tabIndex: "tabIndex" }, queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, 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: "12.2.16", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-radio-group',
-                    templateUrl: './radio-group.component.html'
+                    templateUrl: './radio-group.component.html',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i4.NgControl, decorators: [{
                     type: Self
@@ -2138,37 +2155,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyRadioModule {
 }
-SkyRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
+SkyRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.7", ngImport: i0, type: SkyRadioModule, imports: [[
-            CommonModule,
-            FormsModule,
-            SkyIconModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyRadioModule, decorators: [{
+        SkyRadioLabelComponent], imports: [CommonModule, FormsModule, SkyIconModule], exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent] });
+SkyRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioModule, imports: [[CommonModule, FormsModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         SkyRadioComponent,
                         SkyRadioGroupComponent,
-                        SkyRadioLabelComponent
+                        SkyRadioLabelComponent,
                     ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SkyIconModule
-                    ],
-                    exports: [
-                        SkyRadioComponent,
-                        SkyRadioGroupComponent,
-                        SkyRadioLabelComponent
-                    ]
+                    imports: [CommonModule, FormsModule, SkyIconModule],
+                    exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent],
                 }]
         }] });
 
@@ -2210,10 +2211,12 @@ class SkySelectionBoxAdapterService {
         if (width <= BREAKPOINT_XS_MAX_PIXELS) {
             return SkyMediaBreakpoints.xs;
         }
-        else if (width >= BREAKPOINT_SM_MIN_PIXELS && width <= BREAKPOINT_SM_MAX_PIXELS) {
+        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) {
+        else if (width >= BREAKPOINT_MD_MIN_PIXELS &&
+            width <= BREAKPOINT_MD_MAX_PIXELS) {
             return SkyMediaBreakpoints.md;
         }
         else {
@@ -2238,7 +2241,7 @@ class SkySelectionBoxAdapterService {
     setChildrenTabIndex(element, tabIndex) {
         const el = element.nativeElement;
         const focusableElems = this.coreAdapterService.getFocusableChildren(el, {
-            ignoreVisibility: true
+            ignoreVisibility: true,
         });
         let index = focusableElems.length;
         while (index--) {
@@ -2284,9 +2287,9 @@ class SkySelectionBoxAdapterService {
         el.tabIndex = tabIndex;
     }
 }
-SkySelectionBoxAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.2.7", ngImport: i0, type: SkySelectionBoxAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
+SkySelectionBoxAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkySelectionBoxAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i2$2.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
 
@@ -2295,13 +2298,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkySelectionBoxDescriptionComponent {
 }
-SkySelectionBoxDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySelectionBoxDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content></ng-content>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
+SkySelectionBoxDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-selection-box-description',
-                    templateUrl: './selection-box-description.component.html'
+                    templateUrl: './selection-box-description.component.html',
                 }]
         }] });
 
@@ -2310,13 +2313,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkySelectionBoxHeaderComponent {
 }
-SkySelectionBoxHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySelectionBoxHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content></ng-content>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
+SkySelectionBoxHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-selection-box-header',
-                    templateUrl: './selection-box-header.component.html'
+                    templateUrl: './selection-box-header.component.html',
                 }]
         }] });
 
@@ -2379,27 +2382,29 @@ class SkySelectionBoxComponent {
     }
     updateCheckedOnControlChange() {
         this.control.checkedChange
-            .pipe(takeUntil(this.ngUnsubscribe)).subscribe((value) => {
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
             this.checked = value;
         });
     }
     updateDisabledState() {
         this.control.disabledChange
-            .pipe(takeUntil(this.ngUnsubscribe)).subscribe((value) => {
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
             this.disabled = value;
         });
     }
 }
-SkySelectionBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.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: "12.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\n      select=\"sky-icon\"\n    >\n    </ng-content>\n  </div>\n\n  <div\n    class=\"sky-selection-box-content\"\n  >\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\n        select=\"sky-selection-box-header\"\n      ></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\n        select=\"sky-selection-box-description\"\n      >\n      </ng-content>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-selection-box-control\"\n    #control\n  >\n    <ng-content\n      select=\"sky-radio\"\n    >\n    </ng-content>\n    <ng-content\n      select=\"sky-checkbox\"\n    >\n    </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:normal;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: "12.2.7", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
+SkySelectionBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: 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: "12.2.16", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-selection-box',
                     styleUrls: ['./selection-box.component.scss'],
                     templateUrl: './selection-box.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }]; }, propDecorators: { control: [{
                 type: Input
@@ -2407,13 +2412,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: ViewChild,
                 args: ['control', {
                         read: ElementRef,
-                        static: false
+                        static: false,
                     }]
             }], selectionBoxEl: [{
                 type: ViewChild,
                 args: ['selectionBox', {
                         read: ElementRef,
-                        static: false
+                        static: false,
                     }]
             }] } });
 
@@ -2486,7 +2491,7 @@ class SkySelectionBoxGridComponent {
                 });
                 this.mutationObserver.observe(el, {
                     characterData: true,
-                    subtree: true
+                    subtree: true,
                 });
             });
         }
@@ -2500,38 +2505,37 @@ class SkySelectionBoxGridComponent {
     }
     updateBreakpointClass() {
         const parentWidth = this.selectionBoxAdapter.getParentWidth(this.hostElRef);
-        this.currentBreakpoint = this.selectionBoxAdapter.getBreakpointForWidth(parentWidth);
+        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: "12.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: "12.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: "12.2.7", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
+SkySelectionBoxGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: SkySelectionBoxGridComponent, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["container"], descendants: true, read: 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: "12.2.16", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-selection-box-grid',
                     templateUrl: './selection-box-grid.component.html',
-                    styleUrls: [
-                        './selection-box-grid.component.scss'
-                    ],
+                    styleUrls: ['./selection-box-grid.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }], 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
+                        read: SkySelectionBoxComponent,
                     }]
             }], elementRef: [{
                 type: ViewChild,
                 args: ['container', {
                         read: ElementRef,
-                        static: true
+                        static: true,
                     }]
             }], onWindowResize: [{
                 type: HostListener,
@@ -2540,43 +2544,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkySelectionBoxModule {
 }
-SkySelectionBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkySelectionBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
+SkySelectionBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySelectionBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
         SkySelectionBoxComponent,
         SkySelectionBoxDescriptionComponent,
-        SkySelectionBoxHeaderComponent], imports: [CommonModule,
-        SkyThemeModule], exports: [SkySelectionBoxGridComponent,
+        SkySelectionBoxHeaderComponent], imports: [CommonModule, SkyThemeModule], exports: [SkySelectionBoxGridComponent,
         SkySelectionBoxComponent,
         SkySelectionBoxDescriptionComponent,
         SkySelectionBoxHeaderComponent] });
-SkySelectionBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxModule, providers: [
-        SkySelectionBoxAdapterService
-    ], imports: [[
-            CommonModule,
-            SkyThemeModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
+SkySelectionBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         SkySelectionBoxGridComponent,
                         SkySelectionBoxComponent,
                         SkySelectionBoxDescriptionComponent,
-                        SkySelectionBoxHeaderComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyThemeModule
+                        SkySelectionBoxHeaderComponent,
                     ],
+                    imports: [CommonModule, SkyThemeModule],
                     exports: [
                         SkySelectionBoxGridComponent,
                         SkySelectionBoxComponent,
                         SkySelectionBoxDescriptionComponent,
-                        SkySelectionBoxHeaderComponent
+                        SkySelectionBoxHeaderComponent,
                     ],
-                    providers: [
-                        SkySelectionBoxAdapterService
-                    ]
+                    providers: [SkySelectionBoxAdapterService],
                 }]
         }] });
 
@@ -2585,14 +2578,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkyToggleSwitchLabelComponent {
 }
-SkyToggleSwitchLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyToggleSwitchLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
+SkyToggleSwitchLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToggleSwitchLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-toggle-switch-label',
                     templateUrl: './toggle-switch-label.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -2600,12 +2593,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 const SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyToggleSwitchComponent),
-    multi: true
+    multi: true,
 };
 const SKY_TOGGLE_SWITCH_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyToggleSwitchComponent),
-    multi: true
+    multi: true,
 };
 // tslint:enable
 let uniqueId = 0;
@@ -2708,19 +2701,19 @@ class SkyToggleSwitchComponent {
     emitChangeEvent() {
         this.onChange(this._checked);
         this.toggleChange.emit({
-            checked: this._checked
+            checked: this._checked,
         });
     }
     toggleChecked() {
         this.checked = !this.checked;
     }
 }
-SkyToggleSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyToggleSwitchComponent, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { toggleChange: "toggleChange" }, providers: [
+SkyToggleSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToggleSwitchComponent, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { toggleChange: "toggleChange" }, providers: [
         SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
-        SKY_TOGGLE_SWITCH_VALIDATOR
-    ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n  class=\"sky-toggle-switch\"\n>\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> <!-- Non-breaking space needed to align switch to baseline! -->\n  </button>\n\n  <label *ngIf=\"hasLabelComponent\"\n    class=\"sky-toggle-switch-label\"\n    [attr.id]=\"labelElementId\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"labelContent\"\n    >\n    </ng-container>\n  </label>\n</span>\n\n<ng-template #labelContent>\n  <ng-content\n    select=\"sky-toggle-switch-label\"\n  ></ng-content>\n</ng-template>", 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: "12.2.7", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
+        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: "12.2.16", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-toggle-switch',
@@ -2728,9 +2721,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     styleUrls: ['./toggle-switch.component.scss'],
                     providers: [
                         SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
-                        SKY_TOGGLE_SWITCH_VALIDATOR
+                        SKY_TOGGLE_SWITCH_VALIDATOR,
                     ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
                 type: Input
@@ -2749,30 +2742,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyToggleSwitchModule {
 }
-SkyToggleSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyToggleSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent,
-        SkyToggleSwitchComponent], imports: [CommonModule,
-        FormsModule], exports: [SkyToggleSwitchLabelComponent,
-        SkyToggleSwitchComponent] });
-SkyToggleSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchModule, imports: [[
-            CommonModule,
-            FormsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
+SkyToggleSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyToggleSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [CommonModule, FormsModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] });
+SkyToggleSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToggleSwitchModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyToggleSwitchLabelComponent,
-                        SkyToggleSwitchComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule
-                    ],
-                    exports: [
-                        SkyToggleSwitchLabelComponent,
-                        SkyToggleSwitchComponent
-                    ]
+                    declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
+                    imports: [CommonModule, FormsModule],
+                    exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
                 }]
         }] });