@skyux/forms 5.9.3 → 5.9.6

package/bundles/skyux-forms.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@skyux/i18n'), require('@skyux/indicators'), require('rxjs'), require('@skyux/theme'), require('rxjs/operators'), require('@skyux/core')) :
     typeof define === 'function' && define.amd ? define('@skyux/forms', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@skyux/i18n', '@skyux/indicators', 'rxjs', '@skyux/theme', 'rxjs/operators', '@skyux/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.forms = {}), global.ng.common, global.ng.core, global.ng.forms, global.i2, global.i2$1, global.rxjs, global.i1$1, global.rxjs.operators, global.i2$2));
-})(this, (function (exports, i1, i0, i4, i2, i2$1, rxjs, i1$1, operators, i2$2) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.forms = {}), global.ng.common, global.ng.core, global.ng.forms, global.i2, global.i2$1, global.rxjs, global.i3, global.rxjs.operators, global.i1$2));
+})(this, (function (exports, i1, i0, i1$1, i2, i2$1, rxjs, i3, operators, i1$2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,11 +24,11 @@
 
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
 
     /**
      * NOTICE: DO NOT MODIFY THIS FILE!
@@ -226,7 +226,7 @@
     SkyCharacterCounterInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterInputDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
     SkyCharacterCounterInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
             {
-                provide: i4.NG_VALIDATORS,
+                provide: i1$1.NG_VALIDATORS,
                 useExisting: SkyCharacterCounterInputDirective,
                 multi: true,
             },
@@ -237,7 +237,7 @@
                         selector: '[skyCharacterCounter]',
                         providers: [
                             {
-                                provide: i4.NG_VALIDATORS,
+                                provide: i1$1.NG_VALIDATORS,
                                 useExisting: SkyCharacterCounterInputDirective,
                                 multi: true,
                             },
@@ -257,15 +257,15 @@
     SkyCharacterCounterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     SkyCharacterCounterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
             SkyCharacterCounterIndicatorComponent], imports: [i1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule,
+            i1$1.FormsModule,
+            i1$1.ReactiveFormsModule,
             SkyFormsResourcesModule,
             i2.SkyI18nModule], exports: [SkyCharacterCounterInputDirective,
             SkyCharacterCounterIndicatorComponent] });
     SkyCharacterCounterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterModule, imports: [[
                 i1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
+                i1$1.FormsModule,
+                i1$1.ReactiveFormsModule,
                 SkyFormsResourcesModule,
                 i2.SkyI18nModule,
             ]] });
@@ -278,8 +278,8 @@
                         ],
                         imports: [
                             i1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
+                            i1$1.FormsModule,
+                            i1$1.ReactiveFormsModule,
                             SkyFormsResourcesModule,
                             i2.SkyI18nModule,
                         ],
@@ -637,7 +637,7 @@
 
     // tslint:disable:no-forward-ref
     var SKY_CHECKBOX_REQUIRED_VALIDATOR = {
-        provide: i4.NG_VALIDATORS,
+        provide: i1$1.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return SkyCheckboxRequiredValidatorDirective; }),
         multi: true,
     };
@@ -656,7 +656,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return SkyCheckboxRequiredValidatorDirective;
-    }(i4.CheckboxRequiredValidator));
+    }(i1$1.CheckboxRequiredValidator));
     SkyCheckboxRequiredValidatorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
     SkyCheckboxRequiredValidatorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxRequiredValidatorDirective, selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]", providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
@@ -917,7 +917,7 @@
         };
         return SkyCheckboxComponent;
     }());
-    SkyCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, deps: [{ token: i1__namespace$1.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
     SkyCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", required: "required" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, ngImport: i0__namespace, template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n", styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, decorators: [{
                 type: i0.Component,
@@ -927,7 +927,7 @@
                         styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"],
                     }]
             }], ctorParameters: function () {
-            return [{ type: i4__namespace.NgControl, decorators: [{
+            return [{ type: i1__namespace$1.NgControl, decorators: [{
                             type: i0.Self
                         }, {
                             type: i0.Optional
@@ -968,10 +968,10 @@
     SkyCheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     SkyCheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
             SkyCheckboxLabelComponent,
-            SkyCheckboxRequiredValidatorDirective], imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule], exports: [SkyCheckboxComponent,
+            SkyCheckboxRequiredValidatorDirective], imports: [i1.CommonModule, i1$1.FormsModule, i2$1.SkyIconModule], exports: [SkyCheckboxComponent,
             SkyCheckboxLabelComponent,
             SkyCheckboxRequiredValidatorDirective] });
-    SkyCheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, imports: [[i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule]] });
+    SkyCheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, imports: [[i1.CommonModule, i1$1.FormsModule, i2$1.SkyIconModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -980,7 +980,7 @@
                             SkyCheckboxLabelComponent,
                             SkyCheckboxRequiredValidatorDirective,
                         ],
-                        imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule],
+                        imports: [i1.CommonModule, i1$1.FormsModule, i2$1.SkyIconModule],
                         exports: [
                             SkyCheckboxComponent,
                             SkyCheckboxLabelComponent,
@@ -1182,12 +1182,12 @@
      * Provides an element to attach a single local file.
      */
     var SkyFileAttachmentComponent = /** @class */ (function () {
-        function SkyFileAttachmentComponent(themeSvc, changeDetector, fileAttachmentService, fileItemService, ngControl) {
-            this.themeSvc = themeSvc;
+        function SkyFileAttachmentComponent(changeDetector, fileAttachmentService, fileItemService, ngControl, themeSvc) {
             this.changeDetector = changeDetector;
             this.fileAttachmentService = fileAttachmentService;
             this.fileItemService = fileItemService;
             this.ngControl = ngControl;
+            this.themeSvc = themeSvc;
             /**
              * Specifies the maximum size in bytes for valid files.
              */
@@ -1272,12 +1272,14 @@
         });
         SkyFileAttachmentComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.themeSvc.settingsChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (themeSettings) {
-                _this.currentThemeName = themeSettings.currentSettings.theme.name;
-                _this.updateFileAttachmentButton();
-            });
+            if (this.themeSvc) {
+                this.themeSvc.settingsChange
+                    .pipe(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (themeSettings) {
+                    _this.currentThemeName = themeSettings.currentSettings.theme.name;
+                    _this.updateFileAttachmentButton();
+                });
+            }
         };
         SkyFileAttachmentComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
@@ -1481,8 +1483,8 @@
         };
         return SkyFileAttachmentComponent;
     }());
-    SkyFileAttachmentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentComponent, deps: [{ token: i1__namespace$1.SkyThemeService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFileAttachmentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", maxFileSize: "maxFileSize", minFileSize: "minFileSize", validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, providers: [SkyFileAttachmentService], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\n  </div>\n  <div\n    class=\"\n      sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n    \"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-file-attachment-drop-description\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <button\n      *ngIf=\"showFileAttachmentButton\"\n      class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n      [disabled]=\"disabled\"\n      (click)=\"onDropClicked()\"\n    >\n      <sky-icon icon=\"folder-open-o\"></sky-icon>\n      {{\n        value\n          ? ('skyux_file_attachment_button_label_replace_file'\n            | skyLibResources)\n          : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n      }}\n    </button>\n    <sky-icon\n      *ngIf=\"value && !isImage() && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    >\n    </sky-icon>\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"getFileName(false)\"\n        (click)=\"emitClick()\"\n      >\n        {{ getFileName() }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_delete' | skyLibResources\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage()\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\"></ng-content>\n</ng-template>\n", styles: [".sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyFileAttachmentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i1__namespace$1.NgControl, optional: true, self: true }, { token: i3__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyFileAttachmentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", maxFileSize: "maxFileSize", minFileSize: "minFileSize", validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, providers: [SkyFileAttachmentService], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\n  </div>\n  <div\n    class=\"\n      sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n    \"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-file-attachment-drop-description\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <button\n      *ngIf=\"showFileAttachmentButton\"\n      class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n      [disabled]=\"disabled\"\n      (click)=\"onDropClicked()\"\n    >\n      <sky-icon icon=\"folder-open-o\"></sky-icon>\n      {{\n        value\n          ? ('skyux_file_attachment_button_label_replace_file'\n            | skyLibResources)\n          : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n      }}\n    </button>\n    <sky-icon\n      *ngIf=\"value && !isImage() && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    >\n    </sky-icon>\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"getFileName(false)\"\n        (click)=\"emitClick()\"\n      >\n        {{ getFileName() }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_delete' | skyLibResources\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage()\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\"></ng-content>\n</ng-template>\n", styles: [".sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1493,10 +1495,12 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
-            return [{ type: i1__namespace$1.SkyThemeService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i4__namespace.NgControl, decorators: [{
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i1__namespace$1.NgControl, decorators: [{
                             type: i0.Self
                         }, {
                             type: i0.Optional
+                        }] }, { type: i3__namespace.SkyThemeService, decorators: [{
+                            type: i0.Optional
                         }] }];
         }, propDecorators: { acceptedTypes: [{
                     type: i0.Input
@@ -1710,7 +1714,7 @@
         return SkyFileDropComponent;
     }());
     SkyFileDropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileDropComponent, deps: [{ token: SkyFileAttachmentService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFileDropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-file-drop-row\"\n  [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n>\n  <div\n    class=\"sky-file-drop-col\"\n    [ngClass]=\"{\n      'sky-file-drop-accept': acceptedOver,\n      'sky-file-drop-reject': rejectedOver\n    }\"\n  >\n    <button\n      class=\"sky-file-drop sky-file-drop-target\"\n      type=\"button\"\n      (click)=\"dropClicked()\"\n      (dragover)=\"fileDragOver($event)\"\n      (dragenter)=\"fileDragEnter($event)\"\n      (dragleave)=\"fileDragLeave($event)\"\n      (drop)=\"fileDrop($event)\"\n      [attr.aria-label]=\"\n        fileUploadAriaLabel ||\n        ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n      \"\n    ></button>\n\n    <input\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      type=\"file\"\n      class=\"sky-file-input-hidden\"\n      [attr.multiple]=\"multiple ? multiple : null\"\n      [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n\n    <div\n      class=\"sky-file-drop-contents sky-padding-even-default\"\n      *ngIf=\"customEl.children.length === 0\"\n    >\n      <div class=\"sky-file-drop-contents-not-over\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources\n          }}\n        </div>\n        <div class=\"sky-file-drop-text\">\n          {{\n            'skyux_file_attachment_file_upload_or_click_to_browse'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is valid -->\n      <div class=\"sky-file-drop-contents-accept\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drop_files_here'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is invalid -->\n      <div class=\"sky-file-drop-contents-reject\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n    </div>\n\n    <div class=\"sky-file-drop-contents-custom\" #customEl>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n    <div class=\"sky-file-drop-contents sky-padding-even-default\">\n      <div class=\"sky-file-drop-link\">\n        <div class=\"sky-file-drop-link-header\">\n          <div class=\"sky-file-drop-text-header sky-headline\">\n            {{\n              'skyux_file_attachment_file_upload_paste_link' | skyLibResources\n            }}\n          </div>\n        </div>\n        <div class=\"sky-form-group\">\n          <input\n            type=\"text\"\n            class=\"sky-form-control\"\n            [attr.aria-label]=\"\n              linkUploadAriaLabel ||\n              ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\n            \"\n            [attr.placeholder]=\"\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\n            \"\n            [(ngModel)]=\"linkUrl\"\n            (blur)=\"onLinkBlur()\"\n            (keyup)=\"addLinkEnter($event)\"\n          />\n        </div>\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-primary\"\n          [disabled]=\"!linkUrl\"\n          (click)=\"addLink($event)\"\n        >\n          {{\n            'skyux_file_attachment_file_upload_paste_link_done'\n              | skyLibResources\n          }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-noclick .sky-file-drop-contents{cursor:default}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe } });
+    SkyFileDropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-file-drop-row\"\n  [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n>\n  <div\n    class=\"sky-file-drop-col\"\n    [ngClass]=\"{\n      'sky-file-drop-accept': acceptedOver,\n      'sky-file-drop-reject': rejectedOver\n    }\"\n  >\n    <button\n      class=\"sky-file-drop sky-file-drop-target\"\n      type=\"button\"\n      (click)=\"dropClicked()\"\n      (dragover)=\"fileDragOver($event)\"\n      (dragenter)=\"fileDragEnter($event)\"\n      (dragleave)=\"fileDragLeave($event)\"\n      (drop)=\"fileDrop($event)\"\n      [attr.aria-label]=\"\n        fileUploadAriaLabel ||\n        ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n      \"\n    ></button>\n\n    <input\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      type=\"file\"\n      class=\"sky-file-input-hidden\"\n      [attr.multiple]=\"multiple ? multiple : null\"\n      [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n\n    <div\n      class=\"sky-file-drop-contents sky-padding-even-default\"\n      *ngIf=\"customEl.children.length === 0\"\n    >\n      <div class=\"sky-file-drop-contents-not-over\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources\n          }}\n        </div>\n        <div class=\"sky-file-drop-text\">\n          {{\n            'skyux_file_attachment_file_upload_or_click_to_browse'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is valid -->\n      <div class=\"sky-file-drop-contents-accept\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_drop_files_here'\n              | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n\n      <!-- This will appear when file is dragged over and is invalid -->\n      <div class=\"sky-file-drop-contents-reject\">\n        <div class=\"sky-file-drop-text-header sky-headline\">\n          {{\n            'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n          }}\n        </div>\n        <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\"></sky-icon>\n      </div>\n    </div>\n\n    <div class=\"sky-file-drop-contents-custom\" #customEl>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n    <div class=\"sky-file-drop-contents sky-padding-even-default\">\n      <div class=\"sky-file-drop-link\">\n        <div class=\"sky-file-drop-link-header\">\n          <div class=\"sky-file-drop-text-header sky-headline\">\n            {{\n              'skyux_file_attachment_file_upload_paste_link' | skyLibResources\n            }}\n          </div>\n        </div>\n        <div class=\"sky-form-group\">\n          <input\n            type=\"text\"\n            class=\"sky-form-control\"\n            [attr.aria-label]=\"\n              linkUploadAriaLabel ||\n              ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\n            \"\n            [attr.placeholder]=\"\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\n            \"\n            [(ngModel)]=\"linkUrl\"\n            (blur)=\"onLinkBlur()\"\n            (keyup)=\"addLinkEnter($event)\"\n          />\n        </div>\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-primary\"\n          [disabled]=\"!linkUrl\"\n          (click)=\"addLink($event)\"\n        >\n          {{\n            'skyux_file_attachment_file_upload_paste_link_done'\n              | skyLibResources\n          }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-noclick .sky-file-drop-contents{cursor:default}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.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: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileDropComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1940,22 +1944,22 @@
             SkyFileDropComponent,
             SkyFileItemComponent,
             SkyFileSizePipe], imports: [i1.CommonModule,
-            i4.FormsModule,
+            i1$1.FormsModule,
             SkyFormsResourcesModule,
             i2.SkyI18nModule,
             i2$1.SkyIconModule,
-            i1$1.SkyThemeModule], exports: [SkyFileAttachmentComponent,
+            i3.SkyThemeModule], exports: [SkyFileAttachmentComponent,
             SkyFileAttachmentLabelComponent,
             SkyFileDropComponent,
             SkyFileItemComponent,
             SkyFileSizePipe] });
     SkyFileAttachmentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentsModule, providers: [i1.DecimalPipe, SkyFileItemService], imports: [[
                 i1.CommonModule,
-                i4.FormsModule,
+                i1$1.FormsModule,
                 SkyFormsResourcesModule,
                 i2.SkyI18nModule,
                 i2$1.SkyIconModule,
-                i1$1.SkyThemeModule,
+                i3.SkyThemeModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFileAttachmentsModule, decorators: [{
                 type: i0.NgModule,
@@ -1969,11 +1973,11 @@
                         ],
                         imports: [
                             i1.CommonModule,
-                            i4.FormsModule,
+                            i1$1.FormsModule,
                             SkyFormsResourcesModule,
                             i2.SkyI18nModule,
                             i2$1.SkyIconModule,
-                            i1$1.SkyThemeModule,
+                            i3.SkyThemeModule,
                         ],
                         exports: [
                             SkyFileAttachmentComponent,
@@ -2109,7 +2113,7 @@
         return SkyInputBoxComponent;
     }());
     SkyInputBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyInputBoxHostService }, { token: SkyInputBoxAdapterService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyInputBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled" }, providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], queries: [{ propertyName: "formControl", first: true, predicate: i4.FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: i4.FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: i4.NgModel, descendants: true }], ngImport: i0__namespace, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\"></ng-container>\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"characterCountTemplate\"\n            ></ng-container>\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\"></ng-content>\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <ng-content select=\".sky-control-help\"></ng-content>\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <ng-content select=\"sky-character-counter-indicator\"></ng-content>\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content select=\".sky-form-control\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostInputTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsLeftTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content\n    select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsInsetTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset-left\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <ng-content select=\".sky-error-label\"></ng-content>\n</ng-template>\n", styles: ["sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap}sky-input-box .sky-form-group .sky-control-help{margin:0 0 0 4px}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{background-color:#fff;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0;padding-top:10px}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{resize:vertical}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], directives: [{ type: i1__namespace$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    SkyInputBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled" }, providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], queries: [{ propertyName: "formControl", first: true, predicate: i1$1.FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: i1$1.FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: i1$1.NgModel, descendants: true }], ngImport: i0__namespace, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\"></ng-container>\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': disabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\"></ng-container>\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"characterCountTemplate\"\n            ></ng-container>\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\"></ng-content>\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <ng-content select=\".sky-control-help\"></ng-content>\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <ng-content select=\"sky-character-counter-indicator\"></ng-content>\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content select=\".sky-form-control\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostInputTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\"></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsLeftTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content\n    select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n  ></ng-content>\n  <ng-container *ngTemplateOutlet=\"hostButtonsInsetTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content\n      select=\".sky-input-group-icon.sky-input-box-icon-inset-left\"\n    ></ng-content>\n    <ng-container *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <ng-content select=\".sky-error-label\"></ng-content>\n</ng-template>\n", styles: ["sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap}sky-input-box .sky-form-group .sky-control-help{margin:0 0 0 4px}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #ef4044;color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{background-color:#fff;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0;padding-top:10px}@-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: i3__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2127,13 +2131,13 @@
                     type: i0.Input
                 }], formControl: [{
                     type: i0.ContentChild,
-                    args: [i4.FormControlDirective]
+                    args: [i1$1.FormControlDirective]
                 }], formControlByName: [{
                     type: i0.ContentChild,
-                    args: [i4.FormControlName]
+                    args: [i1$1.FormControlName]
                 }], ngModel: [{
                     type: i0.ContentChild,
-                    args: [i4.NgModel]
+                    args: [i1$1.NgModel]
                 }] } });
 
     var SkyInputBoxModule = /** @class */ (function () {
@@ -2142,13 +2146,13 @@
         return SkyInputBoxModule;
     }());
     SkyInputBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyInputBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [i1.CommonModule, i1$1.SkyThemeModule], exports: [SkyInputBoxComponent] });
-    SkyInputBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, imports: [[i1.CommonModule, i1$1.SkyThemeModule]] });
+    SkyInputBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [i1.CommonModule, i3.SkyThemeModule], exports: [SkyInputBoxComponent] });
+    SkyInputBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, imports: [[i1.CommonModule, i3.SkyThemeModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInputBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SkyInputBoxComponent],
-                        imports: [i1.CommonModule, i1$1.SkyThemeModule],
+                        imports: [i1.CommonModule, i3.SkyThemeModule],
                         exports: [SkyInputBoxComponent],
                     }]
             }] });
@@ -2163,7 +2167,7 @@
      */
     // tslint:disable:no-forward-ref no-use-before-declare
     var SKY_RADIO_CONTROL_VALUE_ACCESSOR = {
-        provide: i4.NG_VALUE_ACCESSOR,
+        provide: i1$1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return SkyRadioComponent; }),
         multi: true,
     };
@@ -2664,7 +2668,7 @@
         };
         return SkyRadioGroupComponent;
     }());
-    SkyRadioGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioGroupComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyRadioGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioGroupComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
     SkyRadioGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", name: "name", required: "required", value: "value", tabIndex: "tabIndex" }, queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-required]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : null\"\n>\n  <ng-content></ng-content>\n</div>\n" });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioGroupComponent, decorators: [{
                 type: i0.Component,
@@ -2673,7 +2677,7 @@
                         template: "<div\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-required]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : null\"\n>\n  <ng-content></ng-content>\n</div>\n",
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i4__namespace.NgControl, decorators: [{
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.NgControl, decorators: [{
                             type: i0.Self
                         }, {
                             type: i0.Optional
@@ -2732,8 +2736,8 @@
     SkyRadioModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     SkyRadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, declarations: [SkyRadioComponent,
             SkyRadioGroupComponent,
-            SkyRadioLabelComponent], imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule], exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent] });
-    SkyRadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, imports: [[i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule]] });
+            SkyRadioLabelComponent], imports: [i1.CommonModule, i1$1.FormsModule, i2$1.SkyIconModule], exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent] });
+    SkyRadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, imports: [[i1.CommonModule, i1$1.FormsModule, i2$1.SkyIconModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -2742,7 +2746,7 @@
                             SkyRadioGroupComponent,
                             SkyRadioLabelComponent,
                         ],
-                        imports: [i1.CommonModule, i4.FormsModule, i2$1.SkyIconModule],
+                        imports: [i1.CommonModule, i1$1.FormsModule, i2$1.SkyIconModule],
                         exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent],
                     }]
             }] });
@@ -2783,18 +2787,18 @@
          */
         SkySelectionBoxAdapterService.prototype.getBreakpointForWidth = function (width) {
             if (width <= BREAKPOINT_XS_MAX_PIXELS) {
-                return i2$2.SkyMediaBreakpoints.xs;
+                return i1$2.SkyMediaBreakpoints.xs;
             }
             else if (width >= BREAKPOINT_SM_MIN_PIXELS &&
                 width <= BREAKPOINT_SM_MAX_PIXELS) {
-                return i2$2.SkyMediaBreakpoints.sm;
+                return i1$2.SkyMediaBreakpoints.sm;
             }
             else if (width >= BREAKPOINT_MD_MIN_PIXELS &&
                 width <= BREAKPOINT_MD_MAX_PIXELS) {
-                return i2$2.SkyMediaBreakpoints.md;
+                return i1$2.SkyMediaBreakpoints.md;
             }
             else {
-                return i2$2.SkyMediaBreakpoints.lg;
+                return i1$2.SkyMediaBreakpoints.lg;
             }
         };
         /**
@@ -2834,19 +2838,19 @@
             var newClass;
             // tslint:disable-next-line: switch-default
             switch (breakpoint) {
-                case i2$2.SkyMediaBreakpoints.xs: {
+                case i1$2.SkyMediaBreakpoints.xs: {
                     newClass = RESPONSIVE_CLASS_XS;
                     break;
                 }
-                case i2$2.SkyMediaBreakpoints.sm: {
+                case i1$2.SkyMediaBreakpoints.sm: {
                     newClass = RESPONSIVE_CLASS_SM;
                     break;
                 }
-                case i2$2.SkyMediaBreakpoints.md: {
+                case i1$2.SkyMediaBreakpoints.md: {
                     newClass = RESPONSIVE_CLASS_MD;
                     break;
                 }
-                case i2$2.SkyMediaBreakpoints.lg: {
+                case i1$2.SkyMediaBreakpoints.lg: {
                     newClass = RESPONSIVE_CLASS_LG;
                     break;
                 }
@@ -2862,11 +2866,11 @@
         };
         return SkySelectionBoxAdapterService;
     }());
-    SkySelectionBoxAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService, deps: [{ token: i2__namespace$2.SkyCoreAdapterService }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkySelectionBoxAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService, deps: [{ token: i1__namespace$2.SkyCoreAdapterService }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     SkySelectionBoxAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxAdapterService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i2__namespace$2.SkyCoreAdapterService }, { type: i0__namespace.RendererFactory2 }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.SkyCoreAdapterService }, { type: i0__namespace.RendererFactory2 }]; } });
 
     /**
      * Specifies the description to display in a selection box.
@@ -2971,7 +2975,7 @@
         return SkySelectionBoxComponent;
     }());
     SkySelectionBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySelectionBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: i0.ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\"> </ng-content>\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\"></ng-content>\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\"> </ng-content>\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\"> </ng-content>\n    <ng-content select=\"sky-checkbox\"> </ng-content>\n  </div>\n</div>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#ffffff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    SkySelectionBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: i0.ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\"> </ng-content>\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\"></ng-content>\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\"> </ng-content>\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\"> </ng-content>\n    <ng-content select=\"sky-checkbox\"> </ng-content>\n  </div>\n</div>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#ffffff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:#e8f8ff;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#e8f8ff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3002,13 +3006,13 @@
      * Creates a grid layout for an array of selection boxes.
      */
     var SkySelectionBoxGridComponent = /** @class */ (function () {
-        function SkySelectionBoxGridComponent(themeSvc, coreAdapterService, selectionBoxAdapter, hostElRef, mutationObserverSvc, ngZone) {
-            this.themeSvc = themeSvc;
+        function SkySelectionBoxGridComponent(coreAdapterService, selectionBoxAdapter, hostElRef, mutationObserverSvc, ngZone, themeSvc) {
             this.coreAdapterService = coreAdapterService;
             this.selectionBoxAdapter = selectionBoxAdapter;
             this.hostElRef = hostElRef;
             this.mutationObserverSvc = mutationObserverSvc;
             this.ngZone = ngZone;
+            this.themeSvc = themeSvc;
             this.ngUnsubscribe = new rxjs.Subject();
         }
         Object.defineProperty(SkySelectionBoxGridComponent.prototype, "alignItems", {
@@ -3099,7 +3103,7 @@
         };
         return SkySelectionBoxGridComponent;
     }());
-    SkySelectionBoxGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxGridComponent, deps: [{ token: i1__namespace$1.SkyThemeService }, { token: i2__namespace$2.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0__namespace.ElementRef }, { token: i2__namespace$2.MutationObserverService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySelectionBoxGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxGridComponent, deps: [{ token: i1__namespace$2.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0__namespace.ElementRef }, { token: i1__namespace$2.MutationObserverService }, { token: i0__namespace.NgZone }, { token: i3__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
     SkySelectionBoxGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxGridComponent, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["container"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\"></ng-content>\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxGridComponent, decorators: [{
                 type: i0.Component,
@@ -3110,7 +3114,11 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.SkyThemeService }, { type: i2__namespace$2.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0__namespace.ElementRef }, { type: i2__namespace$2.MutationObserverService }, { type: i0__namespace.NgZone }]; }, propDecorators: { alignItems: [{
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace$2.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0__namespace.ElementRef }, { type: i1__namespace$2.MutationObserverService }, { type: i0__namespace.NgZone }, { type: i3__namespace.SkyThemeService, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { alignItems: [{
                     type: i0.Input
                 }], selectionBoxes: [{
                     type: i0.ContentChildren,
@@ -3155,11 +3163,11 @@
     SkySelectionBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
             SkySelectionBoxComponent,
             SkySelectionBoxDescriptionComponent,
-            SkySelectionBoxHeaderComponent], imports: [i1.CommonModule, i1$1.SkyThemeModule], exports: [SkySelectionBoxGridComponent,
+            SkySelectionBoxHeaderComponent], imports: [i1.CommonModule, i3.SkyThemeModule], exports: [SkySelectionBoxGridComponent,
             SkySelectionBoxComponent,
             SkySelectionBoxDescriptionComponent,
             SkySelectionBoxHeaderComponent] });
-    SkySelectionBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [[i1.CommonModule, i1$1.SkyThemeModule]] });
+    SkySelectionBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [[i1.CommonModule, i3.SkyThemeModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -3169,7 +3177,7 @@
                             SkySelectionBoxDescriptionComponent,
                             SkySelectionBoxHeaderComponent,
                         ],
-                        imports: [i1.CommonModule, i1$1.SkyThemeModule],
+                        imports: [i1.CommonModule, i3.SkyThemeModule],
                         exports: [
                             SkySelectionBoxGridComponent,
                             SkySelectionBoxComponent,
@@ -3201,12 +3209,12 @@
 
     // tslint:disable:no-forward-ref no-use-before-declare
     var SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR = {
-        provide: i4.NG_VALUE_ACCESSOR,
+        provide: i1$1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return SkyToggleSwitchComponent; }),
         multi: true,
     };
     var SKY_TOGGLE_SWITCH_VALIDATOR = {
-        provide: i4.NG_VALIDATORS,
+        provide: i1$1.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return SkyToggleSwitchComponent; }),
         multi: true,
     };
@@ -3371,13 +3379,13 @@
         return SkyToggleSwitchModule;
     }());
     SkyToggleSwitchModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyToggleSwitchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [i1.CommonModule, i4.FormsModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] });
-    SkyToggleSwitchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, imports: [[i1.CommonModule, i4.FormsModule]] });
+    SkyToggleSwitchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [i1.CommonModule, i1$1.FormsModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] });
+    SkyToggleSwitchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, imports: [[i1.CommonModule, i1$1.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyToggleSwitchModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
-                        imports: [i1.CommonModule, i4.FormsModule],
+                        imports: [i1.CommonModule, i1$1.FormsModule],
                         exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
                     }]
             }] });